Html5 page switching effects and Modal Dialog Box

Page Animation:
The data-transition attribute defines the animation effect of page switching.
Example: <a href = "index.html" data-transition = "pop"> I'll pop </a>
Data-transition parameter table:
Parameter description
Slide the page from the right to the left
Slideup slides up from the bottom
Slidedown
Pop gradually expands from the center
Fade-in
Flip
Note: If you want to display the back button on the target page, you can add the data-direction = "reverse" attribute to the link. This attribute is the same as the original data-back = "true, I don't know which attribute will be retained in the official version.

Modal Dialog Box
The modal dialog box is a pseudo floating layer with a rounded corner title bar and a button for exclusive events. Any structured page can be used with the data-rel = "dialog" link to implement the modal dialog box application.
Example: <a href = "foo.html" data-rel = "dialog"> Open dialog </a>
The data-transition parameter of the standard page can also be used for the page switching effect. We recommend that you use the "pop", "slideup", and "flip" parameters to achieve better results.
The off button is generated in the modal dialog box by default to return to the parent page. You can also add a link with data-rel = "back" to enable the close button on a device with weak script capabilities.
You can use href = "#" or data-rel = "back" to disable scripts. You can also use the built-in "close" method to close the modal dialog box, for example, $ ('. ui-dialog'). dialog ('close ').
Because the modal dialog box is a temporary page that is dynamically displayed, this page will not be saved in the hash table, which means we cannot go back to this page, for example, you click A link on page A to open the dialog box B. After the operation is complete and the dialog box is closed, you can jump to Page C. At this time, you click the back button of the browser and return to page, instead of B page.

Tool bar
Tool bar is mainly used in "header", "footer", and other areas to support and implement the application of business functions on the page. JQuery Mobile provides a complete solution.
The tool bar consists of three parts: header bar, footer bar, and navigation bar.
The title and footer have some different application methods on the page. By default, the toolbar is positioned in inline. This positioning method can achieve maximum compatibility, this includes optimizations for devices with poor script and css compatibility.
The other is the floating (fixed) Positioning method, which can also be "static" positioning, which can keep the toolbar at the top or bottom of the screen. You can also click an event to display or hide the toolbar to maximize the use of the screen space.
Implementation Method: add the data-position = "fixed" attribute to the title and footer areas.

Title container
The title container is the display control of the page header area. It is mainly used to display the title and main operation areas.
Structure Code:
<Div data-role = "header">
<H1> Page Title </Div>
To facilitate page interaction, a back button is automatically generated on the left side of the title container after page switching, which simplifies our development complexity, however, sometimes we do not need this button because of the application requirements.
Add the data-backbtn = "false" attribute to the title container to Prevent Automatic Creation of the backend button.
You can place a button on the left and right of the title container. After the auto-generated back button is blocked, you can customize the button at the back button.
For example:
<Div data-role = "header" data-position = "inline" data-backbtn = "false">
<A href = "index.html" data-icon = "delete"> Cancel </a>
<H1> Edit Contact <A href = "index.html" data-icon = "check"> Save </a>
</Div> If You Need to customize the text in the default back button, you can use the data-back-btn-text = "previous" attribute, or implement it by means of extension: $. mobile. page. prototype. options. backBtnText = "previous ".
If you do not use a standard structure to create a title area, the framework will not automatically generate the default button.

Footer container
The structure of the footer container is basically the same as that of the title container. You only need to set the parameter of the data-role attribute to "footer ".
For example:
<Div data-role = "footer">
<H4> Footer content </Div>
Compared with the title container, the footer container has more flexibility. It does not allow only two buttons like the title container, and does not place the buttons on the left and right by default, by default, buttons in the footer are arranged from left to right, and more buttons are placed.
You only need to add a class = "ui-bar" to the footer container to turn the footer into a toolbar. You can add neat buttons in the footer without setting any layout style.
For example:
<Div data-role = "footer" class = "ui-bar">
<A href = "index.html" data-role = "button" data-icon = "delete"> Remove </a>
<A href = "index.html" data-role = "button" data-icon = "plus"> Add </a>
<A href = "index.html" data-role = "button" data-icon = "arrow-u"> Up </a>
<A href = "index.html" data-role = "button" data-icon = "arrow-d"> Down </a>
</Div>
If we need a set of link effects, we can write as follows:
<Div data-role = "footer" class = "ui-bar" data-position = "inline">
<Div data-role = "controlgroup" data-type = "horizontal">
<A href = "index.html" data-icon = "delete"> Remove </a>
<A href = "index.html" data-icon = "plus"> Add </a>
<A href = "index.html" data-icon = "arrow-u"> Up </a>
<A href = "index.html" data-icon = "arrow-d"> Down </a>
</Div>
</Div>
Tip: You can use the same footer for multiple pages by using the data-id attribute.

Navigation
A navigation container is a button group control that can hold up to five buttons per line"
Property div to accommodate these buttons.
Example:
<Div data-role = "footer">
<Div data-role = "navbar">
<Ul>
<Li> <a href = "a.html" class = "ui-btn-active"> One </a> </li>
<Li> <a href = "B .html"> Two </a> </li>
</Ul>
</Div> <! --/Navbar -->
</Div> <! --/Footer -->
Add class = "ui-btn-active" to the default button"
If the number of buttons exceeds 5, the navigation container will be automatically allocated to multiple rows as appropriate.

Button
You can declare any link on the page as the display style of the button through data-role = "button. For unified style, the Framework automatically formats the form class buttons as jQuery Mobile buttons during page loading without adding the data-role attribute.
The framework contains a set of commonly used icons that can be used for buttons. You can use parameters in the data-icon attribute to define different icon effects.
For example, <a href = "index.html" data-role = "button" data-icon = "delete"> Delete </a>
Data-icon native parameter list

In addition to displaying icons on the left by default, you can also use the data-iconpos attribute to define the relationship between the icon and the text position.
Data-iconpos parameter list:
Parameter Effect
Right icon on the right side of the text
Top icon on Text
The bottom icon is under the text
The data-iconpos = "notext" attribute allows the button to hide text.
Inline Style
In the Framework, the buttons are horizontally exclusive by default and adaptive Based on the screen width. However, multiple buttons are often displayed in a row in the application, at this time, we need to know a new attribute called the inline mode.
Data-inline = "true ".
For example:
<Div data-inline = "true">
<A href = "index.html" data-role = "button"> Cancel </a>
<A href = "index.html" data-role = "button" data-theme = "B"> Save </a>
</Div>

 
Button Group
The jQuery Mobile framework displays several buttons in groups. data-role = "controlgroup" is used to display buttons.
Compact relationship between them. For example:
<Div data-role = "controlgroup">
<A href = "index.html" data-role = "button"> Yes </a>
<A href = "index.html" data-role = "button"> No </a>
<A href = "index.html" data-role = "button"> Maybe </a>
</Div>
You can add the data-type = "horizontal" attribute if you want to arrange buttons horizontally.
Form application
The jQuery Mobile framework encapsulates new forms of representation for native html form elements and optimizes operations on touch screen devices. The form element is automatically rendered as a jQuery Mobile element on the Framework page.
The use of form elements is the same as that of the default html method, and the Post and get methods can be used to submit data. However, you must note the element ID naming problem, in the general rules, the same page cannot contain the same ID. In jQuery Mobile, because it allows multiple pages in the same DOM, therefore, it is recommended that the ID of the form element be unique throughout the project to prevent errors caused by ID issues.
By default, the Framework automatically renders the style of the form Element in the standard page. Once the rendering is successful, the control element can be operated using functions in jQuery. In some cases, we need to use the html native form element to prevent the mobile framework from
In the frame, a control parameter "none" is introduced in the data-role attribute ". Using this attribute parameter will display the element in the html native state.
For example:
<Select name = "foo" id = "foo" data-role = "none">
<Option value = "a"> A </option>
<Option value = "B"> B </option>
<Option value = "c"> C </option>
</Select>

 
List applications
Information List is a relatively frequent control used in development applications. It is used for data display, navigation, and data list. In order to adapt to different information content, the list is also displayed in a variety of forms.
The code structure of the list is implemented by means of ordered and Unordered Lists. As long as data-role = "listview" is declared on ul or ol, the framework can be rendered as a list. For example:
<Ul data-role = "listview" data-theme = "g">
<Li> <a href = "acura.html"> Acura </a> </li>
<Li> <a href = "audi.html"> Audi </a> </li>
<Li> <a href = "bmw.html"> BMW </a> </li>
</Ul>
If you want to add data to the list, you must execute the refresh () method after loading the data to update the list.
Example: $ ('ul '). listview ('refresh ');
The above are the basic rules for interface construction using jQuery Mobile. In the future, we will improve the technical support for Ajax and dynamic page creation.