JQuery JQueryMobile

Concepts

JQuery is a JavaScript library. With jQuery you select (query) HTML elements and perform actions on them. Basic syntax is:

$(selector).action()

All selectors in jQuery start with the dollar sign and parentheses:

$(<Selector>)

There are different Selectors:

1. id selector like $("#id")
2. element selector like $("p")
3. class selector like $(".classname")
4. ... (complete list see here)

There are multiple event methods to react on specific events like

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

Mobile Pages

jQuery Mobile is a touch-optimized web framework for creating mobile web applications. jQuery Mobile is built on top of the jQuery library. jMobile web pages consist of different pages (data-role="page") regularly as part of a single HTML file and each with a header, content and footer section:

<div data-role="page" id="p1" data-title="Title">

<div data-role="header" id="p1">... <div data-role="content" id="p1">... <div data-role="footer" id="p1">...

</div> 
<div data-role="page" id="p2"> 
  ...
</div>

Transition to another page is often implementet as

<a href="#p2">...</a> // page inside the same html
<a href="xyz.html">...</a> // new html page loaded via Ajax
<a href="" data-rel="back">...</a> // back button

When the HTML file is loaded, the first page in the body of the file is displayed. If the application is split to multiple html pages, first page is loaded normally.

Templates

A good reference can be found here:

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

Events

As of version 1.7 bind an event to a function by the on() function , which replaces all old binding types:

$( "#members li a" ).on( "click", function( e ) {} );  

Obsolete:

$(document).bind("mobileinit", function () { Notes.controller.init(); });
$("p").click(function() { ... });
$("p").hover(function() { ... });
$( "#members li a" ).live( "click", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );

JQuery Mobile Events

jQuery Mobile offers several custom events that build upon native events to create useful hooks for development. The sequence can be found here:

• mobileinit
• pagechange
• swipe
• swipeleft
• swiperight
• tap
• taphold

data roles

• uses the data-role attribute

content role

Obviously just convention without impact.

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

HTML Tag extensions

<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"
rel="[external|...]"

<select>

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

<ul>

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

API

The $ sign is special and important character. $() 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>'});

ajax()

There are two version ajax(url,options) and ajax(options) (offical doc), but in most cases the latter is used. Options is an array of key value pairs:

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

returns a jQuery XMLHttpRequest (jqXHR) object.

jQuery()

• $() is short of jQuery()

getJSON()

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

is equivalent to ajax().

Patterns

Implement a dialog

• see UweHeuer app -> mobile.html and MobileController.js for ajax errors

Link, Hints and Dialogs

• http://stackoverflow.com/questions/25364868/jqm-taphold-event-does-not-prevent-click-event

Resources

• Eine mobile App mit HTML5 erstellen: Vieles klappt, manches nicht
• jQuery mobile examples