Jquery mobile web (2), jquerymobile

Jquery mobile web (2), jquerymobile

Button
Data-role = "button" converts a hyperlink to a button.
A button component with an icon.
Provides 18 commonly used icons data-icon = ""
1. arrow-1 left arrow
2. right arrow of arrow-r
3. arrow above arrow-u
4. arrow-d Down arrow
5. delete
6. plus sign
7. minus signs
8. check
9. gear
10. refresh
11. forward
12. back
13. grid
14. stat stars
15. alert prompt
16. info Information
17. home Homepage
18. search

　　Icon position
Data-iconpos = ""
Left right top bottom
By setting data-iconpos = "notext", you can create a button with no text and only an icon.
Custom icon button.
For example, data-icon = "myapp-email" myapp-email is the name of a custom icon, and the css style name is as follows. ui-icon-myapp-email and set the icon as the background in the style change.
Data-inline = "" When the attribute value is true, the width of the button automatically adapts to the length of the button text content and Icon combination.
<A href = "#" data-role = "button" data-icon = "home" data-inline = "true"> home </a>
Buttonn button with grouping Function
Add a div to the outermost layer of the button and set the data-role attribute value to controlgroup.
<Div data-role = "controlgroup">
<A data-role = "button"> </a>
<A data-role = "button"> </a>

</Div>

Data-type = "horizontal" converts vertical buttons into horizontal distribution.

Data-rel = "back" jQuery Mobile ignores the href attribute of Element a and simulates a button similar to a browser.

The Footer Toolbar of multiple buttons.
The footer toolbar and the header toolbar have some differences in layout. The buttons added in the footer toolbar are automatically set to the inline mode and automatically adapt to the width of the text content.
To implement a set of buttons, set a div in the outermost layer to set the data-role attribute value to controlgroup and set the data-type attribute value to horizontal, indicating that the buttons are horizontally arranged.
Navigation bar toolbar.
<Footer data-role = "header">
<Nav data-role = "navbar">
<Ul>
<Li>
<A href = "#" class = "ui-btn-active" data-icon = "home" data-iconpos = "top"> homepage </a>
</Li>
<Li>
<A href = "#" data-icon = "search" data-iconpos = "top"> search </a>
</Li>
<Li>
<A href = "#" data-icon = "info" data-iconpos = "top"> homepage </a>
</Li>
</Ul>
</Nav>
</Footer>

Define fixed Toolbar
<Header data-role = "header" data-position = "fixed">
<H1> fixed position toolbar </Header>
Full Screen Toolbar
Set the data-position attribute value to fixed in the header or footer area of the page view, and set the data-fullscreen attribute to true on the div element of the page or view.
Page or try to use full screen mode.

Content Area format layout.

Grid layout.
The Code is as follows:
<Div class = "ui-grid-a">
<Div class = "ui-block-a">
<Input type = "reset" data-theme = "c" value = "reset">
</Div>
<Div class = "ui-block-B">
<Input type = "reset" data-theme = "B" value = "submit">
</Div>
</Div>

Ui-grid-a two columns
Ui-grid-B three columns
Ui-grid-c Four Columns
Ui-grid-d five columns

The three-column grid layout is as follows:
<Div class = "ui-grid-B">
<Div class = "ui-block-a">
<Input type = "reset" data-theme = "a" value = "a">
</Div>
<Div class = "ui-block-B">
<Input type = "reset" data-theme = "B" value = "B">
</Div>
<Div class = "ui-block-c">
<Input type = "reset" data-theme = "c" value = "c">
</Div>
</Div>
Multiple columns and so on.