jQuery Mobile : Creating Buttons
Learn how to use jQuery Mobile to create button widgets
jQuery Mobile: Create Buttons Automatically
jQuery Mobile automatically creates button widgets from button elements found on the document or any other input element with type attribute as submit , reset , button or image
These buttons are created automatically using page-enhancement process, jQuery Mobile performs all the background work.
Example: jQuery Mobile - Button WidgetsGive it a TRY! » Note: No special action has to be performed to create these buttons.
jQuery Mobile: Button Events
Buttons have a default action when clicked, the default action will be performed when the button is clicked.
In case of Input Elements, the default action is to submit the form.For other elements, the default action is to navigate to the specified page using href attribute.
Syntax: jQuery Mobile Handling Button EventsGive it a TRY! » Note: The default action is reconfigured using changePage method to navigate to page 2.
jQuery Mobile: Buttons with Icons
Table: jQuery Mobile - jQuery Mobile Layout Grid
|Arrows facing left, right, up and down respectively|
|check, delete||To create button with check and cross icons.|
|plus, minus||To create buttons with icons of plus and minus sign|
|gear||To create a cog|
|To create buttons with icons to refresh, move forward, previous, return home page and search.|
|gear||To create grid of small squares.|
|star||To create a star.|
|alert||To create a alert or caution warning.|
|info||An create an info icon, a stylized letter i.|
jQuery Mobile provides a set of Icons which can be used within Icons, these icons are available within the image directory
These Icons are applied to the button using the attribute data-icon, the type of icon is specified using the Icon name as value.
Syntax: jQuery Mobile Adding Icons to ButtonsGive it a TRY! » Note: The Default position of the Icons is left , but you can specify top, right and bottom using data-iconpos attribute
jQuery Mobile: Creating Inline Buttons
A default jQuery Mobile Button spans the entire width of the screen, but smaller buttons can be created using inline buttons
The size of inline buttons is just enough to accomodate the text content within it.An Inline button is created by setting data-inline="true"
Syntax: jQuery Mobile Create Inline ButtonsGive it a TRY! » Note: The first button is inline while the second button is a normal one.
jQuery Mobile: Creating Group Buttons
jQuery Mobile can be used to create a group of buttons having no spacing in between them by defining what is called a control group
You can create a control group by using data-role attribute with the value as controlgroup on the parent element containing two or more button elements.
Syntax: jQuery Mobile Creating Grouped ButtonsGive it a TRY! » Note: All button are child elements of element whose data-role="controlgroup"
jQuery Mobile: Creating Horizontal Group Buttons
jQuery Mobile also allows users the flexibility of controlling the orientation of the Group Buttons, by seeting the value of attribute data-type="horizontal".