JQuery Mobile

1. Query Mobile uses a very simple and powerful approach to define the content of the webapp
2. JQuery Mobile uses an unobtrusive approach, meaning that our HTML documents will work even without jQuery Mobile loading properly
3. The main unit of the framework is the page.
4. A page is just a div element with a specific role
5. One HTML document can host one page or many pages inside the same file
6. We will be able to link to pages inside the same HTML document, or to pages on external HTML documents, using simple HTML markup, such as the a tag.

1. jQuery Mobile uses standard HTML markup, such as the div tag
2. To define what the framework should do with that div, we define a role
3. A role in jQuery Mobile is defined using the attribute data-role
4. For example,

   <div data-role="page">
   

1. The usage of data-<something> or data-* attributes on an HTML tag is an HTML5 feature called custom data attributes that allows us to define whatever attribute we want to add to a tag while maintaining an HTML-valid document. It is useful for adding custom metadata to tags without invalidating the markup.

2. jQuery Mobile often uses this ability to define custom attributes for the framework
3. data-role is not a new HTML5 new attribute

Role                Description

page                Defines a page, the unit that jQuery Mobile uses to show content 
header              Header of a page
content             Content of a page
footer              Footer of a page
navbar              Defines a navigation bar, typically inside a header button Renders a visual button
controlgroup        Renders a component
collapsible         Collapsible panel of content inside a page 
collapsible-set     Group of collapsible panels (accordion) 
fieldcontain        Container for form fields
listview            Content of multiple items as a list
dialog              Dialog page
slider              Visual slider for Boolean values
nojs                Element that will be hidden on jQuery Mobile’s compatible browsers