Summary of the usage of various page switching effects and modal dialog boxes in html5

This article mainly introduces the use of various page switching effects and modal dialog boxes for you. It introduces the techniques of using various page elements of HTML5 in more detail. It is very practical. Friends who need it can refer to it.

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

The data-transition property can define the animation effect of page switching.

For example: <a href=index.html data-transition=pop>I'll pop</a>

data-transition parameter table:

Parameter description

slide from right to left to page

slideup slides up from the bottom

slidedown slides from top to bottom in

pop gradually expands from the center

fade gradually appears

flip 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.

A modal dialog is a pseudo-floating layer with a rounded title bar and a close button for exclusive events. Any structured page can be used to implement modal dialog applications using the data-rel=dialog link.

For example: <a href=foo.html data-rel=dialog>Open dialog</a>

This page switching effect can also use the data-transition parameter effect of the standard page. It is recommended to use pop, slideup and flip parameters to achieve better results.

This modal dialog box will generate a close button by default, which is used to return to the parent page. On devices with weak scripting capabilities, you can also add a link with data-rel=back to implement the close button.

For devices that support scripts, you can directly use href=# or data-rel=back to achieve shutdown. You can also use the built-in close method to close the modal dialog box, such as: $('.ui-dialog').dialog('close').

Since 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 retreat to this page. For example, if you click a link in page A to open the dialog box B, the operation is completed and the dialog box is closed, and then jump to page C. At this time, you click the back button of the browser, and you will return to page A, not page B.

Toolbars are mainly used in header, footer and other areas, and are used to support and implement the application of business functions in the page. jQuery Mobile provides a relatively complete solution.

The toolbar is divided into three applications: header bar, footer bar and navigation (nav bar).

Among them, the title and footer are applied in some different ways in the page. The default toolbar is positioned in an inline way. This positioning method can achieve maximum compatibility, including good optimization for devices with poor script and css compatibility.

Another method is to fix it, which can also be static. This positioning method allows the toolbar to always be kept at the top or bottom of the screen. And you can accept click events to display/hide the toolbar, which has achieved the purpose of maximizing the use of screen space.

Implementation method: Add data-position=fixed attribute to the title and footer areas.

The title container is a display control for the page header area, which is mainly used to display the title and the main operation area.

Structure code: