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>: 'jQuery-Kurs', <attribute name>: 'http://www.html-seminar.de/jquery.htm'});

data roles

• uses the data-role attribute

data-roles

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

<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

Resources

• personal account
• jQuery mobile examples