10 jQuery Mobile Slider plugins

Collection of 10 Awesome jQuery mobile/ responsive slider plugins.

We all know that mobile site or a responsive site has become a must have thing and how important images and content sliders are for a responsive website. So find a complied list of 10 awesome, free and ready to use jQuery plugins for creating mobile slider. These plugins allows to have any type of content like images, text, iframes, html5 video and audio, YouTube and Vimeo videos. Enjoy..

You may also like:

• 10 Awesome Mobile Menu plugins and tutorials
• Awesome jQuery Mobile Plugins
• 10+ Best and Free jQuery Mobile Themes
• 5 jQuery Image Viewer Plugin for Mobile

Glide.js

Glide.js is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with fallback to older broswers. It's simple, lightweight and fast. Designed to slide, no less, no more.

RTP.Slider.js

RTP.Slider.js is a versatile and flexible slider. Strong support for fluid / responsive Designs, mobile browsers and touch devices. It has nearly every feature that you can find in other sliders on the web.

Swiper

Swiper - is the free and ultra lightweight mobile touch slider with hardware accelerated transitions (where supported) and amazing native behavior. It is intended to use in mobile websites, mobile web apps, and mobile native apps. Designed mostly for iOS, but also works great on Android, Windows Phone 8 and modern Desktop browsers.

FERROSLIDER 2

FerroSlider is a free, simple, powerful, responsive and customizable jQuery sliding plugin powered by HTML5 and CSS3. Organize any type of content, such as images, text, pages, lists and so on. You can use it as a sliding gallery or as slider for a one-page-website.

Excolo Slider

A simple jquery sliding plugin, supporting responsive design and touch.

iosSlider

iosSlider is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for use as a content slider, carousel, scrolling website banner, or image gallery.

jQuery Slider plugin

jQuery Slider is easy to use and multifunctional jQuery plugin that supports any webkit based touch mobile devices such as iPhone/iPod/iPad and Android.

sGlide

sGlide is a super flexible and light-weight jQuery plugin that generates a simple, feature-rich & mobile ready slider, which can be easily customized and styled using regular CSS.

μslider

μslider is a responsive and touch friendly jQuery plugin slider. Content can be anything: images, text, iframes, html5 video and audio (natively), YouTube and Vimeo videos with a light js patch. It's highly flexible and very easy to configure.

SLIDEME

Slideme is a responsive, css3, compatible (works fine even with IE7), customizable, easy to install (and use), multi-instance, fullscreen, cool, powerful slideshow plugin for jQuery.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...

10 Awesome Mobile Menu plugins and tutorials

Collection of 10 Awesome Mobile Menu plugins and tutorials.

Due to high usage of smartphones, creating mobile apps, mobile site or responsive site has become a must have thing which helps to expand the customer base. Create mobile specific site or responsive site is a challenging things due to presence of different mobile OS, different screen size phones with different resolution, different software and hardware. As limited space is available on mobile device for displaying website, so creating menu is challenging. But not to worry.

Today we have complied list of 10 awesome, free and ready to use jQuery plugins and tutorials for creating mobile menus. Enjoy..

You may also like:

• Awesome jQuery Mobile Plugins
• 10+ Best and Free jQuery Mobile Themes
• 5 jQuery Image Viewer Plugin for Mobile
• Write Mobile Device specific code using jQuery

Shifter

Shifter is a jQuery plugin for simple slide-out mobile navigation. Shifter works by checking for target elements in the DOM and binding events to them.

SlickNav

SlickNav is a responsive mobile menu plugin for jQuery with features like multi-level menu support, cross-browser compatibility, Flexible, simple markup and degrades gracefully without JavaScript.

Menutron

Menutron transforms your navigation menus from a list to a select menu when resizing your browser. On mobile devices, the select menu pulls up a native control, making it easier to pick an item.

Responsive and Touch-Friendly Menu

Tutorial for creating responsive and touch-friendly dropdown navigation. The technique consists of 3 main parts which are Simple drop-down navigation based on HTML and CSS, Responsiveness implementation using media queries and Adoption for touch screen devices with the help of a super tiny jQuery plugin.

jQuery.mmenu

mmenu is a jQuery plugin for creating slick, app look-alike sliding menus for you mobile website or responsive website.

Navobile

jQuery Navobile is a jQuery plugin that makes mobile navigation easy. Navobile uses CSS to apply CSS3 translations, Mobile device detection and fixing the position of nav.

FlexNav

FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility.

Responsive Retina-Ready Menu

A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes.

The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, use an icon font so that the icons of the menu won’t get pixelized on resize.

slimMenu

slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.With slimMenu, you’ll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus. It is 100% mobile responsive.

Horizontal Slide Out Menu

A simple, horizontal slide out menu with a grid-like thumbnail layout for the submenu. The menu slides out from the top when a main menu item is clicked and the sub-items fade in. When clicking on another item, the height of the submenu will adjust and the content will fade in and out while switching.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...

Write Mobile Device specific code using jQuery

Believe me, a mobile application developer life is not easy. The war of different mobile platforms, different operating systems, different screen size for mobile and tablets and frequent releases of new devices are biggest challenge that they are facing. And their mobile application will be dying in ICU, if not treated and handled against the continuously improved, innovated and released new vaccines.

To make their life easy in this post, we are going to see how to write conditional CSS/JavaScript code based on mobile device operating system using a jQuery plugin. Earlier I had posted about 10+ Best and Free jQuery Mobile Themes, Awesome jQuery Mobile Plugins, Detect Mobile Browsers using jQuery and Detect Android Devices/Phone using jQuery.

There is a jQuery plugin called Device.js which makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile) of device.

This plugin based on the device operating system, automatically updates the <html> section with appropriate css classes. See below image.

For iPhone

For Android Tablet

Current following devices are supported,

• iOS: iPhone, iPod, iPad
• Android: Phones & Tablets
• Blackberry: Phones & Tablets
• Windows: Phones & Tablets
• Firefox OS: Phones & Tablets

All you need to do is to just include the script. And that's it.

<script src="device.js"></script>

Live Demo

This plugin provides different set of CSS Classes as well as JavaScript function for every mobile operating system. To find out all available Javascript methods and more about CSS classes list you can visit its home page on github..

Official Website

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...

10+ Best and Free jQuery Mobile Themes

jQuery mobile is an awesome and mostly used framework for mobile application. So in this post, we have complied list of the 10+ Best and Free jQuery Mobile Themes for your mobile application. These themes covers design style from iOS, Android, BlackBerry, Metro Style for Window phones, Bootstrap, Flat UI, Square UI and Android Holo.

Earlier I had posted about Writing your first jQuery Mobile app - Part 1 and series of articles on jQuery Mobile, collection of Awesome jQuery Mobile Plugins and about 5 jQuery Image Viewer Plugin for Mobile.

jQuery Mobile ThemeRoller

The ThemeRoller Mobile tool makes it easy to create custom-designed themes for your mobile site or app. Just pick colors, then share your theme URL, or download the theme and drop it into your site.

Graphite

A beautiful and minimalist theme pack and generator for jQuery Mobile 1.3.1.

Native Droid

nativeDroid is a theme for jQuery Mobile inspired by the native HOLO-Style on Android Devices. It comes with 5 different colors combined with dark/light theme.

Flat UI Theme

Theme for jQuery Mobile based on Flat-UI.

iOS theme

This is an iOS inspired jQuery Mobile theme.

Android Holo-inspired theme

The theme isn't an exact copy of Holo, but is inspired by it in terms of color scheme, fonts, and the corners for example. To make sure the theme can easily be ported to newer versions of jQuery Mobile, only the color's and font were changed. The font is, obviously, Roboto, and to be more precise, Roboto Regular and Roboto Thin.

BlackBerry theme

This is Blackberry inspired jQuery Mobile theme.

Square-UI Theme

Theme for jQuery Mobile based on Square-UI.

Bootstrap jQuery Mobile Theme

A jQuery Mobile theme based on Bootstrap.

Metro style jQuery Mobile Theme

This theme provides a Metro user interface for Cordova apps using jQuery Mobile on Windows Phone 7.5.

Mobjectify

Use Mobjectify to generate quick mockups for your mobile design which you can save online for easy testing on any device with a browser.

Feel free to contact me for any help related to jQuery, I will gladly help you.CodeProject

Read more...

Awesome jQuery Mobile Plugins

In era of smartphones, mobile website/application has become demand of every industry. With this growing demand of mobile apps, the jQuery Mobile library has also become very popular and first choice for creating mobile apps.

Earlier I had posted about Writing your first jQuery Mobile app - Part 1 and series of articles on jQuery Mobile and about 5 jQuery Image Viewer Plugin for Mobile. In this post, find the most widely used and amazing jQuery mobile plug-ins for developing mobile based applications and websites.

Mobiscroll - [Paid]

Mobiscroll is a complete product with lots of controls/plugins for your mobile app like Calendar, color picker, range picker, rating plugin and many more. The controls are cross platform, Themable and have multi framework support. They provide 30 days trial period for satisfaction.

Mobi Pick

Mobi Pick is an Android-style datepicker widget for jQuery Mobile. It uses the date library XDate and allows progressive enhancement for date input fields using Modernizr.

Google maps jQuery Mobile plugin

The Google Map version 3 plugin for jQuery and jQM takes away some of the head aches from working with the Google Map API. Instead of having to use Google event listeners for simple events like click, you can use jQuery click events on the map and markers. It is also very flexible, highly customizable, lightweight (3.2kB or 3.9kB for the full) and works out of the box with jQuery mobile.

PhotoSwipe

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.Developers and designers requiring an interactive image gallery on their mobile website with the look and feel of a native app. PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

Pagination

Pagination is a jQuery Mobile plugin for sequential pagination between pages with support for touch, mouse, and keyboard! The Pagination plugin creates touch-drag navigation between separate HTML pages.

Camera Slideshow

Camera slideshow is an open source project and it can be used for slideshows and as a content slider. Camera slideshow is tested on new browsers and it works on mobile devices as well.

DateBox

DateBox is a jQueryMobile plugin that aims to make user interaction with dates and times simple and intuitive. It is a colloborative work, with a full range of features allowing easy implementation, and painless extensibility. This plugin allows date selection, time selection and duration selection. And the selection widget can appear like Flip box, Slide box.

960 Grid on jQuery-Mobile

jQuery-mobile-960 is a port of 960 grid to jQuery mobile. It merge the flexibility of 960.gs, and the ease of jQuery mobile. It aims to bring more flexibility to jQuery mobile layout and thus make it easier to use on tablets.

bxSlider

bxSlider is fully responsive, with touch / swipe support plugin to show slides can contain images, video, or HTML content. It uses CSS transitions for slide animation (native hardware acceleration!)

SwipeButton

SwipeButton is a jQuery Mobile plugin which allows developers to add iPhone style buttons to listview rows by attaching to the swipe event.

SplitView

This is a plugin for jQuery Mobile that detects your device's browser width and renders pages accordingly - e.g. splitview for desktop and tablets, and standard jqm for mobile phones.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Read more...

Creating Dialog Box in jQuery Mobile - Part 4

This is my 4th post of jQuery Mobile Series and In first three Post, I had explained about Writing your first jQuery Mobile app, Create Multiple jQuery Mobile Pages and Link them and Prefetching and Caching jQuery Mobile Pages. And in this post, you will see how to create dialog box in jQuery mobile.

Let's begin

Any page in jQuery mobile can be created as dialog box. All you need to do is to apply data-rel="dialog" attribute to the to the page anchor link and jQuery mobile will do the rest. Remember the dialog should be a separate page div which you can load or include in your HTML.

<a href="dialog.html" data-rel="dialog">Open Dialog</a>

When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.

You can also create dialog with Multi-Page application. To know more about Single Page Template and Multi-Page Template, read Part 2.

<a href="#dialog" data-rel="dialog">Open Dialog</a>

Open Dialog Demo

In the demo, you should have noticed that dialog box has close button to close it. jQuery mobile framework works quite well here. If the dialog has a header the framework will also add a close button at the left side of the header. If no header, then no close button.

Open Dialog Without Header Demo

By default, the dialog will open with "popup" transition. But you can always change the transition using data-transition="pop" attribute.

<a href="dialog.html" 
   data-transition="flip" 
   data-rel="dialog">Open Dialog</a>

You can chose any transition method from "flip", "fade", "pop", "turn", "flow", "slide", "slidefade", "slideup" and "slidedown". To make it feel more dialog-like, jQuery Mobile recommends specifying a transition of "pop", "slidedown" or "flip".

Dialog Transition Demo

When any link is clicked within the dialog then dialog gets closed automatically. But what if when there are no links in the dialog box? In that case, you can add a button in dialog with data-rel="back" attribute to close the dialog box and return to previous page.

Close Button Demo

Dialogs have a default width of 92.5% and a max-width of 500 pixels. There is also a 10% top margin to give dialogs larger top margin on larger screens. You can change this default behavior by modifying .ui-dialog-contain css class.

Feel free to contact me for any help related to jQuery, I will gladly help you.CodeProject

Read more...

jQuery Mobile: Prefetching and Caching Pages - Part 3

This is my third post of jQuery Mobile Series and In first two Post, I had explained about Writing your first jQuery Mobile app - Part 1 and Create Multiple jQuery Mobile Pages and Link them - Part 2. And in this post, you will see how to prefetch and cache pages in case of single page template application. To know more about Single Page Template and Multi-Page Template, read Part 2.

Just to recollect you about Single Page Template that there should be individual HTML file for each page and in Multi Page Template, all the pages are combined into single HTML file. As mentioned in Part 2 article, that with Multi Page Template approach all the pages are loaded in one go so your mobile application works faster and consume less bandwidth.

With Single Page Template application, every page is fetched during navigation and you will see a loading spinner animation. But using the prefetch feature, a single-page template application can be made to behave like the multi-page template application.

Related Post:

• Writing your first jQuery Mobile app - Part 1
• Create Multiple jQuery Mobile Pages and Link them - Part 2

When using single-page templates, we can prefetch pages into the DOM so that they're available instantly when the user visits them. To prefetch a page, add the data-prefetch attribute to a link that points to the page. jQuery Mobile then loads the target page in the background after the primary page has loaded and the pagecreate event has triggered. For example:

<a href="prefetchThisPage.html" data-prefetch>Page 2</a>

We can define this attribute for as many as we would like to prefetch. You can also load the page programatically using $.mobile.loadPage() method.

$("#page1").bind("pageshow", function(event, data) {
  $.mobile.loadPage( "prefetchThisPage.html", { showLoadMsg: false } );
});

How it works?

Prefetching of pages occurs in background and they creates additional HTTP requests and use bandwidth to load the pages. So when you visit the prefecthed page, you won't see the loader/spinner icon as page is already loaded.

But what if you make a request for the prefetched page but prefetch is not complete? In such case, you will see loader/spinner comes up and the page is shown once it is completely fetched.

Common scenario for using this feature is a photo gallery, where you can prefetch the "previous" and "next" photo pages so that the user can move quickly between photos. It is a great feature, but you have to careful here.

• As if there are more pages, more http requests and more bandwidth is consumed to prefetch.
• You should implement this feature only when you are sure that user will visit the prefetched page.

Remember "Prefetching doesn't mean Caching". When a page is prefetched, it is available in the DOM. If you navigate to this prefetched page and then navigate to another page, the prefetched page is automatically removed from the DOM. So its not caching.

Caching pages

In single-page template application, each new page is fetched and stored in the DOM. The page remains in the DOM and is removed once you move away from the page. Only the main or the first page of the app always remains in the DOM. Prefetching helps but to some extent only. So the answer is "Caching".

With DOM caching, you can cachne specific pages in the DOM. These pages, once loaded, remain in the DOM through the life cycle of the app. There are 2 ways to cache the pages either via adding "data-dom-cache" attribute or via JavaScript.

<div data-role="page" id="cacheMe" data-dom-cache="true">
<div>

Or Via JavaScript

<div data-role="page" id="cacheMe">
  <script>
    $("#cacheMe").page({ domCache: true });
  </script>
<div>

There is also another way to cache all pages globally, instead of caching specific pages. Put below jQuery code to the <head> section of your main page. Now, every page visited automatically gets cached in the DOM.

<script>$.mobile.page.prototype.options.domCache = true;</script>

The drawback of DOM caching is that the DOM can get very large, resulting in slowdowns and memory issues on some devices. So use caching carefully.

Remember:

When Ajax navigation is used, then remember only <head> section is processed of first page or the main page of your app. The <head> element of other pages is ignored and only their page's div containers are processed. Thus, to make sure that your javascript code is executed in these pages, you need to include the <script> tag within the page's div container.

Summary

In this post, you got an idea about prefecthing and caching pages in Single Page Template application, advantage of prefetching and caching pages. In next post, I will show more about about creating Dialogs in jQuery Mobile App.

Feel free to contact me for any help related to jQuery, I will gladly help you.CodeProject

Read more...

Create Multiple jQuery Mobile Pages and Link them - Part 2

In my previous post about Writing your first jQuery Mobile app - Part 1, I have explained about creating single page, changing themes and creating navigation button. And in this post, we will see more about pages, creating single page template and multiple page template.

What are "Pages"?

A Page in jQuery Mobile is nothing but a container created within a <div data-role="page"> that is displayed on the screen. It can contain the header, the page content, and the footer. The jQuery Mobile application can have individual HTML files each representing a single page, or it can have single HTML file containing multiple pages div containers within it. You can place widgets and embed controls within page.

Single Page Template

Single-page template means create individual pages for every HTML file. Where every HTML file will have its own page container created using <div data-role="page">. So we shall create two individual HTML file named "index.html" and "Next.html" and link them using navigation buttons.

So below is the body of "index.html". For the head sections and referencing jQuery mobile read Part 1.

<div data-role="page">
    <div data-role="header" data-theme='b'>
      <h1>My Website</h1>
    </div>
    <div data-role="content" data-theme='c'>
      <p>This is index.html.</p>
      <a href="next.html" data-role="button">Go to Next.html</a>
    </div>
    <div data-role="footer" data-theme='b'>
      <h1>Footer</h1>
    </div>
</div>

The button to move to "Next.html" page is placed in content section and applied "data-role=button" to let jQuery mobile know that this is a button element so that jQuery mobile can take necessary action for automatically enhancing and displaying. And this is how it should look.

Now, create "Next.html" and below is the body of "Next.html".

<div data-role="page">
    <div data-role="header" data-theme='b'>
      <a href="index.html" data-icon="home">Home</a>
      <h1>My Website</h1>
    </div>
    <div data-role="content" data-theme='c'>
      <p>This is Next.html. Click Home button to go to index.html</p>
    </div>
    <div data-role="footer" data-theme='b'>
      <h1>Website Footer</h1>
    </div>
</div>

In this page, the button to move to "Index.html" is placed in header section and applied "data-icon=home" to display home icon. And this is how it should look.

Now when you run this app, index.html page is first loaded into the DOM. When you click on the button to open Next.html, the index.html page is hidden from view, and Next.html is displayed.

This approach has following advantages.

• Your pages are clean, small and easy to maintain.
• Your DOM size is also small.

It also has disadvantage.

• It consumes more bandwidth as each page visit generates a new request.

Remember, in single page approach declaring the <div data-role="page"> page container is optional.

Multi-Page Template

In a multi-page template, the single HTML file will have multiple pages in it which means multiple <div data-role="page">. To differentiate these pages, assign an Page ID to every div element. The page ID must be unique within your app. Later on, using Page ID we can link them together and navigate through them.

So, lets create a single HTML file named "index.html" and create multiple page within it.

<div id="page1" data-role="page">
    <div data-role="header" data-theme='b'>
      <h1>My Website</h1>
    </div>
    <div data-role="content" data-theme='c'>
      <p>This is Page 1.</p>
      <a href="#page2" data-role="button">Go to Page 2</a>
    </div>
    <div data-role="footer" data-theme='b'>
      <h1>Footer</h1>
    </div>
</div>

<div id="page2" data-role="page">
    <div data-role="header" data-theme='b'>
      <h1>My Website</h1>
    </div>
    <div data-role="content" data-theme='c'>
      <p>This is Page 2.</p>
      <a href="#page1" data-role="button">Go to Page 1</a>
    </div>
    <div data-role="footer" data-theme='b'>
      <h1>Footer</h1>
    </div>
</div>

Now when you run this app, the index.html file will be loaded with all the pages and you can navigate through them via navigation buttons. This is same as like creating multiple anchor tags links within a simple HTML page.

This approach has following advantages.

• All your pages are loaded in one go so your mobile application works faster and consume less bandwidth.
• Your DOM size is also small.

It also has following disadvantage.

• This is only useful when you have small number of static pages and with minimum content.
• The DOM size is relatively large compare to single page approach.

Setting Title of Pages

With Single Page Template approach, you can easily set the title of every page because each page is separate file, but in case of Multi-Page Template, how will you set different titles for every page?

Answer is: You can use the <title> tag to set the title for the first or the main page of the multi-page template app and other pages define "data-title" attribute to set the title for particular page.

<div id="page2" data-role="page" data-title="Page 2">

More about Linking Pages

jQuery Mobile is designed to work with simple page linking conventions. We link pages as we normally would, and jQuery Mobile will automatically handle page requests. In a single-page template, it uses Ajax when possible. When Ajax isn't possible, a normal http request is used instead. That's a default behavior. However, you can disabled the ajax navigation using "data-ajax=false" attribute.

<a href="Next.html" data-role="button" data-ajax="false">Go to Next Page</a>

There are situations where Ajax transitions are not used when a request page is:

• from an external domain
• data-ajax="false" attribute is used
• rel="external" is specified
• target attribute is specified

In case of Multi-Page Template approach, Ajax navigation is by default and disabling it doesn't make any difference. The only change you will find when you disable Ajax navigation is, the default slide transition will be used to load the pages regardless of what transition you have specified in the data-transition attribute.

<a href="Next.html" data-role="button" data-ajax="false" data-transition="flip" >Go to Next Page</a>

In above code, though data-transition is set to "flip" but since Ajax navigation is turned off, it will be displayed using slide transition.

Using data-rel="back" attribute

Using data-rel="back" attribute, you can create back button behavior (as we usually do with JavaScript). It uses browser history to navigate to previous page. When both the href and data-rel="back" attributes are specified for an anchor link, then href attribute is ignored by the framework and the data-rel attribute will be considered.

Summary

In this post, you got an idea about creating Single Page Template application, Multi-Page Template application and then linking the pages within the application. Also got answers for defining titles of the pages, turning off ajax navigation and creating back button in jQuery Mobile App. In next post, I will show more about Prefetching and Caching Pages.

Feel free to contact me for any help related to jQuery, I will gladly help you.CodeProject

Read more...

Writing your first jQuery Mobile app - Part 1

This is the first part of jQuery Mobile Series. And in this post, You will learn a guide to start with jQuery Mobile and making your first application using jQuery Mobile. This post mainly focus on basics of jQuery mobile and provide a path to start with jQuery Mobile.

Before we begin, its important to know "What is jQuery Mobile"? Well, jQuery mobile is a framework created for making platform independent mobile applications. It is built using HTML5, CSS3, and the very popular jQuery library.

Lets begin...

jQuery mobile uses HTML5 extensively so to get full advantage of jQuery mobile, we need to use HTML 5. So the very first thing include in your HTML file is "HTML5 doctype".

<!DOCTYPE html>

Next thing to tell the browser about width of your page. This is important for mobile application as if not specified that it may appear awkward on mobile devices. In the head tag of page, a meta viewport tag sets the screen width to the pixel width of the device

<meta name="viewport" content="width=device-width, initial-scale=1">

Now lets load the jQuery mobile framework in head section. We shall use the CDN enabled links for better performance. Please take a note we need to reference jQuery mobile CSS, jQuery and jQuery mobile js file.

<link  rel="stylesheet" type="text/css"  href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

That's all for the head section of the page. Before we move to body of the page, it is important to understand the page structure of jQuery mobile app. As seen in below image, it has 3 sections "Header", "Content" and "Footer". The page, its header, footer, and content are all <div> containers, which are styled by using the HTML 5 data-role attributes.

In the body, we shall create different page blocks, where pages are nothing but <div> elements with HTML 5 data attributes.

Let's first create a single page. As mentioned earlier in the post, jQuery mobile uses HTML 5. So to define a page, it uses HTML5′s data attribute "data-role=page".

<div data-role="page">
</div>

Remember, we can have many such <div> elements with "data-role=page" attribute within single <body> tag. A body tag can hold multiple mobile pages too.
Now, we shall create header, content and footer section of the page. This is again achieved using HTML 5 data-role attributes.

<div data-role="header">
</div>
<div data-role="content">
</div>
<div data-role="footer">
</div>

Let's go ahead and put some content in all 3 sections.

<div data-role="header"><h1>Welcome!!!</h1>
</div>
  
<div data-role="content"><p>Welcome to my blog and you are reading how to write your first jQuery mobile app.</p>
</div>
  
<div data-role="footer"><h1>jQuery By Example</h1>
</div>

Putting is all together then this is how it looks.

<!DOCTYPE html>
<html>
<head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>My First jQuery Mobile Application</title> 

  <link rel="stylesheet" type="text/css"  href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head> 

<body> 
  <div data-role="page">

     <div data-role="header"><h1>Welcome!!!</h1></div>

     <div data-role="content">
        <p>Welcome to my blog and you are reading how to write your first jQuery mobile app.</p>
     </div>

     <div data-role="footer"><h1>jQuery By Example</h1></div>

  </div>
</body>
</html>

So, now when you view this page in mobile it will look like this..

Congratulations, You have just done with your first jQuery Mobile application.

Live Demo & Code

When I started with my first app, the one thing got my attention instantly. Question came to mind about the styles applied to the page, the colors used for header, footer and content containers. As while creating the app, I have not specified any styles. Well, welcome to jQuery mobile themes.

The framework provides 5 default basic color schemes called "color swatches". They are named a, b, c, d and e. And by default, swatch a is used when you create a page. This provides combination of white and black colors, as seen in the previous screenshot.
Now, you must be thinking how should I change the theme? Well you can change the color swatch of your page and header/footer by using the data-theme attribute.

<div data-role="header" data-theme='b'></div>

You can also define different themes for different containers.

<div data-role="header" data-theme='b'> 
</div>
<div data-role="content" data-theme='c'>
</div>
<div data-role="footer" data-theme='b'>
</div>

Let's change the theme to our demo and see how it looks.

Live Demo & Code

Along with these 5 predefined themes, jQuery mobile also allows you to create custom theme using ThemeRoller.

Now, lets modify the demo and add a button in header section. For now, on click of this button we will redirect user to Home.html. Although the page doesn't exists but for demo its fine.

Defining a button is quite simple. Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Use anchor links (a elements) to mark up navigation buttons, and input or button elements for form submission. Lets define a navigation button in header section.

<div data-role="header">
   <a href="Home.html">Home</a>
   <h1>Welcome!!!</h1>
</div>

You can also define icons for the button using predefined icon set

provided by jQuery Mobile. To define an icon, use "data-icon" attribute.

<a href="Home.html" data-icon="home">Home</a>

Live Demo & Code

Summary

I hope you find this post useful and good enough to start with jQuery mobile. By now, you must have an idea about creating single page, changing themes and defining buttons. In next post, I will show more about creating multiple pages and navigation between pages.

Feel free to contact me for any help related to jQuery, I will gladly help you.CodeProject

Read more...