Skip to main content

Jquery Mobile Form - Radio buttons

    Radio buttons - popularly used in forms for single option selection, pose a problem in the mobile web world! The radio buttons being so small as they are, reduce the touch area and it becomes really difficult for selection. Jquery Mobile styles these radio buttons in such a way that they become touch friendly and gel with their overall framework design. Jquery Mobile styles the label for the radio buttons so that they are larger and clickable. A custom set of icons to represent the radio button is added to provide additional visual feedback.

    The radio buttons can be used singularly or in a vertical group or can be even grouped horizontally. These radio buttons can be used along with data-mini="true" too, which renders the radio buttons in a smaller size. We will take a look at all this in the example that follows.


    In the first implementation you will see, 3 singular radio buttons which are not attached to each other like in the second implementation. These 2 implementations differ by the usage of the "fieldset" and the data-role="controlgroup". Adding the fieldset with data-role="controlgroup" around the input tags will group the radio buttons together giving them the right visual grouping. Using the data-mini="true" attribute with fieldset will render smaller sized radio buttons as seen in the third implementation.

    In the next implementation, we have the label and the radio buttons control group aligned next to each other. To achieve this you need to wrap your fieldset with dat-role="controlgroup" within a div with data-role="fieldcontain". All of these 4 implementation have a vertical grouping of radio buttons.

    In the next and final implementation of radio buttons we will see how to create a horizontal set of radio buttons. This again is pretty simple like all the above implementations. You need to create a fieldset with data-role="controlgroup" and another data attribute data-type="horizontal". This data-tupe attribute will inform JQM to render the radio buttons in a horizontal group.

    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 radio buttons effectively 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 and Jquery Mobile form elements. 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

Simple Map using Google Maps API v3

       Let us begin with our first example using Google Maps API v3. Even before a marker - the most basic element of a map, appears, the map should be seen on the screen. Let us have a look at the following javascript code first. We will then have a look at the elements in the code.             Ta-da a map in action! This map is centred at the Sansad Bhavan, New Delhi, India. In the above code the head of the document contains a critical script element. Its src attribute points to the location of the API on Google's server. In API v3 there is no need to obtain a key for the API. The remaining is simple Javascript.           Happy mapping!!!
2 comments
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

100th Post...

            I’m so excited that I have finally reached this milestone. Well I am not completely certain that this is a big deal but anything that is ' 100 ' just seems big and grand. I have been blogging here for around 8 months now, and it gives me immense pleasure to say that now I have become an experienced blogger.:D             I never thought when I started this blog in November, 2010 that I would have much to offer compared to the hundreds of other GIS bloggers out there. But today with more than 21,000 page views, more than 100 comments, more than 100 followers and several Like and +1s the response to this blog has been nothing short of amazing. Now the next target for me would be to cross 50,000 views.             At the end, I would  like to thank all visitors and members for making this blo...
4 comments
Read more

Google Map's Real-Time Traffic Layer...

    You can now check the traffic condition on the road before you leave for work, or a party or to your friend's place. Google's Traffic layer shows the traffic conditions in your area - LIVE!!! Live traffic data is available in major cities in the United States, France, Britain, Canada and Australia, with new cities and countries frequently added. The Google Maps API allows you to add real-time traffic information (where supported) to your maps using the TrafficLayer object. Traffic information is provided for the time at which the request is made. Consult this spreadsheet to determine traffic coverage support.     Let us now have a look at the Google Maps API - Trafiic Layer example. Copy the following code in a simple text file and save it as html. Click on this html file and it will open in your default browser. You will then see the traffic conditions in your area - LIVE...     The output of the above code looks as seen in the r...
4 comments
Read more

Merry Christmas Everyone

            Another year has come and gone and it is that time of the year again, when you are thankful for everything merry and bright. May this Christmas be bright and cheerful and may the New Year begin on a prosperous note! Wishing you all a Merry Christmas !
Post a Comment
Read more