Search within TutorialsPark

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 Widgets

Give 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 Events

Give 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

CSS Class Columns
arrow-l
arrow-r
arrow-u
arrow-d
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
refresh
forward
back
home
search
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 Buttons

Give 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 Buttons

Give 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 Buttons

Give 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".

Syntax: jQuery Mobile Creating Horizontal Grouped Buttons

Give it a TRY! » Note: All button are child elements of element whose data-role="controlgroup"