JQuery JQueryMobile

Concepts

jMobile web pages consist of different pages often as part of a single HTML file and each with a header, content and footer section:

<div data-role="page" id="p1">content p1 <div data-role="page" id="p2">content p2

Transition is often implementet as

<a href="p2">...</a>

Templates

A good reference can be found here:

<script id="bookTemplate" type="text/x-jQuery-tmpl">

API

• getting attributes of elements: $('<element name>').attr('<attribute name>')
• setting attributes of elements: $('a').attr({<attribute name>: '<value>', <attribute name>: '<value>'});
• id names are prefixed with #
• class names are prefixed with .

jQuery()

• $() is short of jQuery()

getJSON()

$.getJSON('car-sale-report.json', function() {
  //callback
});

is equivalent to below

$.ajax({
  url: url,
  dataType: 'json', //json data type
  data: data,
  success: callback,
  error: callback
});

data roles

• uses the data-role attribute

data-roles

footer role

data-position="fixed"

listview role

data-inset="true" // creates margins around the list within a content area

page role

data-theme="[a|b|c]" define standard colors and fonts

<a>

data-icon="[home|grid|info]"
data-iconpos="notext"
data-transition="slidedown" // defines the optical transition to another page

<select>

data-native-menu=[true|false]" // enables self customization of select optic

<ul>

data-role="listview"
data-filter="true" // makes the list searchable

Resources

• personal account
• jQuery mobile examples