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:
+jQuery Mobile provides a set of touch-friendly UI widgets and an 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.
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.
There are a few ways to make 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 it. These special HTML5 data- attributes are used throughout jQuery Mobile to transform basic markup into a widget. You can add an icon with the data-icon attribute and optionally set its position with the data-iconpos attribute.
<a href="#" data-role="button" data-icon="star">Star button</a>
@@ -68,10 +68,10 @@ Make a button
Make a listview
- 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".
+ 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 filter with, you guessed it, data-filter="true".
-<ul data-role="listview" data-inset="true" 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>
@@ -90,7 +90,7 @@ Make a listview
Make a collapsible block
- 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".
+ It's easy to make a collapsible block that can be toggled open and close to show or hide its content. Simply add the data-role="collapsible" attribute to a div container followed by a header element (H1-H6) and any HTML-Markup. jQuery Mobile will wrap your markup into a container, that is collapsed by default and hidden/shown when its header is clicked. Optionally you can set the content-background and border with the data-content-theme attribute like shown below.
<div data-role="collapsible" data-content-theme="c">
@@ -133,7 +133,7 @@ My Page
Tweak the theme
- 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.
+ Don't like black? Fine. jQuery Mobile has a robust 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.
My Page