Skip to main content

Jquery Mobile Form - Flip toggle switch control

    A binary flip switch is a very common UI element in the mobile web world and was made popular by our very own iOS. This flip switch is used mostly for binary on/off or true/false data inputs. To create a flip switch or a toggle switch, start with a select with data-attribute="slider" and two options. Jquery Mobile would style this select as a regular flip switch with capsule corners and a a circular handle which can be either dragged from one end to the other or tap either sides of the switch.

    The flip toggle switch is available in 2 flavors/sizes - regular and mini. Adding a data attribute data-mini="true" to the input tag renders a smaller sized flip switch. Let's take a look at the code sample below to understand the working in a better way.

    In the code above, you will see 4 different implementations of the flip switch. The first one is a regular flip switch with the label and the toggle button one below the other. The second implementation is exactly similar to the first implementation with the only difference of the added data attribute "data-mini="true"" which reduces the size (basically height) of the flip switch.

    The third implementation gets the label and the slider on the same line. This implementation is done using a div with data attribute data-role="fieldcontain" around the label and select tags. This div has to be within a form tag. Maintaining the HTML structure is very important when using JQuery Mobile framework. To disable the input field just add the keyword "disabled" to the input tag and your input type would be disabled.

     Since this flip switch is nothing but a select with two options, we can make either one of the options selected by default by just writing "selected" for that particular option in the select. This can be seen in the code above, where the last last flip switch is disabled and is "ON"

    For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful label. To hide labels in a way that leaves them visible to assistive technologies. — for example, when letting an element's placeholder attribute serve as a label — apply the helper class ui-hidden-accessible to the label itself. While the label will no longer be visible, it will be available to assisitive technologies such as screen readers.

     Hope this post has been informative to you and helps you use the range input type effectively to create the range slider in your next Jquery Mobile based application. Drop a comment to let me know what you feel about this post as well as the earlier series on Jquery Mobile listview. Share the post if is has helped you, so that maximum developers benefit from this one.

Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

What do you do with Google Maps API...?

            By now we definitely know that Google Maps API stands out amongst other applications in creating interactive world maps. There are a couple of others which may be static, 2D or even 3D, etc, but Google maps have unique and distinctive features that make experienced webmasters prefer them over others.             Besides, being a great way to locate and navigate to places, Google maps API also provides many area and length measurement functions. These APIs’ allow for the development of web applications like measure distances and land features online with the Google maps embedded in them.             The Google Maps API has been considerably the most popular mapping API in the world. The Google Maps API delivers the standard interactive, easy-to-use features which are beneficial for your business. Google Maps A...
Post a Comment
Read more

Google Map within an image

    Hope you'll enjoyed the last post describing how two maps can be placed side-by-side on the same webpage ! Most of you'll will enjoy today's code example too! All of you out there who work on Google Maps API, must have visited the API home page several times! You must have seen the map within the Google Nexus Phone frame there! It appears as though there is a map visible on the mobile screen! One of friend asked me the other day if I could implement that, and I did it and here is the code that I am sharing with you all!     I have used an I-Pad frame and am displaying a map centered at India within it! Here is the code!     The output of the above code is as seen in the result section above! The map that is appearing within the frame is not just an image but can be dragged like any other Google Map! Enjoy the code. It is very simple to understand!     In case you have any queries regarding the same, feel free to le...
Post a Comment
Read more

Google Street View Image API

    Street View is one of most used feature of the Google Maps and why not? You can actually see any part of the world as if you are visiting the place at that very moment. And now with the Google Street View Image API, you don't even need to carry a camera with you to the places you visit. You can take-in all the scenic beauty without even bothering about clicking a single picture. You can come back from your vacation and get a few images using the Google Street View Image API and show those images to your friends and relatives. Create an album of high definition images and go ahead and share it on Facebook for your friends to have a look.     Using the Google Street View Image API is very simple and anybody can make use of it without any programming knowledge required. I will walk you through the entire process of effectively using the Google Street View Image API. So if you are set, let's go on an amazing ride across the globe with the Google Street Views. ...
1 comment
Read more

Retriving co-ordinates...

         We have seen 2 Google Maps API v3 examples wherein we have retrieved the latitude-longitude co-ordinates of the point of click on the map. In the first example we have displayed the co-ordinates in the information window and in the second , we have displayed the co-ordinates in a form in the information window.         Today we will create a code to retrieve the latitude longitude co-ordinates in a text box while simultaneously a marker appears on the map as well. So, here goes the code. <html> <head> <title> Google Maps API v3 - Adding marker on Click and retrieving the co-ordinates in a text box </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using event as a parameter to a function declare map, strictly as a global variable fun...
5 comments
Read more

A Giant called Google...

    Wondering what you will be reading in this post today and what is "Google Giant"! Well, I was working on a simple project a couple of months back and that is the time when I was amazed and by the size of data that Google Maps servers might be having! As most of the readers (developers and enthusiast included) would know or might have noticed, Google maps are rendered by stitching small images together. You must have observed this on quite a number of occasions, when you see grey tiles when you have a slow internet connection in particular. It takes time for the images or tiles as we call them to be displayed.     Let us try and estimate what could be the size of the Google Maps data! Before proceeding, let's make a few assumptions and considerations. 1. Let's consider the Google Street View maps only. 2. The zoom level that is considered for the calculations is 21 - the max zoom level allowed on Google Maps API. 3. All the numbers are just an esti...
6 comments
Read more