We have collected 50 jQuery mobile tips and tutorials, 10 mobile plugins, 10 mobile website demos, 10 free mobile themes, 10 new mobile frameworks, 10 mobile cheat sheets and more stuff to help you get that mobile website started and up and running in no time!

Whats is jQuery Mobile?
jQuery Mobile is a framework for web applications, mobile and mobile web sites in order to provide a unified user interface across multiple platforms like the iPhone mobile device, BlackBerry, Android and Windows Mobile. Stay up to date on the latest jQuery Mobile Developments!

1. Backbone Mobile Example

A backbone mobile app running in Safari. A great place to start your mobile development experience is to take a look at the way this is put together. Start by viewing the app in your browser.

Source

2. Use media queries to target devices

You might ask how to target devices in the CSS (based on screen size). Say you want a two-column layout for the iPad and a single column for smartphones. The 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.

Source

3. Quick Tip: How to Work with @Font-face

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.

Source

4. Where to add traditional jQuery calls

If you want to modify things on the page before the mobile plug-in was triggered, 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.

Source

5. A full basic page

If you find yourself 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.

Source

6. Create a column structure on your own

If you wish to optimally structure a single page for multiple devices, you could find yourself combining the media query tricks above with the “columns in any order” technique. Luckily, web developers figured out long ago how to move columns around and by combining this technique with media queries.

Source

7. Using Google Analytics with jQuery Mobile

Learn how to use Google Analytics with jQuery mobile.

Source

8. Submit a jQuery Mobile form via AJAX with PHP

Learn how to submit a jQuery Mobile form via AJAX with PHP.

Source

9. How to create a mobile WordPress theme with jQuery Mobile

This tool allows you to easily create mobile websites and web apps. In this tutorial, I’ll show you how to create a mobile-optimized WordPress theme.

Source

10. Creating a Website Using jQuery Mobile, Part 1

In this tutorial I will show you how to build a website with JQuery Mobile. In this first part of the tutorial I will explain the site’s characteristics, and I will implement the home page of the site.

Source

11. Creating a Website Using JQuery Mobile, Part 2

Now it is time to build the Speakers page as a continuation of my series on how to create a Website Using jQuery Mobile.

Source

12. Disable a button action

Here’s how to disable a button action (for eg: from opening a page), add the following JavaScript.

Source

13. Create pop-up dialogs

One handy feature of the library is its built-in pop-up or dialog box feature. To setup this feature is pretty simple. Note: 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.

Source

14. Introduction to jQuery Mobile

Learn how to use the jQuery Mobile framework. This is a basic introduction on how to setup pages, links, navigation and buttons.

Source

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.

Source

16. jQuery Mobile: What Can It Do for You?

Find out how the new jQuery Mobile framework can help you build great-looking, cross-device web apps with ease. Lots of code examples and demos included. How to create a Simple jQuery Mobile App

Source

17. Disable loading pop-up message

I find the loading pop-up message 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. If you find the loading pop-up message a bit annoying already because it gets triggered every time you load a different page. There’s a way to disable it, just add the following line of code into your JS file.

Source

18. How to Build an RSS Reader with jQuery Mobile

Today, we’ll dive in, and build a simple Tuts+ RSS reader, using PHP and jQuery Mobile. When we’re finished, you’ll have the ability to add this simple project to your iPhone or Android phone with the click of a button, as well as the skills to build your web apps!

Source

19. 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.

Source

20. 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.

Source

21. 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.

Source

22. 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. There are two situations where this can be annoying. First, in list items, where I prefer to see the full text and the second one is in the footer text.

Source

23. Two iPhone development tips, and jQuery to the rescue

The first and simplest tip is working with the view port. (You may need to register at Apple in order to view that link. Two points off to Apple to requiring a login for simple docs!) The view port is a simple meta tag. Here is an example:

Source

24. 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.

Source

25. jQuery Mobile Form Validation

Learn jQuery mobile form validation in this tutorial.

Source

26. Using JQuery Mobile with the HTML5 canvas element to listen for touch events on the iPad and Android browsers

JQuery Mobile supports numerous touch events and makes life a lot easier. In fact, JQuery Mobile ensures your web app will work on both mobile and desktop/laptop browsers as well. Sadly you just can’t expect a JavaScript onclick event to work on a mobile device as it does on the desktop/laptop browser.

Source

27. jQuery Mobile Touch Events: Tap

Learn how to detect the “tap” touch event on a smart phone device.

Source

28. Using JQuery Mobile with appMobi

This instructional video shows you how to use the new mobile version of the popular JQuery JavaScript library with appMobi. JQuery Mobile allows you to easily create apps that have all the look and feel of native apps, with built-in buttons, transitions, forms, and more.

Source

29. 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.

Source

30. 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.

Source

31. 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:

Source

32. jQuery Mobile Toolbars Navigation Menu’s

Learn how to use the jQuery Mobile toolbars, navigation bars, creating fixed position menus and more!

Source

33. Search List in jQuery Mobile

We can easily create a list that includes a search element through which the user can start entering a text and get all elements that fits this text filtered out from the list.

Source

34. jQuery Mobile: Official jQuery Mobile Development Framework

This mobile development framework is packed with slick features, and allows [mobile] developers to rock some serious jQuery on or in their iOS, Android, BlackBerry, Bada, Windows Mobile, Palm OS, Symbian, and MeeGo applications and web apps. You should see this bad boy in mobile Safari.

Source

35. 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”.

Source

36. jQuery Mobile Multiple Pages Internal Linking

This is a short video clip that explains how internal links work in jQuery Mobile.

Source

37. Dialog Transitions in jQuery Mobile

Learn how to set a transition when showing a dialog in jQuery Mobile.

Source

38. Adding driving directions to a jQuery Mobile web site

Learn how to add driving directions to to a jQuery mobile website.

Source

39. jQuery Mobile Framework – A Forms Tutorial

In this tutorial, we will focus on some basic elements of jQuery Mobile: page structure, forms and Ajax form submission. The tutorial is based on version 1.0 alpha release 2 of the jQuery Mobile framework.

Source

40. Simple List View in jQuery Mobile

This video clip shows how to create a simple list view in jQuery Mobile.

Source

41. Split List in jQuery Mobile

We can add to each one of the list items a secondary link. It will be displayed together with an icon in the right part of the item.

Source

42. Form Controls in jQuery Mobile

This is a short video clip that shows the available controls when using the jQuery Mobile library.

Source

43. Header and Footer Fixed Positioning in jQuery Mobile

This is a short video clip that shows the meaning of setting the fixed positioning both for the header and for the footer (in jQuery Mobile).

Source

44. jQuery Mobile Inline Buttons

We can get a button that its width isn’t the entire width of the screen by adding the data-inline=”true” attribute to it. This video clip shows how to do it.

Source

45. Hello World in jQuery Mobile

This is a short video clip that explains how to develop a simple web page that utilizes the jQuery Mobile library.

Source

46. Building an offline capable mobile web site with jQuery Mobile

Learn how to build an office capable mobile web site with jQuery mobile.

Source

47. jQuery Mobile and JSON

This tutorial introduces the jQuery Mobile (JQM) framework for writing mobile web applications targeted at the mobile industry’s leading browsers. JQM is used to provide intuitive and consistent user experience for web-based applications running on mobile devices such as iPhone, iPad, Android, WebOS, BlackBerry Version 6 (Torch, Playbook), and others. The tutorial begins with a high-level look at the JQM project and the relation of JQM to, and dependence on, HTML5. After a brief look at one of the many ways in which you can construct a JQM application and some of the ways in which JQM enhances fundamental web UI elements, the tutorial takes a look at a basic sales force automation requirement.

Source

48. Creating and using custom icons in jQuery Mobile

This post will show you how to create and implement custom icons. In addition I’ll show you how to add high res icon support for iPhone 4′s Retina display and newer high resolution devices.

Source

49. Getting started with jQuery Mobile & Rails 3

This application will allow you to create, read, update and delete blog posts from mobile devices.

Source

50. Use jQuery Mobile to Build a Native Android News Reader App

Learn how to build a Native Android News Reader App using jQuery Mobile.

Source

Still not had enough of mobile tips! 5 More jQuery Mobile Tricks