Editing 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''':
# id selector like $("#id")
# element selector like $("p")
# class selector like $(".classname")
# ... (complete list see [http://www.w3schools.com/jquery/jquery_selectors.asp here])

There are multiple event methods to react on specific events like
 $("p").click(function(){
   $(this).hide();
 });

===Libraries===
In order to use JQuery and JQuery Mobile include:
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <link rel="stylesheet" href="resources/css/jquery.mobile-x.x.x.min.css" />
 <script src="https://code.jquery.com/jquery-x.x.x.min.js" type="text/javascript"></script>
 // event handler for mobileinit event
 <script src="resources/js/libs/jquery.mobile-x.x.x.js" type="text/javascript"></script>

===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:
 &lt;div data-role="page" id="p1" data-title="Title">
   &lt;div data-role="header" id="p1">...</div> 
   &lt;div data-role="content" id="p1">...</div> 
   &lt;div data-role="footer" id="p1">...</div> 
 &lt;/div> 
 &lt;div data-role="page" id="p2"> 
   ...
 &lt;/div>

====Page Transition====
Transition to another page is often implementet as 
 // html
 <a href="'''#'''<PageID>">...</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
 
 // javascript
 $.mobile.changePage(<PageID>);
 window.location.href = "mobile.html";
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.

====Passing Data between Pages====
There are different methods:
* because everything is loaded during the HTML file load one option is a global data object in the global namespace
* to get data from the previous page you can register a function for the <code>pagebeforechange</code> event, the data parameter has a <code>prevPage</code> and a <code>toPage</code> member

===Templates===
A good reference can be found [http://stephenwalther.com/archive/2010/11/30/an-introduction-to-jquery-templates here]:
 <script id="bookTemplate" type="text/x-jQuery-tmpl">

===Events===

In JQuery (not in JQM, see pageinit event below) when the DOM is loaded completely the document.ready() function is called therefore any initialization should go here:
 $(document).ready(function() {
   ...
 });

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 [http://api.jquerymobile.com/category/events/ events] to create useful hooks for development. The sequence can be found [http://bradbroulik.blogspot.com.br/2011/12/jquery-mobile-events-diagram.html here] and a concept description [http://www.gajotres.net/document-onpageinit-vs-document-ready/ here]:
*mobileinit // any event handler <code>($(document.bind("mobileinit", ...)</code>hast to be defined before JQM include because it is fired immediately
*pagechange
*pageinit: in jQuery Mobile, Ajax is used to load the content of each page into the DOM as you navigate.Because of this, $(document).ready() will/may trigger before your first page is loaded and every code intended for a page manipulation will execute only after a page refresh
*swipe
*swipeleft
*swiperight
*tap
*taphold

===Icons===
* see http://demos.jquerymobile.com/1.4.5/icons/

===data roles===
*uses the '''data-role''' attribute

====button role==== 

====content role====
Obviously just convention without impact.

====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

===HTML Tag extensions===

====&lt;a>====
 href="..." // for page transitions see [[#Page_Transition|here]]
 data-role="['''button'''|...]"  // see [[#data-role|here]]
 data-icon="['''home'''|'''grid'''|'''info''', ...]" // see https://api.jquerymobile.com/icons/
 data-iconpos="notext"
 data-transition="slidedown" // defines the optical transition to another page
 data-rel="dialog"
 data-inline="true"
 rel="['''external'''|...]" // these links will cause a full page refresh with no animated transition.

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

====&lt;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) ([http://api.jquery.com/jquery.ajax/ offical doc]), but in most cases the latter is used. Options is an array of key value pairs:

 $.ajax({
   url: url,
   dataType: 'json', // type of data that you're expecting back from the server
   data: data, // data to be sent to the server
   success: callback, // has 3 parameter: data returned from server of type 'dataType', status string, XMLHttpRequest
   error: function (jqXHR, textStatus, errorThrown) // errorThrown is the text equivalent for the return code
 });

returns a jQuery XMLHttpRequest (jqXHR) object.

====jQuery()====
*'''$()''' is short of jQuery()


====getJSON()====
 $.getJSON('car-sale-report.json', function() {
   //callback
 });
 
is equivalent to [[#ajax.28.29|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==
* [http://emea.nttdata.com/blog/de/2013/07/17/eine-mobile-app-mit-html5-erstellen-vieles-klappt-manches-nicht/ Eine mobile App mit HTML5 erstellen: Vieles klappt, manches nicht]
* [http://www.w3schools.com/jquerymobile/jquerymobile_examples.asp jQuery mobile examples]