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

Playing with the markers and info window bubbles...

    In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase!     So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life!     The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .
3 comments
Read more

Jugnu: India's first Nano Satellite

          IIT-Kanpur with its nano satellite 'Jugnu' has set new highs in the field of space research. A team of students, working under Dr NS Vyas (the visionary man behind the making of the nano-satellite) and other faculty members of the institute, have successfully made the country's first nano-satellite to be developed for the first time by any educational institute.           The development of the Jugnu started in the year 2008 with a team of 3 students. With time, the team has grown to the size of more than 50 students ranging from 1st year undergraduates to final year postgraduates and 14 professors from different disciplines to complete this challenging mission.            The satellite has been handed over to two ISRO scientists, DVA Raghav Murthy (Project Director, Small Satellite Projects) and Dr SK Shiv Kumar (Director, ISRO sat...
4 comments
Read more

ES6 101 - Lexical Declarations Let

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

Blue census, Water census...

          The Uttar Pradesh State Water and Sanitation Mission (SWSM) will soon be documenting the drinking water resources across six zones of the state. These zones are Allahabad, Ghaziabad, Gorakhpur, Lucknow, Varanasi and Moradabad. The documentation - to be done through Geographical Information System (GIS) and Global Positioning System (GPS) mapping - will take note of ponds (manmade and natural), wells and handpumps. This exercise which is a part of the National Rural Drinking Water Programme (NRDWP) will help the officials to create a proper database of these resources, which will be used for their management.          Through the mapping, all the details of all the resources will be compiled, complete with their longitude and latitude dimensions. The department plans to start off the exercise by April 1, 2011 and should end by March 31, 2012. The focus will initially be on villages where the ...
1 comment
Read more

Reverse Geocoding

    The term geocoding generally refers to translating a human-readable address into a location on the map. The process of doing the converse, translating a location on the map into a human-readable address, is known as reverse geocoding. You can read more about geocoding here .     The Geocoder in Google Maps API v3, supports reverse geocoding directly. While geocoding, we supply a textual address and that gets mapped as a location on the map. However, in reverse geocoding, instead of supplying the textual address, we will supply a comma- separated latitude- longitude pair and get a textual address as the result. You can have a look at the geocoding example here , before proceeding to the reverse geocoding example.     The reverse geocoder often returns more than one result. Geocoding "addresses" are not just postal addresses, but any way to geographically name a location. For example, when geocoding a point in the city of Agra, India,...
Post a Comment
Read more