Buttons - an integral part of a form is styled really well and consistently using the Jquery Mobile framework. We will discuss and take a look at the different buttons, their styling and usage in today's post. Buttons are coded with standard HTML anchor and input elements, then enhanced by Jquery Mobile to make them more attractive and touch friendly for mobile usage. Let's discuss this and more in the example that follows.
You must have already observed that the styling for the first 5 buttons is the same, even though the HTML markup for each is different. The first one is created using an anchor tag. The next one using a button element and further using input elements of type button, submit and reset. To create a button out of the anchor element, you need to include a data attribute data-role="button" with the anchor element. The framework now styles the anchor element as a button. Now the question arises as to when to use a anchor based button and when to use the input element based button. The answer is pretty simple here - if you are using a button for navigation purpose, use an anchor link based button and if you want one for form submission use the input elements. Adding data-mini="true" will render a smaller sized button as seen in the example by the black colored button.
In several scenarios we require the buttons to be inline or basically on the same line and not stretched to the full width of the device. This can be achieved very easily with the help of Jquery Mobile framework. Just add data-inline="true" attribute to the buttons that you want to be displayed inline and you will have the buttons on the same line.
The Jquery Mobile framework includes a selected set of icons most often needed for mobile applications. An icon can be added to a button by adding data-icon attribute on the anchor specifying the icon to display. You can view a full list of icons that can be used here. You can also position the icon by adding data-iconpos attribute to the anchor element. By adding data-iconpos="notext" you can even create an icon-only button as seen in the example above.
To create a group of images clubbed vertically or horizontally is also possible by wrapping the buttons with in a div with data-role="controlgroup". This will group the buttons vertically. In case you want to group the buttons horizontally, you just need to add data-type="horizontal" attribute to the div along with data-role="controlgroup". Just add the "disabled" HTML keyword to disable a button. A disabled button would be styled with grey color for the background and will not be clickable.
This ends our discussion on button styles using Jquery Mobile. Drop a line to let me know if you have any queries or suggestions on this post. Check out a comprehensive list of examples that is now available here. Till next time keep enjoying JQM coding.
You must have already observed that the styling for the first 5 buttons is the same, even though the HTML markup for each is different. The first one is created using an anchor tag. The next one using a button element and further using input elements of type button, submit and reset. To create a button out of the anchor element, you need to include a data attribute data-role="button" with the anchor element. The framework now styles the anchor element as a button. Now the question arises as to when to use a anchor based button and when to use the input element based button. The answer is pretty simple here - if you are using a button for navigation purpose, use an anchor link based button and if you want one for form submission use the input elements. Adding data-mini="true" will render a smaller sized button as seen in the example by the black colored button.
In several scenarios we require the buttons to be inline or basically on the same line and not stretched to the full width of the device. This can be achieved very easily with the help of Jquery Mobile framework. Just add data-inline="true" attribute to the buttons that you want to be displayed inline and you will have the buttons on the same line.
The Jquery Mobile framework includes a selected set of icons most often needed for mobile applications. An icon can be added to a button by adding data-icon attribute on the anchor specifying the icon to display. You can view a full list of icons that can be used here. You can also position the icon by adding data-iconpos attribute to the anchor element. By adding data-iconpos="notext" you can even create an icon-only button as seen in the example above.
To create a group of images clubbed vertically or horizontally is also possible by wrapping the buttons with in a div with data-role="controlgroup". This will group the buttons vertically. In case you want to group the buttons horizontally, you just need to add data-type="horizontal" attribute to the div along with data-role="controlgroup". Just add the "disabled" HTML keyword to disable a button. A disabled button would be styled with grey color for the background and will not be clickable.
This ends our discussion on button styles using Jquery Mobile. Drop a line to let me know if you have any queries or suggestions on this post. Check out a comprehensive list of examples that is now available here. Till next time keep enjoying JQM coding.
Comments
Post a Comment
Please leave your comments here...