Summary of html5 various page switching effects and modal dialog box usage_html5 tutorial skills

This article summarizes in detail the various page switching effects and modal dialog usage of html5. Share it with everyone for your reference. The specific analysis is as follows:

Page animation:

The data-transition attribute can define the animation effect of page switching.
For example: I'll pop
data-transition parameter table:

Parameter description

slide slide in from the right to the left
slideup slide in from the bottom
slidedown slide in from the top
pop fade in from the center expand
fade fade in
flip flip

Note: If you want to display the back button in 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 if it will be in the official version. Which attribute will be retained.

Modal dialog

A modal dialog box is a pseudo-floating layer with a rounded title bar and a close button, used for exclusive event applications. Any structured page can use data-rel="dialog" links to implement modal dialog applications.
For example: Open dialog
This page switching effect can also use the data-transition parameter effect of the standard page. It is recommended to use the "pop", "slideup" and "flip" parameters for better results.
This modal dialog box will generate a close button by default to return to the parent page. On devices with weak scripting capabilities, you can also add a link with data-rel="back" to implement a close button.
For devices that support scripts, you can directly use href="#" or data-rel="back" to close it. You can also use the built-in "close" method to close the modal dialog box, for example: $('.ui-dialog').dialog('close').
Since the modal dialog box is a dynamically displayed temporary page, this page will not be saved in the hash table, which means that we cannot go back to this page. For example, you click a link to open it in page A. B dialog box, the operation is completed and the dialog box is closed, and then jumps to page C. At this time, if you click the back button of the browser, you will return to page A, not page B.

Toolbar

The toolbar is mainly used in the "header", "footer" and other areas to support and implement the application of business functions on the page. jQuery Mobile provides a relatively complete solution.
The toolbar is divided into three applications: header bar, footer bar and nav bar.
The title and footer have some different application methods in the page. The default toolbar is positioned inline. This positioning method can achieve maximum compatibility, including scripts and css. Devices with poor compatibility are well optimized.
The other is floating (fixed) positioning, which can also be called "static" positioning. This positioning method can keep the toolbar at the top or bottom of the screen. It can also accept click events to show/hide the toolbar, thus maximizing the use of screen space.
How to implement: Add the data-position="fixed" attribute to the title and footer areas.

Title Container

The title container is a display control in the header area of ​​the page. It is mainly used to display the title and main operation area.
Structure code:

Copy code

The code is as follows:

Page Title

In order to facilitate page interaction, it will automatically appear on the left side of the title container after the page is switched. Generating a back button can simplify our development complexity, but sometimes we do not need this back button due to application requirements. You can add the data-backbtn="false" attribute to the title container to prevent the back button. Created automatically.
A button can be placed on the left and right sides of the title container. After preventing the automatically generated back button, we can customize the button at the position of the back button.
For example:

Copy code

The code is as follows:

Cancel
< ;h1>Edit Contact
Save

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 through extension:

Copy the code

The code is as follows:

$.mobile.page.prototype.options.backBtnText = "previous"

If you are not using the standard structure to create the 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 header container. Just set the parameter of the data-role attribute to "footer".
For example:

Copy code

The code is as follows:

Footer content

The footer container has more flexibility than the header container, it does not Like the title container, only two buttons are allowed to be placed, and the buttons are not placed at the top of the left and right by default. The buttons in the footer are arranged from left to right by default, and there is no way to place more buttons.
Just add a class="ui-bar" to the footer container to turn the footer into a toolbar, where you can add neat buttons without setting any layout style.
For example:

Copy code

The code is as follows:

Remove
< ;a href="index.html" data-role="button" data-icon="plus">Add
Up
Down

If we need a set of link effects, we can write like this:

Copy code

The code is as follows:

Remove
Add
Up
Down

Tips : Multiple pages can use the same footer by using the data-id attribute.

Navigation

The navigation container is a button group control that can hold up to 5 buttons per row, using a div with data-role="navbar"
attribute to hold these buttons.
Example:

Copy code

The code is as follows:

• One


• Two

in the default button Add class="ui-btn-active"
If the number of buttons exceeds 5, the navigation container will automatically be displayed in multiple lines with the appropriate number.

Button

You can declare any link on the page to be the display style of the button through data-role="button". In order to unify the style, the framework will automatically format the form class buttons into jQuery Mobile style buttons when the page is loaded. There is no need to add the data-role attribute.
The framework contains a set of commonly used icons that can be used for buttons. Use the parameters in the data-icon attribute to define and display different icon effects.
For example:

Copy code

The code is as follows:

Delete

data-icon native parameter list

In addition to displaying the icon on the left by default, you can also use the data-iconpos attribute to define the positional relationship between the icon and the text.
data-iconpos parameter list:

Parameter effect:
right icon is on the right side of the text
top icon is above the text
bottom icon is below the text
data-iconpos="notext" attribute allows the button to hide the text.

Inline styles

By default in the frame, the buttons are exclusive horizontally and adaptive horizontally according to the screen width. However, in our applications, we often need to display multiple buttons in one row. At this time, we need to know a new feature called inline The mode attribute is
data-inline="true".
For example:

Copy code

The code is as follows:

Cancel
Save

Button group

The jQuery Mobile framework can display several buttons in groups, and data-role="controlgroup" is used to show the compact relationship between buttons. For example:

Copy code

The code is as follows:

Yes

Maybe

If button is required For horizontal arrangement, you can add data-type="horizontal" attribute.

Form application

The jQuery Mobile framework encapsulates new forms of expression for native html form elements and optimizes the operation of touch screen devices. The form element will be automatically rendered into a jQuery Mobile style element in the frame's page. The use of the
form element is the same as the default html method. You can also use the Post and get methods to submit data. However, it should be noted that the ID naming of the element is not allowed to appear in the same page in the conventional specification. In jQuery Mobile, since it allows multiple pages to exist in the same DOM, it is recommended that the ID naming of the form element be unique in the entire project to prevent errors caused by ID issues.
By default, the framework will automatically render the style of the form element in the standard page. Once successfully rendered, this control element will be able to be operated using functions in jQuery. In some cases, we need to use the native html form element. In order to prevent the mobile framework from automatically rendering this element, we introduce a control parameter "none" in the data-role attribute in the framework. Using this attribute parameter will cause the element to be displayed in its native HTML state.
For example:

Copy code

The code is as follows:

A
BC

List application

Information list is a relatively frequently used control in development applications. It is used for data display, navigation, data list, etc. In order to adapt to different information contents, lists are also presented in various forms.
The code structure of the list is implemented in ordered and unordered lists. As long as you declare data-role="listview" on ul or ol, you can let the frame render in the form of a list, for example:

Copy code

The code is as follows:

• Acura




• BMW

If you need to add data to the list, you need to execute the refresh() method to update the list after the data is loaded.
For example:

Copy code

The code is as follows:

$('ul').listview('refresh');

The above are the basic rules for using jQuery Mobile to build interfaces.

I hope this article will be helpful to everyone’s HTML5 programming design.