jQuery Mobile: Up and Running

Configuration

jQuery Mobile attaches a new mobile object to the jQuery main object, $, also available as jQuery. Therefore, most of the work with the API will be done using $.mobile or jQuery.mobile. We will find global attributes and useful methods to use and call while creating our jQuery Mobile experience. This object will only be available after a mobileinit event is fired.

The framework uses the widget architecture of the jQuery UI framework for desktop. A widget is a control that is managed by the framework. In jQuery Mobile 1.0, the widgets available are usually mapped from a data-role attribute, but we have the form controls without a role, too. Therefore, page, button, and listview are widgets inside the framework.

Every widget has an object constructor and default configuration that we can change inside the mobileinit that affects every widget instance on the page.

The following is the list of widgets available in jQuery Mobile 1.0:

• page

• dialog

• collapsible

• fieldcontain

• navbar

• listview

• checkboxradio

• button

• slider

• textinput

• selectmenu

• controlgroup

Some jQuery Mobile rich controls are grouped in one widget; for example, all the text input types—even textarea—use the same widget: textinput. Checkboxes and radio buttons are also grouped in the checkboxradio widget.

Every widget has its own object constructor that represents how every object on the page will work. We can access this prototype using $.mobile.<widget_name>.prototype. Usually, every widget constructor has an option object where ...