Here are the list of data-role attributes in jQuery Mobile.
data-role="page"
which allows jQuery Mobile to treat this div as a single page.
data-role="content"
This applies some padding and other styles and designates this div as the container for the content section of the page.
data-rel="dialog"
This is allows jQuery Mobile to display the linked element as a dialog page instead of a standard page.
data-rel="back"
This attribute sends the browser back one step in history. This is why the href has an empty anchor value.
data-role="button"
jQuery Mobile uses this attribute to transform the standard link into a fully styled button.
data-role="header"
This tells jQuery Mobile to apply the necessary header styles to that section including any custom themes that have been defined.
data-role="footer"
This tells jQuery Mobile to apply the necessary footer styles to that section including any custom themes that have been defined.
data-role="collapsible"
This is the container that will be collapsed on page load. Collapsible content displays a “+” or “-” on a title bar, to show the collapsed state.
data-role="navbar"
A navigation toolbar, or navbar, is a widget built into jQuery Mobile that allows you to add navigation links to your page. Similar to the built-in grid system, the navbar is capable of containing five columns. To add a navbar to your page, you must use a container element with an attribute of data-role="navbar". Inside the container you must have an unordered list with each column inside an li element.
data-role="controlgroup"
A control group is a container that surrounds the buttons and applies either a vertical or horizontal style to them so that they appear to be one long button that has been sliced into portions.
data-role="fieldcontain"
This puts the label and the input on the same line when there is room for both. If the screen is too narrow to display both on the same line, then they will still be on different lines.
data-role="listview"
To make a standard list in jQuery Mobile you follow the same setup only you need to add an attribute of data-role="listview" to the ul element.
data-role="list-divider"
This works the same as it does in the standard list allowing this particular element to act as a separator. Even though it is an li element inside an ol element, it will not be numbered.
data-role="list-divider"
This attribute changes the display styles of the li element to help create grouped content. The text within the element is displayed like a title to help users understand the grouping.
data-role="slider"
To create a flip toggle switch you need to start with a select element.
data-role="page"
which allows jQuery Mobile to treat this div as a single page.
data-role="content"
This applies some padding and other styles and designates this div as the container for the content section of the page.
data-rel="dialog"
This is allows jQuery Mobile to display the linked element as a dialog page instead of a standard page.
data-rel="back"
This attribute sends the browser back one step in history. This is why the href has an empty anchor value.
data-role="button"
jQuery Mobile uses this attribute to transform the standard link into a fully styled button.
data-role="header"
This tells jQuery Mobile to apply the necessary header styles to that section including any custom themes that have been defined.
data-role="footer"
This tells jQuery Mobile to apply the necessary footer styles to that section including any custom themes that have been defined.
data-role="collapsible"
This is the container that will be collapsed on page load. Collapsible content displays a “+” or “-” on a title bar, to show the collapsed state.
data-role="navbar"
A navigation toolbar, or navbar, is a widget built into jQuery Mobile that allows you to add navigation links to your page. Similar to the built-in grid system, the navbar is capable of containing five columns. To add a navbar to your page, you must use a container element with an attribute of data-role="navbar". Inside the container you must have an unordered list with each column inside an li element.
data-role="controlgroup"
A control group is a container that surrounds the buttons and applies either a vertical or horizontal style to them so that they appear to be one long button that has been sliced into portions.
data-role="fieldcontain"
This puts the label and the input on the same line when there is room for both. If the screen is too narrow to display both on the same line, then they will still be on different lines.
data-role="listview"
To make a standard list in jQuery Mobile you follow the same setup only you need to add an attribute of data-role="listview" to the ul element.
data-role="list-divider"
This works the same as it does in the standard list allowing this particular element to act as a separator. Even though it is an li element inside an ol element, it will not be numbered.
data-role="list-divider"
This attribute changes the display styles of the li element to help create grouped content. The text within the element is displayed like a title to help users understand the grouping.
data-role="slider"
To create a flip toggle switch you need to start with a select element.
0 comments:
Post a Comment