jQuery Mobile

jQuery Mobile

jQuery Mobile (Local). This version creates a folder called jquery-mobile in your site root, copies all the necessary files and images to it, and links to the local versions of the files.

A standard jQuery mobile page looks like this:
  • < div data-role="page" id="page">
  • < div data-role="header">
  • < h1>Page one< /h1>
  • < /div>
  • < div data-role="content">
  • < /div>
  • < div data-role="footer">
  • < h4>Page Footer< /h4>
  • < /div>
  • < /div>
list view widget

List View Widget Code

  • < ul data-role="listview">
  • < li>< a href="#">Page two< /a>
  • < li>< a href="#">Page three< /a>
  • < li>< a href="#">Page four< /a>
  • < /ul>

Can add a list divider by using data-role="list-divider" within < li> tags at the beginning of the list.

Adding icons to a List View Widget

The icon needs to be added between the opening li tag and the opening a tag.

Creating and Linking to External Pages

Create an external page the same way you create the main pages.

When linking to an external page with multiple page blocks, link to the page using pagename.html#id

On the link that is going to the external page add rel="external".

Adding back and home buttons to the page header

Click before the opening < h1> tag and create a link going to the page before.
Add a data-rel="back" to the link.
For the home button create a link going back to the index page.

To remove a back button from a header add the code data-backbtn="false" to the div with a data-role of header.

By using data-icon in the back or home button link, add a icon to show what the button is doing.
The data-icon will automatically be placed to the left of the image, to place it on the right use data-iconpos.

On top of the basic layout for jQuery Mobile, Custom data attributes can be added,
Collapsible block, similar to an accordion, is created using a data-role=”collapsible”. Setting data-collapsed=”true” will show the accordion initially closed.
Navigation bar is created by using a data-role=”navbar”. Navbar allows for a grid to be used, using data-grid and a-d allows the grid to be 2-5 items long. The navigation can be as long as needed but a-d will break it down into the length specified.

To make the header and footer stay visible add ad data-position=”fixed” to the header and footer.

To create a dialog box create a page and save it as dialog.html. Use the data-rel=”dialog”, data-role=”button”, and page-transition=”pop”

Different page-transitions can be used, fade, flip, pop, slide, slidedown, and slideup. These can also be reversed by using data-direction=”reverse.”

A layout grid widget is similar to a table. It can only be a max of 5 columns but can have many rows. Each group of columns has a letter assigned to it and each column has a letter assigned to it. The grid letters are a-d, two-five-column grid. The columns are a-e, 1-5 columns.

There is an accordion widget called a collapsible block widget. This inserts three collapsible blocks wrapped in an outer < div> with the data-role of collapsible-set. Only one block can be opened at a time. After inserting the widget, replace the placeholder text with your own content. In order to increase the number of blocks within the accordion, just copy and past one of the inner < div> elements to create as many blocks as you need.