jQuery Mobile Framework Tutorial.
Wall Script
Follow Me:
Monday, December 19, 2011

jQuery Mobile Framework Tutorial.

Jquery mobile framework helps you to develop rich web based mobile applications. In this tutorial, we explained basic things such as theme selection, library usage, design pages, page links and Transition animations. Its very lightweight code, simple and flexible, it supports all popular smartphone and table platforms. Use it and enrich your mobile web applications.

jQuery Mobile Framework Tutorial


Download Script     Live Demo

Developer
Ravi Tamada
Ravi Tamada
Designer Developer & Freelance
Chennai, INDIA
androidhive.info

Include jQuery Mobile libraries
The first step is include jQuery Mobile stylesheet and javascript files in your webpage in the header section.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

Designing Your webpage
jQuery mobile will work with normal HTML tags or HTML5 tags, but you need to add attribute called data ( data-role, data-theme etc.,) to your html tags.

jQuery mobile list item


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Mobile | 9Lessons</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>

<body>
<div data-role="page">
<div data-role="header" data-theme="a">
<h1>9Lessons</h1>
</div>

<div data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#"><h2>Google Plus Style Drag and Drop adding Groups</h2></a></li>
<li><a href="#"><h2>Getting Started with Adobe Flex</h2></a></li>
<li><a href="#"><h2>Facebook Wall Script 4.0 Release</h2></a></li>
<li><a href="#"><h2>Login with Google Plus OAuth</h2></a></li>
</ul>
</div>

<div data-role="footer">
<h3>www.9lessons.info</h3>
</div>
</div>
</body>
</html>

Live Demo
Customizing single list item
You can customize your article row by adding some description and comment count. See the following code

jQuery mobile list item

<li>
<a href="http://www.9lessons.info/2011/09/google-plus-style-drag-and-drop-adding.html">
<h2>Google Plus Style Drag and Drop adding Groups</h2>
</a>
<p>Are you looking for Google plus style drag and drop adding friends in groups or circle. Google plus circle implementation so cool, same way I have tried similar user </p>
<span class="ui-li-count">55</span>
</li>

Customized List Item Demo
Selecting theme styles
The data-theme attribute is used to select a theme for a particular element. You can use a, b, c, d, e values for date-theme. (According to jquery mobile doc you can use data-theme will accept values a, b, c ... z, but it is still under development)

jQuery mobile styles

Linking between pages
Linking between pages can be done using simple anchor tags. Give unique id for container and give same id in anchor href value.

<!-- Home Page -->
<div data-role="page" id="home">
<div
data-role="header" data-theme="a">
<h1>
9Lessons</h1>
</div>

<div data-role="content">
Linking between pages.
<a href="#about_us"
data-role="button" data-inline="true">About Us</a>
</div>

<div data-role="footer">
<h3>
www.9lessons.info</h3>
</div>
</div>


<!-- About Us Page -->
<div data-role="page" id="about_us">
<div
data-role="header" data-theme="a">
<h1>
9Lessons</h1>
</div>

<div data-role="content">
The page contains About Us<br/>
Go back to Home
<a href="#home" data-role="button" data-inline="true">Home</a>
</div>
<div data-role="footer">
<h3>
www.9lessons.info</h3>
</div>
</div>

Linking Pages Demo
Transition Animation
You can give transition animation while switching between pages. data-transition attribute is used to define a transition

jQuery mobile animations
<a href="#slide" data-transition="slide">About Us</a>

Transitions Demo
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


39 comments:

  1. It's very true that the future of the web is mobile. Nice start for me, thanks! :)

    ReplyDelete
  2. nice..good for beginner.. :)

    ReplyDelete
  3. It's is good and helpful tutorial for beginner developers........

    ReplyDelete
  4. I find jQuery mobile very sluggish on mobiles for some reason... All in all though,its a brilliant framework :)

    ReplyDelete
  5. Non of this works on Internet Explorer and on Mobile phone. No css detected...

    ReplyDelete
  6. nice. I started using the section tag for pages and header/footer tags inside that

    ReplyDelete
  7. Good plugin but another problem is size.
    If you make website for mobile you should remove all not important scripts if not website can be load very slow. In my website about 15% users use mobile phone.

    ReplyDelete
  8. Excelente , yo ya lo habia probado muy bueno aqui pueden ver una demo con php:

    http://softfull.net/movil/index.php

    ReplyDelete
  9. Nice srinivas!!! I was expecting this long time... Great work you have done!! Keep doing!!

    ReplyDelete
  10. Transitions demo is not working!! Please look into that.. thanks.. Jagan

    ReplyDelete
  11. Thanks, Very useful tutorial for beginner.

    ReplyDelete
  12. Good start for beginners!

    ReplyDelete
  13. Nice Post... I have used concept in google app engine .

    ReplyDelete
  14. JQuery Mobile Framework make mobile more attractive & give it uniqueness.

    ReplyDelete
  15. J Quary Mobile Frame work is giving its best in market.

    ReplyDelete
  16. Great post.
    Thanks for the pain you had taken to keep us updated.

    ReplyDelete
  17. Hi, guys! Thanks for useful information! We`ve also posted jQuery Mobile – Beginner Tutorial your readers might also like: http://www.learncomputer.com/jquery-mobile-beginner-tutorial/

    ReplyDelete
  18. Very nice and compact tutorial. Thank you for putting it together!

    ReplyDelete
  19. I am facing problem i have converted my wap site using jquery mobile framework... now im facing if i click on any content link page invisible.. it get visible only if i refresh page. how to fix this problem

    ReplyDelete
  20. thanks, this stuff is usefull :)

    ReplyDelete
  21. Great app, i like it very much!

    ReplyDelete
  22. nice tutorial and simply super.......

    ReplyDelete
  23. Thanks, this stuff is usefull :)

    ReplyDelete
  24. this tutorial is work on asp.net web forms???

    ReplyDelete
  25. waw this amazing, i know this place good for tutorial. I hope this web always many traffic

    thanks for share knowledge

    ReplyDelete


  26. Thanks, Very useful tutorial for beginner.

    ReplyDelete
  27. Hello Ravi, I very interesting about jquery because I still learn very basic jquery. anyway I will try adopt your jquery code to my html website and make report soon.

    Thanks Ravi

    ReplyDelete

Make in India