Introduction

jQuery has successfully reached the world of mobile phones. It’s called jQuery Mobile, It’s incredibly easy to use, you just have to include the jQuery Mobile files in your header and add few data attributes to your markup and you’re all set. All styling is handled by jQuery and the ncluded CSS file, so you can create a complete mobile webpage in just a matter of minutes. In this example, we’re going to create a simple page that loads internal links using transition effects. The first steps will outline the generic usage of jQuery Mobile whereas the rest will take a peek at the specific elements used in the demo.

jQuery Mobile Files in Header

This straightforward; you just have to include the framework files. You can download them from the jQuery Mobile site or load the files from their own site or CDN, which will reduce bandwidth costs and keep your website speedy.



HTML markup attribute

Apply the data attribute tags to your HTML, where n is the feature you want to set.

My Site



© Copyright Info or Site URL

The data-role elements specify which DIV/block should be used in favor of header, footer and content, all of which are in the main page wrapper. Here are the data attributes used in this example.

  • Data-role – specifies the nature of the wrapper element that can be set to page, header, content and footer.
  • Data-position – specifies whether the element should be fixed that renders at the top or bottom.
  • Data-Inset – Specifies whether the element should be inside content margins or outside.
  • Data-transition – Specifies which transition to use when new page loads. It can be set to slide, slideup, slidedown, pop, flip or fade.
  • Data-theme – specifies which design theme to use for elements.
  • Data-dividertheme – specifies the theme for the list dividers that uses same options as the data-theme.

Add content / Publish online

jQuery Mobie renders the same behaviors as the desktop browsers, You don’t really have to provide your smartphone though it could help ironing bugs.

Example Explained

The example above included is split into a header and footer file for the convenience, always feel free to use whatever coding method you prefer.

Conclusion

jQuery definitely begins to be part of our designing world today. So I won’t be surprise if the time came that even the smallest internet device reads jQuery.

See live demo
Download

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.