10 handy jQuery mobile tips and snippets to get you started

Wdd Logo.
May 10, 2011


\"\"As with any new technology, getting started is often the hardest part.<\/p>\r\n\r\n

With this frustration in mind, we have put together some of my handiest tips, tricks and code snippets related to the jQuery Mobile library<\/a>.<\/p>\r\n\r\n

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.<\/p>\r\n\r\n

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.<\/p>\r\n\r\n

1. A full basic page<\/h1>\r\n\r\n

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.<\/p>\r\n\r\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>Page Title<\/title>\r\n<link rel=\"stylesheet\" href=\"http:\/\/code.jquery.com\/mobile\/1.0a3\/jquery.mobile-1.0a3.min.css\" \/>\r\n<script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-1.5.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/mobile\/1.0a3\/jquery.mobile-1.0a3.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<div data-role=\"page\" id=\"home\">\r\n <div data-role=\"header\">\r\n <h1>Header<\/h1>\r\n <\/div>\r\n <div data-role=\"content\">\r\n <p>Content goes here<\/p>\r\n <\/div>\r\n <div data-role=\"footer\">\r\n <h4>Footer<\/h4>\r\n <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/code><\/pre>\r\n\r\n



2. Where to add traditional jQuery calls<\/h1>\r\n\r\n

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.<\/p>\r\n\r\n

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:<\/p>\r\n\r\n

<link rel=\"stylesheet\" href=\"http:\/\/code.jquery.com\/mobile\/1.0a3\/jquery.mobile-1.0a3.min.css\" \/>\r\n<script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-1.5.min.js\"><\/script>\r\n<script>\r\n $(document).ready(function() {\r\n \/\/ Your jQuery commands go here before the mobile reference\r\n });\r\n<\/script>\r\n<script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/mobile\/1.0a3\/jquery.mobile-1.0a3.min.js\"><\/script><\/code><\/pre>\r\n\r\n



3. Disable AJAX navigation for all links at once<\/h1>\r\n\r\n

As awesome as AJAX navigation is, there are times where you\u2019d just rather disable it. Use this bit of jQuery to tell the mobile library not to use AJAX navigation.<\/p>\r\n\r\n

Place it after<\/em> 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.<\/p>\r\n\r\n

<script>\r\n $(document).ready(function() {\r\n \/\/ disable ajax nav\r\n $.mobile.ajaxLinksEnabled = false;\r\n });\r\n<\/script><\/code><\/pre>\r\n\r\n



4. Stop some key items from being truncated<\/h1>\r\n\r\n

One feature of the library (or flaw, depending on your needs) is that it intelligently truncates long items to fit into UI elements.<\/p>\r\n\r\n

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 \u201c\u2026\u201d. Use this simple CSS to override both of these defaults.<\/p>\r\n\r\n

For list items:<\/p>\r\n\r\n

body .ui-li .ui-li-desc {\r\n white-space: normal;\r\n }<\/code><\/pre>\r\n\r\n

For footer content:<\/p>\r\n\r\n

body .ui-footer .ui-title {\r\n white-space: normal;\r\n }\r\n\r\n<\/code><\/pre>\r\n

5. Use media queries to target devices<\/h1>\r\n\r\n

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.<\/p>\r\n\r\n

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.<\/p>\r\n\r\n

Two fantastic resources for this are:<\/p>\r\n\r\n


WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there’s something you think we should be talking about let us know @DesignerDepot.

Read Next

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…

AI Changes Everything and Nothing

The marketing frenzy surrounding the recent flood of AI-powered apps and services has caused some observers to question…

15 Best New Fonts, March 2023

Fonts are one of the most critical tools in any designer’s toolbox. With clever use, you can transform a design from hu…

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…

AI’s Impact on the Web Is Growing

Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this. When your…