As a web developer you must aware of today web is more friendly to mobile users. Refer to Google Analytics reports more number of users are using mobile devices to visit web. On way of web optimization mobile friendly behavior is mandatory. To look into the above team of JQuery developers come with JQuery Mobile framework. The mantra “Write less, Do more.” is application to JQuery Mobile. JQuery Mobile is a HTML5 based UI framework to develop mobile friendly responsive web pages. Read below Jquery Mobile Tutorial to get started with Jquery Mobile Framework.
Advantages of Jquery Mobile
- With less line of Code you achieve dream functionalities.
- Easy to debug & maintain.
- Supports all latest browsers.
- Qualified with responsive behaviors.
- Jquery mobile is a Touch Optimized mobile framework.
- Jquery mobile works for all popular tablets & smartphones.
- Available to million Global users & programmer friendly forums.
- Plenty of Queries are resolved in Stack Overflow.
To get started with Jquery Mobile you need to download Jquery Mobile library from https://jquerymobile.com. Or else you can use CDN links as below.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
N.B. In script tag I ignored to use type=”text/javascript”. This is because of in HTML5 default script language is javascript. We don’t need to declare this manually.
Get Started with Jquery Mobile Tutorial
To write your first Jquery mobile app you need to refer Jquery mobile CSS, JS & Jquery libraries in the head section of HTML. Including this to ensure proper rendering for touch & zooming functionalities you required to add the following meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
This meta tag says content width by default must be equal to the resolution of device & initial-scale make confirm the initial zoom must be 100%.
Structure of a JQuery Mobile Page
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h2>Mobile Homepage</h2> </div> <div data-role="main" class="ui-content"> <p>My First JQuery Mobile App!</p> </div> <div data-role="footer"> <h2>Footer</h2> </div> </div> </body> </html>
In the above code data-role is used to describe the portion of the page. data-role=”header” says the block of code we required to write for header part of the page. Similarly body contents the content & footer contains the footer message like copy rights. In Jquery mobile data-* attribute is used to make “touch-friendly” web pages. To use a page as dialog we need to declare data-dialog=”true”.
JQuery Mobile Transition Effects
During we travel from one page to other page transition effects are very useful. Jquery mobile supports various kind of Transition effects. These are fade, flip, flow, pop, slide, slidefade, slideup, slidedown, turn & none. To implement transition effect in Jquery Mobile we need to add data-transition attribute with effect types. For an example:
<div data-role="main" class="ui-content"> <p>Click on the link to watch flip effect.</p> <a href="#secondpage" data-transition="flip">Flip to second Page</a> </div>
JQuery Mobile Buttons
JQuery mobile buttons can be created in 3 ways. Using HTML input type, Using button tag with CSS Class “ui-btn” & anchor tag with CSS Class “ui-btn”. Look at the sample buttons below.
<input type="button" value="Button Label"> <button class="ui-btn">Button Label</button> <a href="#link" class="ui-btn">Button Label</a>
ui-btn is a per-defined class of Jquery Mobile. To create group of buttons using jquery mobile you required to keep all your buttons inside a div. For that div add an attribute data-role=”controlgroup”.
To create a back button in Jquery mobile you can refer data-rel=”back” attribute. Look at the example below.
<a href="#" class="ui-btn" data-rel="back">Go Back</a>
Similarly to create inline buttons you need to add class=”ui-btn ui-btn-inline” with your anchor link.
JQuery Mobile Buttons Icons
Like BootStrap vector graphics Jquery mobile framework provides various icons for buttons. To add an icon with your button you need to refer ui-icon class. Look at the example below.
<a href="#link" class="ui-btn ui-icon-search">Search</a>
Please find the list of common used icons & there class names in Jquery Mobile.
| Class Name | Description |
| ui-icon-arrow-r | Right Arrow |
| ui-icon-arrow-l | Left Arrow |
| ui-icon-delete | Delete |
| ui-icon-info | Information |
| ui-icon-back | Back |
| ui-icon-home | Home |
| ui-icon-grid | Grid |
| ui-icon-alert | Alert |
| ui-icon-search | Search |
| ui-icon-lock | Lock Symbol |
| ui-icon-audio | Speaker |
To position icons you can use ui-btn-icon-top, ui-btn-icon-right, ui-btn-icon-left & ui-btn-icon-bottom classes.
JQuery Mobile Navigation Bar
By simply adding data-role=”navbar” attribute you can create navigation bar in Jquery mobile. Look at the example below.
<div data-role="header"> <div data-role="navbar"> <ul> <li><a href="#homelink">Home</a></li> <li><a href="#secodnpagelink">Second Page</a></li> <li><a href="#search">Search</a></li> </ul> </div> </div>
As a beginner these are the basics to get started with JQuery Mobile framework. If you want to read more in details please refer http://jquerymobile.com/demos/.
