Jump to content

jQuery Mobile


Recommended Posts

Q:-What is jQuery Mobile?

Ans:-A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

Q:-How is it better?

Ans: -

  • Lightweight size and minimal image dependencies for speed.
  • Compatible with all major mobile, tablet, e-reader & desktop platforms - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, and all modern browsers with graded levels of support.
  • Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.
  • Touch and mouse event support streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API.

Q:-Is it Easy??

Ans:-Itz damn easy.

Create a basic page template

Pop open your favorite text editor, paste in the page template below, save and open in a browser. You are now a mobile developer!

In the body, a div with a data-role of page is the wrapper used to delineate a page, and the header bar (data-role="header") and content region (data-role="content") are added inside to create a basic page (these are both optional). These data- attributes are HTML5 attributes are used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.

<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Trolled</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<a href="#" data-role="button" data-icon="star">GizmoLord</a>
<ul data-role="listview" data-inset="true">
	<li><a href="#">Aryacooldude</a></li>
	<li><a href="#">Die2mrw007</a></li>
	<li><a href="#">NikShip</a></li>
	<li><a href="#">Hackrishna</a></li>
</ul>		
	</div><!-- /content -->

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

</body>

U can learn and Try out the Demo From here

jQuery mobile

Link to post
Share on other sites
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...