jQuery Mobile – page structure

A jQuery Mobile site must have an HTML5 doctype.
In the head is a meta viewport tag sets the screen width to the pixel width of the device and references to jQuery, jQuery Mobile and the mobile theme stylesheet.
In the body there is a div with a data-role of page is the wrapper, the header bar (data-role="header"), a content region (data-role="content") and a footer (data-role="footer").
These data- attributes are HTML5 attributes and used through jQuery Mobile to transform basic markup into an enhanced and styled widget.

<!DOCTYPE html>
<html>
  <head>
   <title>My Page</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Header</h1>
      </div>
      <div data-role="content">
        <p>Content</p>
      </div>
      <div data-role="footer">
        Footer
      </div>
    </div>
  </body>
</html>

Adding elements in content

1. Listview
The common listviews in jQuery Mobile are coded as lists with a data-role="listview" added.
In the example bellow a dynamic search filter for the list is added with data-filter="true".

<ul data-role="listview" data-filter="true">
  <li><a href="#">Acura</a></li>
  <li><a href="#">Audi</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Cadillac</a></li>
  <li><a href="#">Ferrari</a></li>
</ul>

 

2. Buttons
A simple clickable button is made adding data-role="button" attribute to it. You can add an icon with data-icon attribute, and set its position with data-iconpos.

<a href="#" data-role="button" data-icon="star" data-iconpos="top">Star button</a>

3. Themes
jQuery Mobile has 5 default themes, from a to e. To change the theme add data-theme="d" attribute to any of the widgets on the page.

4. Dialogs
Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link. By default, the dialog will open with a ‘pop’ transition. Like all pages, you can specify any page transition you want on the dialog by adding the data-transition attribute to the link.

<a href="foo.html" data-rel="dialog" data-transition="slideup">Open dialog</a>

5. Collapsible content blocks
To create a collapsible block of content, create a container and add the data-role="collapsible" attribute. 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.
By default, the content will be collapsed. To expand the content when the page loads, add the data-collapsed="false" attribute to the wrapper.

<div data-role="collapsible" data-collapsed="false">>
   <h3>I'm a header</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s