What's jQuery Mobile ? How is work? on jQuery Mobile and show example

1. 322432 WEB DESIGN TECHNOLOGY
by Yaowaluck Promdee, Sumonta Kasemvilas
jQuery Mobile
1

2. WHAT’S JQUERY MOBLIE?
2
http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2011/12/jquery-mobile-framework1.jpg

3. WHAT IS JQUERY MOBILE?
3
jQuery Mobile is a touch-optimized web
framework for creating mobile web applications.
jQuery Mobile works on all popular smartphones
and tablets
jQuery Mobile is built on top of the jQuery library, which
makes it easy to learn if you already know jQuery.
It uses HTML5, CSS3, JavaScript and AJAX to accomplish
its work for laying out pages with minimal scripting.

4. JQUERY
MOBILE INSTALL
4
Adding jQuery Mobile to Your Web Pages
There are two ways to add jQuery Mobile to your
web site. You can:
 Link to a jQuery Mobile library stored at a CDN
(recommended)
 Link to a jQuery Mobile library stored at your
computer

5. GETTING STARTED
5
<meta name="viewport" content="width=device-width, initial-scale=
1">
<link rel="stylesheet" href="http://code.jquery.com/mobil
e/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-
1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.
mobile-1.4.4.min.js"></script>

6. JQUERY CSS CLASSES
6
 Global Classes
 Button Classes
 Icon Classes
 Theme Classes
 Grid Classes
http://www.w3schools.com/jquerymobile/jquerymobile_ref_css.asp

7. EXAMPLE1
7
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>Welcome!</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

8. JQUERY MOBILE
BUTTON
<input type="button" value="Button">
<button class="ui-btn">Button</button>
<a href="#anylink" class="ui-btn">Button</a>
8

9. EXAMPLE2
9
<div data-role="main" class="ui-content">
<p>Normal / Default button:</p>
<a href="#pagetwo" class="ui-btn">Go to Page Two</a>
<p>Inline button:</p>
<a href="#pagetwo" class="ui-btn ui-btn-inline">Go to Page Two</a> </div>
<div data-role="footer"> <h1>Footer Text</h1> </div></div>
<div data-role="page" id="pagetwo">
<div data-role="header"> <h1>Welcome To My Homepage</h1></div>
<div data-role="main" class="ui-content"><p>Inline buttons (will appear side
by side as long as the screen lets it):</p>
<a href="#pageone" class="ui-btn ui-btn-inline">Go to Page One</a>
<a href="#pageone" class="ui-btn ui-btn-inline">Go to Page One</a>
<a href="#pageone" class="ui-btn ui-btn-inline">Go to Page One</a> </div>

10. 10
EXAMPLE2(CONT.)

11. EXAMPLE 3 (TRY TO DO IT)
11
<h1>Welcome To My Homepage</h1>
<div data-role="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Search</a></li>
</ul>
</div>

12. 12

13. EXAMPLE
13