jQuery Mobile Tutorial: Intro to Framework for Mobile Apps and Sites

jQuery Mobile Tutorial
Hey Guys! Today I am here with some info on an innovative approach to work with mobile apps and sites optimized for mobiles and tablets.

Here the approach to develop apps and sites for mobile uses the jQuery Mobile.

jQuery Mobile is developed by the jQuery Foundation to make the mobile website development clutter free for all the Mobile Platforms.

First we will talk about the use of jQuery Mobile for Websites.

The jQuery Mobile extends the functionality of core jQuery and jQuery UI to optimize the website for mobiles and tablets and utilize the input components of Mobile like touch screen or keypads etc.

Lets see how works!

It has predefined data attributes to be used to define seperate page elements like header, footer, menu and other basic elements.

You will have to just include the required files in page that you want to render for Mobiles.

Here is the includes code:

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Now this page is working with jQuery library and jQuery Mobile Framework. But its not done here.

You will have to make the HTML elements in predefined format and with predefined data attributes so that Framework catches and make the necessary changes to page according to mobile screen. Here is the example body portion if jQuery Mobile page:

<div data-role="page">
  <div data-role="header" data-theme="B" style="line-height:40px;">
    <h1 style="font-size:30px;">Time to Hack</h1>
    <h3>Place to find best Hacks and Tweaks... </h3>
    <div data-role="navbar" data-theme="A">
      <ul>
        <li><a data-icon="home"  data-theme="A" class="ui-btn-active ui-state-persist" href="index.html">Home</a></li>
        <li><a data-icon="grid"  data-theme="A" href="register.html">Register</a></li>
      </ul>
    </div><!-- /navbar -->
  </div><!-- /header -->

  <div data-role="content" style="min-height:150px;">  
    <p>Hello world</p>    
  </div><!-- /content -->

  <div data-role="footer" style="height:40px; line-height:40px;">
    <center>Copyright &copy; 2012 Time to Hack</center>
  </div><!-- /footer --> 

</div><!-- /page -->

Similarly here is a page example of several form elements to create profile:

<div data-role="page">
  <div data-role="header" data-theme="B" style="line-height:40px;">
    <h1 style="font-size:30px;">Time to Hack</h1>
    <h3>Place to find best Hacks and Tweaks... </h3>
    <div data-role="navbar" data-theme="A">
      <ul>
        <li><a data-icon="home"  data-theme="A" href="index.html">Home</a></li>
        <li><a data-icon="grid"  data-theme="A" class="ui-btn-active ui-state-persist" href="register.html">Register</a></li>
      </ul>
    </div><!-- /navbar -->
  </div><!-- /header -->

  <div data-role="content">  
    <h3>Create Profile</h3>
    <form name='' method='POST' action=''>
      <p><label for="fname">Full Name</label><input type='text' id="fname" name='fname' value=''/></p>
      <p><label for="email">Email</label><input type='text' id="email" name='email' value=''/></p>
      <p>
        Gender
        <fieldset data-role="controlgroup" data-type="horizontal" >
          <input type='radio' id="radio_male" name='gender' value='M'/><label for="radio_male">Male</label>
          <input type='radio' id="radio_female" name='gender' value='F'/><label for="radio_female">Female</label>
        </fieldset>
      </p>
      <p><label for="birthday">Birthday</label><input type='date' name='birthday' id='birthday' value=''/></p> 
      <p><label for="pass">Password</label><input type='password' name='pass' id="pass" value=''/></p> 
      <p><label for="re_pass">Retype Password</label><input type='password' name='re_pass' id="re_pass" value=''/></p> 
      <p><input type='submit' name='submit' value='Register' data-theme="A"/><input type='reset' value='Reset' data-theme="C"/></p> 
    </form> 
  </div><!-- /content -->

  <div data-role="footer" style="height:40px; line-height:40px;">
    <center>Copyright &copy; 2012 Time to Hack</center>
  </div><!-- /footer --> 

</div><!-- /page -->

Now lets talk about the use of jQuery Mobile on Mobile App Development. There are some toolkit available which provides an easy access to the phone’s environment and lets you develope application in pure HTML and CSS. So the apps developed by these can be ported to any other environment by changing the key parameters of tool kits.

Cordova

Phonegap Artwork Bot

The Toolkits are Apache Cordova and Phonegap. For Apache Cordova you can go here and find the toolkit. To download the phonegap click here.

For more info on elements and their theaming info you can visit the Docs and Demos page of jQuery Mobile at http://jquerymobile.com/demos/1.2.0/

Demo  Download