Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to achieve various page switching effects and modal dialogs in html5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The specific analysis is as follows:

Page animation:

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

For example: I'll pop

Data-transition parameter table:

Parameter description

Slide slides into the page from right to left

Slideup slides up from the bottom into

Slidedown slid from top to bottom

Pop gradually expands from the center

Fade gradual appearance

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, which is the same as the original data-back= "true". You don't know which attribute will be retained in the official version.

Modal dialog box

A modal dialog is a pseudo-floating layer with a rounded title bar and a close button for exclusive events. 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 that you use the "pop", "slideup" and "flip" parameters for better results.

This modal dialog box generates 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 the close button.

For devices that support scripts, you can use href= "#" or data-rel= "back" directly to shut down. 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 dynamic temporary page, so this page will not be saved in the hash table, which means that we can not go back to this page, for example, you click a link in the A page to open the B dialog box, the operation is done and close the dialog box, and then jump to the C page, when you click the browser's back button, you will return to page An instead of page B.

Tool bar

The toolbar is mainly used in "header", "footer" and other areas 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: title (header bar), footer (footer bar) and navigation (nav bar).

The title and footer are used in different ways on the page, and the default sidebar is located in an embedded (inline) way to achieve maximum compatibility, including good optimization for devices with poor script and css compatibility.

The other is fixed positioning, which can also be called "static" positioning, which keeps the toolbar at the top or bottom of the screen. And can accept the click event to show / hide the toolbar, which has achieved the goal of maximizing the use of screen space.

How to do this: add the data-position= "fixed" attribute to the title and footer area.

Title container

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

Structure code:

The code is as follows:

Page Title

In order to facilitate the interaction of the page, a false button is automatically generated on the left side of the title container after the page switch, which can simplify our development complexity, but sometimes we do not need this back button because of the needs of the application. We can add the back button attribute to the title container to prevent the automatic creation of the back button.

A button can be placed on the left and right side of the title container, and after blocking the automatically generated back button, we can customize the button at the position of the back button.

For example:

The code is as follows:

Cancel

Edit Contact

Save

If you need to customize the text in the default back button, you can use the data-back-btn-text= "previous" property or extend it:

The code is as follows:

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

If you do not use the standard structure to create the title area, the frame 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, as long as the parameter of the data-role property is set to "footer".

For example:

The code is as follows:

Footer content

The footer container is more flexible than the title container, it does not allow only two buttons like the title container, and does not default to the top of the left and right, the footer buttons are arranged from left to right by default, and how to place more buttons.

Just add a class= "ui-bar" to the footer container to turn the footer into a sidebar, and you can add neat buttons to it without setting any layout styles.

For example:

The code is as follows:

Remove

Add

Up

Down

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

The code is as follows:

Remove

Add

Up

Down

Tip: you can make multiple pages use the same footer by using the data-id property.

Navigation

The navigation container is a button group control that can hold up to five buttons per row, with a data-role= "navbar"

Property to hold these buttons.

Example:

The code is as follows:

One

Two

Add class= "ui-btn-active" to the default button

If the number of buttons exceeds 5, the navigation container will be automatically assigned to multiple lines with the appropriate number.

Button

You can declare any link in the page as the display style of the button through data-role= "button". In order to unify the style, the framework will automatically format the buttons of the form class into jQuery Mobile-style buttons when the page is loaded, without the need to add the data-role attribute.

The frame contains a set of commonly used icons that can be used for buttons, using the parameters in the data-icon property to define the display of different icon effects.

For example:

The code is as follows:

Delete

Data-icon native parameter list

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

Data-iconpos parameter list:

Parameter effect:

The right icon is on the right side of the text

The top icon is above the text.

The bottom icon is below the text

The data-iconpos= "notext" property allows the button to hide text.

Inline style

In the frame, by default, buttons are horizontally exclusive and adaptable horizontally according to the screen width, but we often need to display multiple buttons in a row in our applications. At this point, we need to know a new property called inline mode.

Data-inline= "true".

For example:

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:

The code is as follows:

Yes

No

Maybe

If you want the buttons to be arranged horizontally, you can add the data-type= "horizontal" attribute.

Form application

The jQuery Mobile framework encapsulates new representations for native html form elements and optimizes the operation of touch-screen devices. Form elements are automatically rendered as jQuery Mobile-style elements in the page of the frame.

The use of the form element is the same as the default html method, and you can also use Post and get to submit data, but you need to pay attention to the ID naming of the element. In the general specification, the same ID naming is not allowed in the same page. In jQuery Mobile, because it allows multiple pages in the same DOM, it is recommended that the ID naming of the form element is unique in the whole project. Prevent errors caused by ID problems.

By default, the frame automatically renders the style of the form element in the standard page, and once it is rendered successfully, this control element can be manipulated using the functions in jQuery. In some cases, we need to use the html native form element, and in order to prevent the automatic rendering of this element by the mobile framework, we introduced a control parameter "none" in the data-role attribute in the framework. Using this attribute parameter causes the element to be displayed in its native state of html.

For example:

The code is as follows:

A

B

C

List application

Information list is a relatively frequently used control in development applications, which is used for data display, navigation, data list and so on. In order to adapt to different information contents, lists are expressed in a variety of forms.

The code structure of lists is implemented as ordered and unordered lists, and simply declaring data-role= "listview" on ul or ol allows the framework to render as lists, for example:

The code is as follows:

Acura

Audi

BMW

If you need to add data to the list, you need to update the list by executing the refresh () method after the data is loaded.

For example:

The code is as follows:

$('ul'). Listview (' refresh')

"how to achieve a variety of html5 page switching effects and modal dialog box" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.