JQuery JQueryMobile
Concepts
jMobile web pages consist of different pages:
<div data-role="page" id="p1">content p1</div> <div data-role="page" id="p2">content p2</div>
API
jQuery()
- $() is short of jQuery()
- 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 #
data roles
- uses the data-role attribute
data-roles
button role
content role
data-position="fixed"
header role
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