Creates a collapsible block of content Collapsible content To create a collapsible block of content, create a container and add the data-role="collapsible" attribute. Using the data-content-theme attribute allows you to set a theme for the content of the collapsible. Directly inside this container, add any header (H1-H6) or legend element. The framework will style the header to look like a clickable button and add a "+" icon to the left to indi

Makes the children of an element filterable. Filterable Widget The filterable widget allows you to filter the children of an element. The filtering is accomplished by applying the class ui-screen-hidden to those children for which a filter callback function provided via the widget's filterCallback option returns true. Backwards compatibility The filterable widget features provided for backwards compatibility are deprecated as of 1.4.0 and will

Data Attributes Data attribute reference The jQuery Mobile framework uses HTML5 data- attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported. To avoid naming conflicts with other plugins or frameworks that also use data- attributes, set a custom namespace by modifying the ns global option. Button Links with data-role="button". Input-based buttons, links i

See Toolbar Widget As of jQuery Mobile 1.4.0 the functionality of the header widget has been moved to the toolbar widget.

Creates a checkboxradio widget Checkboxes Checkboxes are used to provide a list of options where more than one can be selected. Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the label for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback. The checkbox controls below use standard input/label markup, but are styl

Opens content in an interactive overlay. Note: Dialogs are deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. The dialog option provided by the page.dialog extension of the page widget allows you to style a page as a dialog, however, the special navigational handling will be removed. You may also consider implementing dialogs using popup widgets. Any page can be presented as a modal dialog by adding the data-rel="dialog" attrib

See Toolbar Widget As of jQuery Mobile 1.4.0 the functionality of the fixedtoolbar widget has been moved to the toolbar widget.

Multi-column layout grids Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example). The jQuery Mobile framework provides a simple way to build CSS-based columns through a block style class convention called ui-grid. There are four preset layouts that can be used in an

CSS classes for common styles Style Classes jQuery Mobile uses the following style classes: ui-corner-all Adds rounded corners to the element. ui-shadow Adds an item shadow around the element. ui-overlay-shadow Adds an overlay shadow around the element. The intended effect is for the element to appear to float above other elements. ui-mini Reduces the font size and scales down paddings proportionally to produce a miniature version of the elemen

Adds button styling to an element Note: .buttonMarkup() is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. You can now assign the full range of button style options to your button or a elements by simply adding classes. Transition to class-based styling When using icons, you must always specify an icon position class along with the icon class, because there is no longer a default icon position. In the example below the class