HTML5 various page transition effects and modal dialog boxes

Page animations:
The Data-transition property allows you to define the animation effect of page transitions.
Example: <a href= "index.html" data-transition= "Pop" >i ' ll pop</a>
Data-transition parameter table:
Parameter description
Slide slide from right to left into page
Slideup slide up from the bottom
Slidedown slide in from top to bottom
Pop expands from center fade
Fade fade
Flip flipping
Note: If you want to display the back button in the target page, you can add the data-direction= "reverse" property to the link, which is the same as the original data-back= "true" and does not know which property will be retained in the official version.

modal dialog box
Modal dialogs are pseudo-floating layers with rounded title bars and close buttons that are used for exclusive event applications. Any structured page can be applied using the data-rel= "dialog" link to the modal dialog box.
Example: <a href= "foo.html" data-rel= "dialog" >open dialog</a>
This page toggle 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 to achieve better results.
The modal dialog box generates a Close button by default to return to the parent page. You can also add a link with data-rel= "back" to implement the Close button on a device with a weaker scripting capability.
Devices that support scripting can be closed using href= "#" or data-rel= "back" directly. You can also use the built-in "close" method to close the modal dialog box, for example: $ ('. Ui-dialog '). Dialog (' Close ').
Since modal dialogs are temporary pages that are dynamically displayed, this page is not saved in a hash table, which means that we cannot go back to this page, for example, you click a link in a page to open the B dialog, the operation is completed and close the dialog box, and then jump to the C page, when you click the browser's Back button, This will return to page A, not to page B.

Tool bar
The toolbar is mainly used for "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).
where the title and footer are used in different ways in the page, the default toolbar is positioned in an embedded (inline) manner, which maximizes compatibility, including good optimizations for scripts and poorly compatible devices for CSS.
The other is a floating (fixed) positioning method, or it can be a "static" positioning, which allows the toolbar to remain at the top or bottom of the screen at all times. And can accept the Click event to show/hide the toolbar, has achieved the purpose of maximizing the use of screen space.
Implementation: Add the data-position= "fixed" attribute to the header and footer area.

Header container
The header container is the display control for the page header area, which is used primarily to display the title and the area of the main action.
Structure code:
<div data-role= "Header" >
</div>
In order to facilitate the interaction of the page after the page switch will automatically generate a Back button on the left side of the header container, this can simplify our development complexity, but sometimes we will because of the application needs and do not need this back button, you can
Add the Data-backbtn= "false" property on the header container to prevent the auto-creation of the back button.
A button can be placed on the left and right side of the header container, and after the auto-generated back button is blocked, we can customize the button in the position of the back button.
For example:
<div data-role= "header" data-position= "inline" data-backbtn= "false" >
<a href= "index.html" data-icon= "Delete" >Cancel</a>
<a href= "index.html" data-icon= "Check" >Save</a>
</div> If you need to customize the text in the default Back button, you can do so by using the data-back-btn-text= "previous" property, or by extending the method: $. 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 default buttons.

Footer Container
The structure of the footer container and the structure of the header container are basically the same, as long as the parameters of the Data-role property are set to "footer".
For example:
<div data-role= "Footer" >
</div>
Compared to the header container, the footer container has more flexibility, it does not want the title container to allow only two buttons, and will not be the default to place the button on the left and right side of the top, the footer of the button is left-to-the default in order, and how to place more buttons.
Just add a class= "Ui-bar" on the footer container to turn the footer into a toolbar where you can add neat buttons without having to set 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 this:
<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 Data-id property to have multiple pages with the same footer.

Navigation
The navigation container is a button group control that can hold up to 5 buttons per row, with a data-role= "NavBar"
Properties of the 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 is more than 5, the navigation container will automatically be assigned to a multi-line display in the appropriate quantity.

Button
You can declare any link in the page to be a button's display style by data-role= "button". For style unification, the framework automatically formats the button of the form class as a jQuery Mobile-style button when the page loads, without adding the Data-role attribute.
The frame contains a set of commonly used icons that can be used for buttons that define the display of different icon effects using the parameters in the Data-icon property.
Example: <a href= "index.html" data-role= "button" data-icon= "Delete" >Delete</a>
Data-icon List of native parameters

In addition to displaying the icon to the left by default, you can use the Data-iconpos property to define the position of the icon and the text.
Data-iconpos parameter list:
Parameter effects
Right icon in the text
Top icon above the text
Bottom icon below the text
data-iconpos= the "Notext" property allows the button to hide text.
inline style
The button in the frame is horizontally exclusive according to the screen width by default, but we often need to display multiple buttons in a row in our application, and we need to know a new property called 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 can display several buttons as a group, data-role= "Controlgroup" to show buttons
Compact relationship between the two. 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 increase the data-type= "Horizontal" property if you want the button to be arranged horizontally.
Form Application
The JQuery Mobile Framework encapsulates new representations of native HTML form elements and optimizes the operation of touch-screen devices. The form element is automatically rendered as a jQuery Mobile-style element in the frame's page.
The use of form elements is the same as the default HTML, you can also use Post and get to submit data, but it is important to note that the ID naming problem of elements, in the general specification of the same page is not allowed to have the same ID name, in jQuery Mobile due to its There are multiple pages in the same DOM, it is recommended that the ID name of the form element is unique throughout the project, preventing errors caused by the ID issue.
By default, the framework automatically renders the style of the form element in a standard page, and once rendered successfully, the control element can be manipulated using the functions in JQuery. In some cases, we need to use the HTML native form element in order to prevent the mobile framework from
In the framework we introduced a control parameter "None" in the Data-role attribute. Using this property parameter will cause the element to appear in the native HTML 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 application
Information lists are relatively high-frequency controls used in development applications for data display, navigation, data lists, and so on. In order to adapt to different information content, the form of the list is also varied.
The code structure of the list is implemented in an ordered and unordered list, as long as the data-role= "ListView" is declared on the UL or OL to allow the framework to be rendered in 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 need to add data to the list, you will need to perform the refresh () method after the data has been loaded to update the data.
For example: $ (' ul '). ListView (' Refresh ');
These are the basic rules for building the interface using JQuery Mobile, which will refine the technical data for Ajax and dynamically created pages.

HTML5 various page transition effects and modal dialog boxes