1. Set up a basic full page
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>Content goes here</p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> </body> </html>
2. Add traditional jQuery calls
Sometimes when you’re using this awesome extension to jQuery, you might want to modify things on the page before the mobile plug-in is triggered. As it turns out, the recommended solution is to simply put traditional jQuery calls before the reference that loads the mobile plug-in. This way, your jQuery commands have a chance to run prior to the library being loaded.
Here is a pattern to follow:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(document).ready(function() {
// Your jQuery commands go here before the mobile reference
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0b1.min.js"></script>
3. Disable AJAX navigation for all links at once
As awesome as AJAX navigation is, there are times where you’d just rather disable it. Use this bit of jQuery to tell the mobile library not to use AJAX navigation. Place it after the reference to the jQuery mobile library in the header of the page. In other words, the library must already be loaded before this code is referenced.
<script>
$(document).ready(function() {
// disable ajax nav
$.mobile.ajaxLinksEnabled = false;
});
</script> <script type="text/javascript" src=
"http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script>
$(document).ready(function() {
// disable ajax nav
$.mobile.ajaxLinksEnabled = false;
});
</script>
</head>
3.1 Open a link without using AJAX with page transitions
To open a link without using AJAX with page transitions (ie: reloading the full page the old-school way), set rel attribute to “external”.
<a href="../index.html" data-icon="grid" class="ui-btn-right" rel="external">Home</a>
4. Disable truncation for list items and buttons
If your list item or button has a long text, it will be truncated automatically by jQuery Mobile. To disable this truncation, add “white-space: normal;” to the CSS selector in question.
For example, to disable truncation for buttons:
.ui-btn-text { white-space: normal; }
To disable truncation for list descriptions:
.ui-li-desc { white-space: normal; }
To enable truncation, set it to “white-space: nowrap;".
4.1 Remove an arrow from a list item
By default, jQuery Mobile framework adds an arrow next to every list item. To disable this, set data-icon attribute to “false” on the list item that you’d like the arrow to be removed.
<li data-icon="false"><a href="contact.html">Contact Us</a></li>
5. Use media queries to target devices
One of the first questions I had with this library was how to target devices in the CSS (based on screen size). Say I want a two-column layout for the iPad and a single column for smartphones. The best way to accomplish this is by media queries.
With some simple media queries in place, you can quickly make the CSS target screen sizes. And with this type of targeting, we can quickly set up different layouts based on the available screen space by relying on conventional CSS techniques.
Two fantastic resources for this are:
- “CSS Media Queries and Using Available Space,” CSS-Tricks;
- Hardboiled CSS3 Media Queries,” Stuff and Nonsense.
6. Target platforms with jQuery
Much as we might want to execute certain CSS for certain devices, we might also want to run jQuery only on specific devices. Here is an adaptation of some code from Snipplr that allows me to easily segment portions of jQuery to run depending on the user’s device.
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
if(agentID.indexOf("iphone")>=0){
alert("iphone");
}
if(agentID.indexOf("ipod")>=0){
alert("ipod");
}
if(agentID.indexOf("ipad")>=0){
alert("ipad");
}
if(agentID.indexOf("android")>=0){
alert("android");
}
7. Use full paths for the targets of form action attributes
One quirk of the library seems to be its difficulty in finding target pages to post forms to… that is, unless you use the full path from the root of the website.
For example, I’ve found that this form tag never finds its target:
<form action=" form-handler.php " method="get" >Whereas a full path like this works as expected:
<form action="/current-directory/form-handler.php" method="get" >Also, be sure that the results from the form handler produce a full, valid jQuery mobile page, as shown in #1.
8. Create popup dialogs
One handy feature of the library is its built-in pop-up or dialog box feature. Setting up this handy feature is dead simple. Basically, add an attribute to link to, as follows: data-rel="dialog".
Note two things. First, the target page must be a full-blown jQuery mobile page, as outlined in tip #1. Secondly, this will only work for external pages; it must be a full separate page to work properly.
<a href="#pop.html" data-rel="dialog">Pop up!</a> Sometimes, loading pop-up message gets a bit annoying because it gets triggered every time you load a different page. To disable this, add the following line of code into your JS file.
$.mobile.pageLoading(true);
By default, it is enabled like so:
$.mobile.pageLoading();
9. A “Cancel” + “Save” button combo
This bit of code meets two basic needs. The first is to have two buttons next to each other. Fortunately, the library has a built-in column structure that can easily be put to work using a fieldset tag and the proper classes, as seen below. The second is to have two buttons with different themes. This code is directly from the documentation, and I keep it handy for frequent use.
<fieldset> <div><button type="submit" data-theme="c">Cancel</button></div> <div><button type="submit" data-theme="b">Submit</button></div> </fieldset>
10. Disable a button action
To disable a button action (for eg: from opening a page), add the following Javascript.
$('#home-button').button("disable");
And to re-enable it:
$('#home-button').button("enable");
11. Create an image-only button with no text
Sometimes, you may not want to have any text for your button but still use the rest of the features that comes with a button element. This is usually the case with a home button or an info button. To hide any text associated with the button, set data-iconpos attribute to “notext”. For example:
<a href="../index.html" data-icon="grid" data-iconpos="notext">Home</a>
12. Display a random background image on page load
jQuery Mobile has a number of page initialization events that you can use to trigger certain methods on page load. The following CSS + Javascript can be used to display a random background image every time a page is loaded.
CSS
.my-page { background: transparent url(../images/bg.jpg) 0 0 no-repeat; }
.my-page.bg1 { background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; }
.my-page.bg2 { background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; }
.my-page.bg3 { background: transparent url(../images/bg-3.jpg) 0 0 no-repeat; }
JavaScript
$('.my-page').live("pagecreate", function() {
var randombg = Math.floor(Math.random()*4); // 0 to 3
$('.my-page').removeClass().addClass('bg' + randombg);
});
13. Create a custom theme
jQuery Mobile framework comes with 5 themes – Theme A, Theme B, Theme C, Theme D and Theme E. But you can easily create a new theme for your web app.
The steps to create a new theme:
1. Copy CSS for any theme from jQuery Mobile CSS file and paste it into your own CSS file.
2. Give your theme a name and rename the CSS selectors appropriately. Your theme name can be any alphabet character (a to z). So for example, if you copied Theme C, and you want to call your theme Theme Z, rename.ui-btn-up-c to .ui-btn-up-z, .ui-body-c to .ui-body-z and so on.
3. Change colors and styles of your custom theme
4. To apply your custom theme z to any element, just set the data-theme attribute to z. For instance,
<div data-role="page" data-theme="z">
13.1 Create a column structure of your own
By combining the “columns in any order” technique with media queries, we can very easily set up various structures depending on the screen size we’re working with. Position Is Everything explains one of the easiest systems to work with.
14. Use a custom font
There are a few font-replacement methods available such as cufon, sIFR, FLIR, @font-face and Google Fonts API. When building a web app using jQuery Mobile, I found that @font-face method is the easiest method to work with and the performance is quite satisfactory. Here is a nice tutorial with a demo on how to work with @font-face method.
15. Set background color of a page
This may sound simple but it took me a few minutes to figure out how to apply a background color to a page without having it overwritten by jQuery Mobile CSS. Normally, you’d set a background color to body element but if you are using jQuery Mobile framework, you need to set it to ui-page class.
.ui-page { background: #eee; }
The jQuery Mobile library is a blast to work with. It produces fantastic results with very little effort. We can see improvements in JQM with every release.
Recommended Books
