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

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 function initialize() {     var myLatlng = new google.maps.L
4 comments
Read more

Curious scenes in Google Map Satellite view...

            Most of you'll must have already seen many images like air crafts, brand logos, animals captured in the Google Satellite images or Google Earth for that matter. I am going to point out some that I found amazing... Italy's Big Pink Bunny - Google Map Link Australia's Blue Tree - Google Map Link  Nevada's Desert Crop Circle - Google Map Link  England's Dino Maze - Google Map Link Oregon's Firefox Crop Circle - Google Map Link              The above images are just a few of the many amazing Google Satellite images available on the web...Hope you enjoy them! Feel free to post links and images similar to these, here... Update - March 15, 2012:         I just came across the following freaky street view in Google Maps. I am sharing the image and the actual Google link here. You will need to enable the street view - i.e. drop the yellow pegman on the Google Map at the pointer location and then check out the sky! Let m
2 comments
Read more

Coming soon...A game based on Google Maps

           Set for release in February 2012, a game based on Google Maps will be added to the Google+ Games Collection. The new game based on Google Maps, developed by the Google Maps team was promoted in a short video clip . The game is developed based on WebGL which allows users to view 3D graphics without having to install any additional plugins.            With the tag line "Play your world, like never before", the game is set on a cube board that the user can tilt to navigate a small blue ball through various locations, both indoor and outdoor. Each side of the cube features a different geographic section of the world. The goal appears to be to hit various markers along the way.
Post a Comment
Read more

Fedora Geo Spin

         It's here! An GIS oriented Operating System!...Currently under development with a target release as Fedora 15, Fedora Geo Spin is a collection of mapping tools that run on Fedora. This includes tools for map making, integration into OpenStreetMap, and components that can be run on a GPS enabled device.          This spin will include map making tools that integrate with OpenStreetMap. This will enable map makers to use Fedora as a platform for cartography.The end goal is an ISO and kickstart that can be depolyed to work with most cartography setups.          Integration with developer tools for developing other programs that work with GPS devices. This may lead to a developer subspin that integrates development libraries and tools including for GPS devices. This probably includes a group in comps for handling Geo related libraries and the development counterparts.          This Geo spin can be integrated with MIDs and other devices that can be enabled with a GPS,
2 comments
Read more