10 jQuery Mobile Features

Sam Deering

Today’s post is about jQuery mobile that will give focus on the different features of mobile framework and make a mobile webpage with jQuery. Have fun!

Related Posts:

1. jQuery Mobile CSS Transitions

The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.

Mobile CSS Transitions

Source + Demo

2. jQuery Mobile Date Picker Like Android

The goal is to get the look of Android date picker.

Date Picker Like Android

Source + Demo

jQuery Mobile Method & Utilities (includes: jquery mobile changepage and jquery mobile back button)

jQuery Mobile exposes several methods and properties on the $.mobile object for use in your applications.

Mobile Method & Utilities

Source + Demo

4. jQuery Mobile Dialog

This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel=”dialog” attribute.

jQuery Mobile Dialog

Source + Demo

5. jQuery Mobile Themes

Mobiles are just not for entertainment purposes anymore! You can now get the information at your fingertips anywhere you go thanks to everyday improving mobile technology.

jQuery Mobile Themes

Source + Demo

6. jQuery Mobile Pages within Pages

The jQuery Mobile “page” structure is optimized to support either single pages, or local internal linked “pages” within a page.

Mobile Pages within Pages

Source + Demo

7. jQurery Mobile RSS Reader

Learn how to build a simple Tuts+ RSS reader, using PHP and jQuery Mobile.

Mobile RSS Reader

Source Demo

8. jQuery Mobile Passing Data Between Pages

Coming from Flex one of the things I’ve struggled a bit with is passing data between views in my jQuery Mobile applications. The template approach with Mustache worked really well, but it also had a lot of overhead.

Mobile Passing Data Between Pages

Source + Demo

9. jQuery Mobile Ajax Navigation

jQuery Mobile is designed to work with simple page linking conventions. Essentially, you can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible.

Mobile Ajax Navigation

Source + Demo

10. jQuery Mobile SimpleDialog

SimpleDialog aims to be a replacement for javascript dialog(), written for jQM.

Mobile SimpleDialog

Source + Demo