Buttons that are used for navigation should be coded as anchor links, and those that submit forms as button elements — each will be styled identically by the framework.
Styling links as buttons
In the main content block of a page, you can style any anchor link as a button by adding the data-role="button" to the link. The framework will add all necessary classes to style the link as a button. For example, this markup:
For ease of styling, the framework automatically converts any button element or input with a type of submit, reset, button, or image into a custom styled link-based button — there is no need to add the data-role="button" attribute.
The original form-based button is hidden, but remains in the markup. When a click event fires on a link button, it triggers a click on the original form button.
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 two preset configurations layouts — two-column (using the class of ui-grid-a), and three-column (using the class of ui-grid-b) — that can be used in any situation that requires columns. Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them.
Two column grids
To build a two-column (50/50%) layout, start with a container with a class of ui-grid-a, and add two child containers inside it classed with ui-block-a for the first column and ui-block-b for the second:
<div class="ui-grid-a">
<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->
The above markup produces the following content layout:
I'm Block A and text inside will wrap.
I'm Block B and text inside will wrap.
As you see above, by default grid blocks have no visual styling; they simply present content side-by-side.
Grid classes can be applied to any container. In this next example, we add ui-grid-a to a fieldset, and apply the ui-block classes to the two buttons inside to stretch them each to 50% of the screen width:
Theme classes (not data-theme attributes) from the theming system can be added to an element, including grids. On the blocks below, we're adding two classes: ui-bar to add the default bar padding and ui-bar-e to apply the background gradient and font styling for the "e" toolbar theme swatch. For illustration purposes, an inline style="height:120px" attribute is also added to each grid to set each to a standard height.
Block A
Block B
Three-column grids
The other grid layout configuration uses class=ui-grid-b on the parent, and 3 child container elements, each with its respective ui-block-a/b/c class, to create a three-column layout (33/33/33%). Note: These blocks are also styled with theme classes so the grid layout is clearly visible.
This will produce a 33/33/33% grid for our content.
Block A
Block B
Block C
And an example of a 3 column grid with buttons inside:
Four-column grids
A four-column, 25/25/25/25% grid is created by specifying class=ui-grid-c on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.
A
B
C
D
Five-column grids
A five-column, 20/20/20/20/20% grid is created by specifying class=ui-grid-d on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.
A
B
C
D
E
Multiple row grids
Grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each. There is a CSS rule to clear the floats and start a new line when the class=ui-block-a is seen so make sure to assign block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type:
To create a collapsible blocks of content, create a container and add the data-role="collapsible" attribute.
Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.
After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div>
I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.
As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the data-collapsed="true" attribute to the wrapper.
Collapsible content is minimally styled — we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.
Collapsible example
This page has 4 collapsible containers with different types of content inside.
I'm open when the page loads because I don't have the data-collapsed="true" attribute on my container. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.
I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.
Collapsible sets
By giving a parent element a data-role of collapsible-set, you can cause other collapsibles within that parent to close whenever a new one is opened, acting like an accordion widget:
