jQuery Mobile provides a set of touch-friendly UI widgets and AJAX-powered navigation system to support animated page transitions. Building your first jQuery Mobile page is easy, here's how:
+ +Pop open your favorite text editor and paste in the page template below. In the head, a meta viewport tag and references to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN are all you need to get started. In the body, add a div with a data-role of page to hold your page contents.
+<!DOCTYPE html>
+<html>
+<head>
+<title>Page Title</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><!-- /page -->
+</body>
+</html>
+All the normal HTML elements and styles work as you'd expect - headings, lists, paragraphs. Write your own custom styles to create custom layouts or designs by adding a custom stylesheet to the head and just go to town. There is no required markup in your page. In fact, even the page wrapper is optional.
+ +There are a few ways to make a buttons, but lets turn a link into a button so it's easy to click. Just start with a link and add a data-role="button" attribute to the link. These are special HTML5 data- attributes used throughout jQuery Mobile to transform basic markup into a widget. Add an icon with the data-icon attribute.
+<a href="#" data-role="button" data-icon="star">Star button</a>
+jQuery Mobile includes a diverse set of common listviews that are basically built from lists with a data-role="listview". Here is a simple linked list that has a role of listview. We're going to make this look like an inset module by adding a data-inset="true" and add a dynamic search filer with, you guessed it, data-filter="true".
+<ul data-role="listview" data-inset="true" data-filter="true";>
+ <li><a href="#">Acura</a></li>
+ <li><a href="#">Audi</a></li>
+ <li><a href="#">BMW</a></li>
+ <li><a href="#">Cadillac</a></li>
+ <li><a href="#">Ferrari</a></li>
+</ul>
+
+It's easy to make a collapsible block that toggles open and closed content-collapsiblejQuery Mobile includes a diverse set of common listviews that are basically built from lists with a data-role="listview". Here is a simple linked list that has a role of listview. We're going to make this look like an inset module by adding a data-inset="true" and add a dynamic search filer with, you guessed it, data-filter="true".
+<div data-role="collapsible" data-content-theme="c">
+ <h3>Click me to expand!</h3>
+ <p>I'm the collapsible content block.</p>
+</div>
+I'm the collapsible content block.
+The framework contains a full set of form elements that automatically are enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no data-role needed. Be sure to wrap these in a form element and always properly associate a label to every form element.
+<form>
+ <label for="slider-0">Input slider:</label>
+ <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
+</form>
+Add a header toolbar by adding a div. Set the data-role to header and add a heading tag inside (any heading from H1-H6 can be used).
<div data-role="header">
+ <h1>My Page</h1>
+</div>Don't like black? Fine. jQuery Mobile has robust a theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a data-theme="e" attribute to the header div to turn it yellow. Try different swatch letters in default theme from a-e.
Extra credit: try adding a data-theme to any of the other widgets on this page: page wrapper, buttons, lists, even the input for the slider - same deal.
When you're ready to build a custom theme, use ThemeRoller to drag and drop, then download a custom theme.
+ +This is just scratching the surface of all the cool things you can build with jQuery Mobile with little effort. Be sure to explore linking pages, adding animated page transitions, and creating dialogs. Use the data-attribute reference to try out some of the other data- attributes you can play with.
More of a developer? Great, forget everything we just covered (kidding). If you don't want to use the data- attribute configuration system, you can take full control of everything and call plugins directly because these are all just standard jQuery plugins built with the UI widget factory. Be sure to dig into global configuration, events, and methods. Then read up on scripting pages, generating dynamic pages, and building PhoneGap apps.
Nothing to see here folks.
+View the documentation home page