Summary of html5 page switching effects and Modal Dialog Box usage, html5 page Switching

Summary of html5 page switching effects and Modal Dialog Box usage, html5 page Switching
This article mainly introduces various html5 page switching effects and Modal Dialog Box usage summary. It gives a detailed introduction to the use of various HTML5 page elements, which is of great practical value, for more information, see

This article provides a detailed summary of html5 page switching effects and Modal Dialog Box usage. Share it with you for your reference. The specific analysis is as follows:

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:

The Code is as follows: <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 backend button because of the application requirements. You can 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:

The Code is as follows: <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 to implement it, or implement it through extension:
The Code is as follows: $. 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:

The Code is as follows: <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:

The Code is as follows: <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:

The Code is 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:

The Code is as follows: <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:
The Code is as follows: <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:

The Code is as follows: <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" shows the Compact relationship between buttons. For example:

The Code is as follows: <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 native form element of html. To prevent the mobile framework from automatically rendering the element, in the framework, we introduced a control parameter "none" in the data-role attribute ". Using this attribute parameter will display the element in the html native state.
For example:

The Code is as follows: <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:

The Code is as follows: <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.
For example:
The Code is as follows: $ ('ul '). listview ('refresh ');
The above are the basic rules for building interfaces using jQuery Mobile.

I hope this article will help you with HTML5 program design.