Author: Jesse Gumm (@jessegumm)

# Nitrogen's jQuery Mobile Integration Guide

Getting Started | *API* | Elements | Actions | Validators | Handlers | Configuration Options | About

## Table of Contents

- 1 jQuery Mobile Integration

## 1 jQuery Mobile Integration

Integrating jQuery Mobile into Nitrogen is a relatively painless process, but it does require making a few changes, particularly to the template. For convenience, we provide a default template for mobile, coincidentally called "mobile.html".

### Include the necessary javascript.

There are two new javascript files that must be included in order properly integrate with jQuery Mobile: jQuery mobile itself (jquery-mobile.js) and the Nitrogen jQuery Mobile script (nitrogenjqm.js), which makes necessary structural changes to the Nitrogen object.

The <script> elements in the head should look something like this. Please note that the order of these includes does matter.

    <script type='text/javascript' src='/nitrogen/jquery.js'></script>
    <script type='text/javascript' src='/nitrogen/jquery-mobile.js'></script>
    <script type='text/javascript' src='/nitrogen/nitrogren.js'></script>
    <script type='text/javascript' src='/nitrogen/nitrogen_jqm.js'></script>

### Modify the HTML structure to what jQuery mobile expects

jQuery mobile does some unique things as far as loading scripts, and providing inter-page transitions. However, in order to take advantage of these functionalities, certain strutural changes must happen with your template.

#### Separate the page into a handful of specific divs.

You want to separate the page into three specific divs with a wrapper div.

The wrapper div must have the attributes 'data-role="page"' and 'id="pagediv"'

Contained within the Wrapper div are expected three other divs with the data-roles "header", "content" and "footer".

This is demonstrated below:

    <body>
       <div data-role="page" id="pagediv">
          <div data-role="header">
             <h1>[[[page:title()]]]</h1>
          </div>
          <div data-role="content">
             [[[page:body()]]]
          </div>
          <div data-role="footer">
             <h4>[[[page:footer()]]]</h4>
          </div>
       </div>
    </body>

#### The script] tag loading properly.

The last step in order to ensure the proper loading of javascript from page to page while using transitions, is to include the script] section of the template inside a data-code attribute in the wrapper div.

This is demonstrated below:

    <body>
       <div data-role="page" id="pagediv" data-code="[[[script]]]">
          <div data-role="header">
             <h1>[[[page:title()]]]</h1>
          </div>
          <div data-role="content">
             [[[page:body()]]]
          </div>
          <div data-role="footer">
             <h4>[[[page:footer()]]]</h4>
          </div>
       </div>
    </body>

### The Complete Template

To see the completed jQuery mobile template, check out ./site/templates/mobile.html in your Nitrogen instllation, or see it on github.

### See Also

- base element
- jQuery Mobile Elements
- jQuery Mobile Homepage

Date: 2012-10-18 03:24:04 CDT

Author: Jesse Gumm (@jessegumm)

Org version 7.8.02 with Emacs version 23

Validate XHTML 1.0

## Comments

Note:To specify code blocks, just use the generic code block syntax:

    <pre><code>your code here</code></pre>

comments powered by Disqus