Look Inside

Demo

As smartphones and tablets are become popular and can be found all over the place today, the need for mobile page is rises greatly. A mobile web page provides completely different web experience than a normal web page in term of resolution size, web page load time and mobile browsers. However, we can easily create a mobile page with help of jQuery Mobile framework.

jQuery Mobile is a touch-optimized web framework for smartphones and tablets built on jQuery core. It is a lightweight library and broad support for the vast majority of all modern desktop, smartphones and tablets. In this article, I have listed 10 basic steps to getting started with jQuery Mobile. Hope you’ll find it useful!

Also be sure to let me know in the comments if I have missed out on anything.

1. Get started with jQuery Mobile basic template

It’s pretty easy to get started with jQuery Mobile. Simply declare the viewport meta tag and include jQuery, jQuery Mobile script and stylesheet into your <head> tag and you’re halfway to complete now. The next step is to add header bar ( data-role="header" ), content region ( data-role="content" ) and footer bar ( data-role="footer “) to your <body> tag. These are all optional, depending on your mobile page design. After all, you’re done with jQuery Mobile basic template!

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

The data- attributes are HTML5 attributes which are used throughout jQuery Mobile to transform the markup into mobile widget. I will cover this in step below.

2. Internal linked pages

You can create many ‘pages’ within a single HTML document by stacking multiple divs with a data-role of “page”. We call this internal linking. The reason we use internal linking is for preloading purposes, but only if you are using static content.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <!-- Page 1 --> <div data-role="page" id="page1"> <!-- Page 1 Header --> <div data-role="header"> <h1>Header 1</h1> </div> <!-- Page 1 Content --> <div data-role="content"> <h2>I am Page 1</h2> <p><a href="#page2">This link will links to Page 2</a></p> </div> <!-- Page 1 Footer --> <div data-role="footer"> <h4>Footer 1</h4> </div> </div> <!-- Page 2 --> <div data-role="page" id="page2"> <!-- Page 2 Header --> <div data-role="header"> <h1>Header 2</h1> </div> <!-- Page 2 Content --> <div data-role="content"> <h2>Hello! My name is Page 2</h2> <p>Find my friend Page 3 <a href="#page3">here</a></p> </div> <!-- Page 3 Footer --> <div data-role="footer"> <h4>Footer 2</h4> </div> </div> <!-- Page 3 --> <div data-role="page" id="page3"> <!-- Page 3 Header --> <div data-role="header"> <h1>Header 3</h1> </div> <!-- Page 3 Content --> <div data-role="content"> <h3>Howdy! Page 3 here.</h3> <p><a href="#page1">Go back to Page 1</a></p> </div> </div> </body> </html>

3. External linked pages

In some cases, not all content are static and you might need to have some dynamic content. You can achieve this with creating an external page and link to it. We’ll call this as external linking. By default, jQuery Mobile will perform an Ajax request to the source and displays the loading spinner. If the request is successful, the new page content will be added to the DOM and animated into view with page transition. Otherwise, it will display an error message. However, it’s possible to disable the Ajax request by adding rel="external" or data-ajax="false" attribute to the anchor link.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <!-- Page --> <div data-role="page"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <!-- With Ajax request, by default --> <p>The links below will loaded via AJAX request:</p> <ul> <li><a href="index2.html">External Page 1</a></li> <li><a href="index3.html">External Page 2</a></li> </ul> <!-- Disable Ajax request --> <p>The links below will do a full page reload without Ajax request:</p> <ul> <li><a href="index2.html" rel="external">External Page 3</a></li> <li><a href="index3.html" data-ajax="false">External Page 4</a></li> </ul> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> </body> </html>

4. Modal Dialog

Any page can be represented as a modal dialog by adding the data-rel=”dialog” attribute to the page anchor link. jQuery Mobile will automatic styles the modal dialog with rounded corners, margins around the page and add a dark background.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <!-- Page --> <div data-role="page"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>The links below will be presented as a modal dialog:</p> <ul> <li><a href="#page2" data-rel="dialog">Internal Page</a></li> <li><a href="index3.html" data-rel="dialog">External Page</a></li> </ul> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <!-- Page 2 --> <div data-role="page" id="page2"> <div data-role="header"> <h1>Page 2 Header</h1> </div> <div data-role="content"> <p>This page will be presented in modal dialog.</p> </div> </div> </body> </html>

5. Mobile Page Transitions

jQuery Mobile provides support for CSS-based transition effects (inspired by jQtouch) that can be applied to any page link navigation or back navigation. The jQuery Mobile framework include six transitions, which are slide, slideup, slidedown, pop, fade, and flip. To set a transition effect, simply add the data-transition attribute to the link. If you didn’t specific any data-transition attribute to the link, the framework will automatically applies slidetransition to the link.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <!-- Page --> <div data-role="page"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>The links below will be presented as a modal dialog:</p> <ul data-role="listview" data-inset="true"> <li><a href="#dialog" data-rel="dialog" data-transition="slide">slide</a></li> <li><a href="#dialog" data-rel="dialog" data-transition="slideup">slideup</a></li> <li><a href="#dialog" data-rel="dialog" data-transition="slidedown">slidedown</a></li> <li><a href="#dialog" data-rel="dialog" data-transition="pop">pop</a></li> <li><a href="#dialog" data-rel="dialog" data-transition="fade">fade</a></li> <li><a href="#dialog" data-rel="dialog" data-transition="flip">flip*</a></li> </ul> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <!-- Page 2 --> <div data-role="page" id="dialog"> <div data-role="header"> <h1>Modal Dialog Page</h1> </div> <div data-role="content"> <p>This is modal dialog.</p> </div> </div> </body> </html>

6. Mobile Navigation Bar

jQuery Mobile has a very basic navigation bar widget which support up to five tabs with optional icons. jQuery Mobile navigation bar is coded as an unordered list of links wrapped in a div element with specific the data-role=”navbar” attribute. You could place the navigation bar in header or footer container.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <!-- Page --> <div data-role="page"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <style> #email .ui-icon { background: url(icons/email.png) 50% 50% no-repeat; background-size: 24px 22px; } </style> <div data-role="header"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="home">Home</a></li> <li><a href="#" data-icon="info">About</a></li> <li><a href="#" data-icon="star">Profile</a></li> <li><a href="#" data-icon="gear">Setting</a></li> <li><a href="#" id="email" data-icon="custom">Email</a></li> </ul> </div> </div> </div> <div data-role="footer"> <h4>Footer 1</h4> </div> </div> </body> </html>

You might insert an icon to each navigation tab by adding data-icon attribute. Check out the full icons list from jQuery Mobile page.

7. Add HTML Content

Inside content region, you can add all any standard HTML elements such as headings, lists, paragraphs, form elements, etc. Since jQuery Mobile framework is also using the HTML markup to build the mobile page.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <!-- Page --> <div data-role="page"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>jQuery Mobile support standard HTML elements like <code>header</code>, <code>table</code>, anchor links, ordered and unordered lists, and etc.</p> <h1>H1 Heading</h1> <h2>H2 Heading</h2> <h3>H3 Heading</h3> <h4>H4 Heading</h4> <h5>H5 Heading</h5> <h6>H6 Heading</h6> <table border="1" style="border-collapse:collapse;width:100%;"> <caption><strong>Table format</strong></caption> <thead style="background-color:#000;color:#fff;"> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tfoot style="background-color:#ccc;"> <tr> <td colspan="2">Footer</td> </tr> </tfoot> <tbody> <tr> <td>Data 1.1</td> <td>Data 1.2</td> </tr> <tr> <td>Data 2.1</td> <td>Data 2.2</td> </tr> <tr> <td>Data 3.1</td> <td>Data 3.2</td> </tr> </tbody> </table> </div> <div data-role="footer"> <h4>Footer 1</h4> </div> </div> </body> </html>

8. jQuery Mobile Widget

Beside the standard HTML elements, you might use jQuery Mobile built-in widgets to create your content. The reason we want to use the widget is because these widgets are already styled with mobile design by default. They are easy to use and configure. To create a widget, simply add data- attribute to related HTML element. For example, add data-role=”button” attribute to an anchor link to make the link become button. Anyway, you can check out the full list of jQuery Mobile widgetfrom jQuery Mobile page.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <!-- Page --> <div data-role="page" id="h1"> <div data-role="header"> <h1>jQuery Mobile Page</h1> </div> <div data-role="content"> <!-- Widget --> <p>Mobile Button widget</p> <a href="#" data-role="button">Link button</a> <!-- Widget --> <p>Mobile Listview widget</p> <ul data-role="listview" data-inset="true"> <li><a href="#">List Item 1</a></li> <li><a href="#">List Item 2</a></li> <li><a href="#">List Item 3</a></li> <li><a href="#">List Item 4</a></li> <li><a href="#">List Item 5</a></li> </ul> <!-- Widget --> <p>Mobile Navigation Bar widget</p> <div data-role="navbar"> <ul> <li><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ul> </div> <!-- Widget --> <p>Mobile Flip Toggle Switch widget</p> <div data-role="fieldcontain"> <select data-role="slider"> <option value="no">No</option> <option value="yes">Yes</option> </select> </div> <!-- Widget --> <p>Mobile Collapsible Content widget</p> <div data-role="collapsible"> <h3>Click Me.</h3> <p>I'm the collapsible content. Click again to hide me.</p> </div> </div> <div data-role="footer"> <h4>Footer 1</h4> </div> </div> </body> </html>

9. jQuery Mobile Theme Swatches

jQuery Mobile support different theme for its widgets like page, header, list, input and button. Add the data-theme attribute to a widget to change its theme. jQuery Mobile has 5 default themes and all the widgets will use data-attribute=”a” attribute by default. You can change the theme of a widget with replace the ‘a’ swatch letter to other swatch letters between ‘a-e’.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <!-- Page --> <div data-role="page"> <div data-role="header"> <h1>jQuery Mobile Page</h1> </div> <div data-role="content"> <a href="#" data-role="button" data-theme="a" >Button Theme A</a> <a href="#" data-role="button" data-theme="b" >Button Theme B</a> <a href="#" data-role="button" data-theme="c" >Button Theme C</a> <a href="#" data-role="button" data-theme="d" >Button Theme D</a> <a href="#" data-role="button" data-theme="e" >Button Theme E</a> </div> <div data-role="footer"> <h4>Footer 1</h4> </div> </div> </body> </html>

If you found that the default theme doesn’t meet your design, you can customize your own theme. The easiest way to create custom themes is with the ThemeRoller tool. It allows you to build a theme, then download a custom CSS file, ready to be dropped into your project.

10. Mobile Form Elements

As mentioned above, you can use all basic HTML from elements in jQuery Mobile framework. By default, all of these elements will be automatic enhanced to mobile look. But you can actually customize the element to suit your need. The following code shown a simple mobile form page by using jQuery Mobile framework.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <!-- Page --> <div data-role="page"> <div data-role="header"> <h1>jQuery Mobile Page</h1> </div> <div data-role="content"> <form action="#" method="get"> <!-- simple text box --> <div data-role="fieldcontain"> <label for="text">Text Input:</label> <input type="text" name="text" id="text" value="" /> </div> <!-- textarea --> <div data-role="fieldcontain"> <label for="textarea">Textarea:</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> </div> <!-- Search box --> <div data-role="fieldcontain"> <label for="search">Search Input:</label> <input type="search" name="search" id="search" value="" /> </div> <!-- Flip toggle switch --> <div data-role="fieldcontain"> <label for="flip">Flip toggle switch:</label> <select name="flip" id="flip" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> </div> <!-- Slider --> <div data-role="fieldcontain"> <label for="slider">Slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> </div> <!-- Checkbox 1 --> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>CheckBox (vertical):</legend> <!-- Item 1 --> <input type="checkbox" name="checkbox-1a" id="checkbox-1a" /> <label for="checkbox-1a">CheckBox 1</label> <!-- Item 2 --> <input type="checkbox" name="checkbox-2a" id="checkbox-2a" /> <label for="checkbox-2a">CheckBox 2</label> <!-- Item 3 --> <input type="checkbox" name="checkbox-3a" id="checkbox-3a" /> <label for="checkbox-3a">CheckBox 3</label> <!-- Item 4 --> <input type="checkbox" name="checkbox-4a" id="checkbox-4a" /> <label for="checkbox-4a">CheckBox 4</label> </fieldset> </div> <!-- Checkbox 2 --> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>CheckBox (horizontal):</legend> <!-- Item 1 --> <input type="checkbox" name="checkbox-1b" id="checkbox-1b" /> <label for="checkbox-1b">chk1</label> <!-- Item 2 --> <input type="checkbox" name="checkbox-2b" id="checkbox-2b" /> <label for="checkbox-2b">chk2</label> <!-- Item 3 --> <input type="checkbox" name="checkbox-3b" id="checkbox-3b" /> <label for="checkbox-3b">chk3</label> </fieldset> </div> <!-- Radio 1 --> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Radio (vertical):</legend> <!-- Item 1 --> <input type="radio" name="radio-a" id="radio-1" value="radio-1" checked="checked" /> <label for="radio-1">Radio 1</label> <!-- Item 2 --> <input type="radio" name="radio-a" id="radio-2" value="radio-2" /> <label for="radio-2">Radio 2</label> <!-- Item 3 --> <input type="radio" name="radio-a" id="radio-3" value="radio-3" /> <label for="radio-3">Radio 3</label> </fieldset> </div> <!-- Radio 2 --> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Radio (horizontal):</legend> <!-- Item 1 --> <input type="radio" name="radio-b" id="radio-4" value="r1" checked="checked" /> <label for="radio-4">R1</label> <!-- Item 2 --> <input type="radio" name="radio-b" id="radio-5" value="r2" /> <label for="radio-5">R2</label> <!-- Item 3 --> <input type="radio" name="radio-b" id="radio-6" value="r3" /> <label for="radio-6">R3</label> </fieldset> </div> <!-- Dropdown Menu --> <div data-role="fieldcontain"> <label for="select">Select Menu:</label> <select name="select" id="select"> <option value="item1">Select Item 1</option> <option value="item2">Select Item 2</option> <option value="item3">Select Item 3</option> <option value="item4">Select Item 4</option> </select> </div> <!-- Button --> <fieldset class="ui-grid-a"> <div class="ui-block-a"> <input type="reset" value="Reset" /> </div> <div class="ui-block-b"> <input type="submit" value="Submit" data-theme="b" /> </div> </fieldset> </form> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> </body> </html>

Other stuff

jQuery Mobile exposes several methods and properties on the $.mobile object . If you’re an advanced programmer, you could use these methods to control your content like programmatically change from one page to another or show and hide the page loading message. In another word, you could do a lot of thing with jQuery Mobile framework. Check out all available methods and properties from jQuery Mobile methods & Utilities page.

Your Time!

Now you should know more about jQuery Mobile framework after all the steps above. So, why not try to create a mobile page for your site also? If you do so, don’t mind to share your results with us! Cheer…