JQuery JQueryMobile: Difference between revisions
| Line 10: | Line 10: | ||
*getting attributes of elements: $('<element name>').attr('<attribute name>') | *getting attributes of elements: $('<element name>').attr('<attribute name>') | ||
*setting attributes of elements: $('a').attr({<attribute name>: '<value>', <attribute name>: '<value>'}); | *setting attributes of elements: $('a').attr({<attribute name>: '<value>', <attribute name>: '<value>'}); | ||
*id names are prefixed with '''#''' | |||
===data roles=== | ===data roles=== | ||
Revision as of 19:35, 1 June 2014
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