Getting started with jQuery Mobile

jQuery received a lots of buzz since its inception not only because of rich functionality but also because it's easy to implement client side code in jQuery with a very small learning curve involve. jQuery has changed the way Javascript/client side scripting is done.

With introduction of jQuery Mobile, jQuery team has revolutionized mobile web development as well. We will look at series of articles to go over various features that jQuery mobile provide to create web based application with native look and feel.

Today, we will start with an introduction of jQuery Mobile and create your first jQuery mobile application.

So basically, jQuery Mobile is built on the top of jQuery and jQuery UI. It provide consistent look and feel across all major mobile browsers as well as on webkit based desktop browsers. It includes set of UI widgets that provide rich functionality that are very easy to work with and can be used to create a complex UI for mobile based web applications. It is built on foundation of clean semantic HTML and uses various features from HTML5 and CSS3. You can use applications like PhoneGap to convert web application into native application.

There are three files that you will need in order to work with jQuery mobile. You can download these files and keep it within your server or you can take advantage of their CDN (Content Delivery Network).

  1. jQuery mobile css (CDN Link: http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css)(Download Link: http://jquerymobile.com/themeroller/)
  2. jQuery library (CDN + Dowload Link: http://code.jquery.com/jquery-1.7.1.min.js )
  3. jQuery mobile library (CDN + Download Link: http://code.jquery.com/jquery-1.7.1.min.js )

These three files will have to appear in following order to make things work correctly:

 

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

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

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

 

Unlike regular web page, all script and CSS files will be included in the head section so jQuery and mobile framework can transform your page.

Once this setup is complete your head tag will look like this:

 

<head>

    <title>My First Page</title>

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

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

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

</head>

 

Once this is complete, we will look into a new type in Meta tag with name "viewport". By default, mobile browser will render page as regular desktop browser and then will let user zoom in either using double tap or pinch on screen to zoom in. This behavior can be overridden using viewport meta tag.

 

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

 

Line above suggest mobile browser that:

Width: width of the viewport will be same as device width (if you want you can change this value to pixels but in order to keep your layout flexible use device-width).

Initial-scale: setting this value to 1 or 1.0 mean site will scale 1:1

Maximum-scale: setting this value to 1 or 1.0 mean your site will not zoom more then 1

Other properties: you can set more but most of the times it's not needed.

Height: device-height

Minimum-scale: 0.25 or 1

User-scalable: yes or no (yes mean zoom is allowed by user, no mean it's not)

 

Updated head code after adding meta tag:

 

<head>

    <title>My First jQuery Mobile Page</title>

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

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

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

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

</head>

 

 

jQuery mobile uses HTML 5's "data-" attribute to transform basic markup into styled widgets like data-role. You will see more "data-" related attributes in future articles.

Now it's time to add some content to your site's body section:

Since, jQuery mobile uses HTML 5 and CSS3, we will stick to the tags that have more semantic meaning like section, header, footer, nav etc from HTML 5

 

<section data-role="page">

    <header data-role="header">

        <h1>Header Content</h1>

    </header><!-- end header -->

    <div data-role="content">    

        <p>My first jQuery Mobile Application</p>        

    </div><!-- end content -->

    <footer data-role="footer" data-position="fixed">

        <h1>Footer Content</h1>

    </footer><!-- end footer -->

</section ><!-- end First page -->

 

If you open this page in any mobile web browser or in chrome/safari browser you should see your page like this:

 

Let's go over as what happened:

  1. Section: HTML 5 section tag
    1. data-role= "page" : tells JQM to render page
  2. Header: HTML 5 header tag
    1. data-role= "header": tells JQM to treat this as header for the page
  3. Div: HTML Div tag
    1. data-role= "content" : tells JQM to treat this as content section for the page
  4. Footer: HTML 5 footer tag
    1. data-role= "footer": tells JQM to treat this as footer for the page
    2. data-position= "fixed": tells JQM that position for footer will always be at the bottom of the screen

That's it. It's that simple. In next article we will take a deep dive and see as how to create multipage application on JQM.

Tags: , ,

jQuery | jQuery Mobile