JQuery JQueryMobile

Concepts

Pages

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>

When the HTML file is loaded, the first page in the body of the file is displayed

Templates

A good reference can be found here:

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

API

The $ sign is special and important charactor. $() is used for element selection like:

$(this).hide() - hides the current element.

$("p").hide() - hides all p elements.

$(".test").hide() - hides all elements with class="test", class names are prefixed with .
 
$("#test").hide() - hides the element with id="test", id names are prefixed with #

$("p:first") - selects the first p element

getting attributes of elements: $('<element name>').attr('<attribute name>')
setting attributes of elements: $('a').attr({<attribute name>: '<value>', <attribute name>: '<value>'});

Events

JQuery Events

jQuery Mobile offers several custom events that build upon native events to create useful hooks for development:

mobileinit
pagechange

To bind them to a function use:

$(document).bind("mobileinit", function () { Notes.controller.init(); });

Standard Events

To assign a click event to all paragraphs on a page and to define behavior:

$("p").click(function() { ... });

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

button role

content role

controlgroup role

footer role

data-position="fixed"

header role

listview role

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

navbar role

page role

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

<a>

data-role="[button|...]"
data-icon="[home|grid|info]"
data-iconpos="notext"
data-transition="slidedown" // defines the optical transition to another page
data-rel="dialog"
data-inline="true"

<select>

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

<ul>

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