As with any new technology, getting started is often the hardest part.
With this frustration in mind, we have put together some of my handiest tips, tricks and code snippets related to thejQuery Mobile library.
Because this is not a full-on primer for using the library, we will skip over some of the things that become rather obvious as you get started and instead get straight to the items that become rather frustrating or troublesome.
Also be sure to let us know in the comments which snippets you found useful and of any others that you know of that can be useful.
1. A full basic page
I find myself needing the full mark-up for a basic page over and over again. As such, here is all the code you need to set up a basic single page.
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.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.0a3/jquery.mobile-1.0a3.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. Where to add traditional jQuery calls
When I got started using this awesome extension to jQuery, I immediately found myself wanting to modify things on the page before the mobile plug-in was 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 the pattern to follow:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.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.0a3.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>
4. Stop some key items from being truncated
One feature of the library (or flaw, depending on your needs) is that it intelligently truncates long items to fit into UI elements.
I have found two situations where this can be annoying. First, in list items, where I prefer to see the full text. And secondly, in the footer text. It seems once you have more than just a few characters down there, it starts getting truncated with “…”. Use this simple CSS to override both of these defaults.
For list items:
body .ui-li .ui-li-desc { white-space: normal; }For footer content:
body .ui-footer .ui-title { white-space: normal; } 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). For example, I wanted a two-column layout for the iPad and a single column for smartphones. The absolute best way to accomplish this is with 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 tip #1.
8. Create pop-up 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> 
9. A “Cancel” + “Save” button combo
This bit of code accommodates 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. Create a column structure on your own
In my quest to optimally structure a single page for multiple devices, I found myself combining the media query tricks above with the “columns in any order” technique.
Fortunately, web developers figured out long ago how to move columns around. By combining this technique with media queries, we can very easily set up various structures depending on the screen size we’re working with.
Position Is Everything lays out one of the easiest systems to work with.
Conclusion
The jQuery mobile library is a blast to work with. It produces fantastic results with very little effort. And considering it is still in alpha, it is off to a great start. Hopefully, these quick tips will keep you moving forward as you dig into this new library.
Written exclusively for WDD by Patrick McNeil. He is a freelance writer, developer and designer. In particular, he loves to write about web design, train people on web development and build websites. Patrick’s latest book project is The Designer’s Web Handbook; learn about his other books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.
What do you think of the jQuery Mobile framework? What handy code snippets have you found useful?