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

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

Form info window

         Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary!          In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below! <html> <head> <title> Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it. </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using ev...
5 comments
Read more

SASS - Nesting the CSS

    To begin with SASS we need Ruby to be installed on our machine. To set up Ruby and SASS on your machine refer to the following steps.     If you’re using OS X, you’ll already have Ruby installed. Windows users can install Ruby via Windows installer , and Linux users can install it via their package manager. Once you have Ruby installed, you can install Sass by running: gem install sass     To translate your Sass file into a CSS file, run sass --watch style.scss:style.css     Now whenever you change style.scss, Sass will automatically update style.css with the changes. Later on when you have several Sass files, you can also watch an entire directory: sass --watch stylesheets/sass:stylesheets/compiled     We don't need to do so many things to get up and running. We just need our good old friend jsFiddle. We will take a look at the various features of SASS today onward. Let's discuss the most basic and an important featu...
Post a Comment
Read more

CSS - Counter-increment and counter-reset

Today we will take a look at a couple of CSS properties that are usually used together but not very frequently used. We will be talking about the counter-increment and counter-reset properties. As the name suggests counter-increment and counter-reset definitely have something to do with counters. Let's take a look at the example below which will clearly illustrate the usage of these 2 properties. The implementation is very clear and straight-forward. The only question that remains now, can these CSS properties replace the ordered list (ol-li) HTML code? Do let me know your comments and feedback. Would you use these CSS properties against the standard ol-li structure?
Post a Comment
Read more

The bitter divorce of PSD and HTML

    Today's article is an interesting post that I read. The original post in Portuguese and authored by Fabricio Teixeira  can be found at arquiteturadeinformacao  (Now don't ask me pronounce this =)).     Some are calling it the death of PSD  but I prefer calling it a "divorce". PSD and HTML are both healthy and living strong, just that they do not live together anymore. "PSD to HTML", which for years was the most accurate and sometimes the only right path to web design process, seems like has its days counted.     Firstly you draw a page in Photoshop; impeccable layout, representing exactly how the web pages would appear when opened in a browser. After a sign-off on this picture (PSD) from the client the front end developer transforms these pictures into HTML, CSS and Javascript. The assets are cut, one by one, exported from the PSD and integrated into the HTML. Plugins and new tools are created in the process and some companies eve...
5 comments
Read more