JQuerymobile self-tutorial Toolbar

This command: the data-positionfixeddata-relbackdata-deritionreverse toolbar refers to the tool bar in the header, tail, and content of mobile websites and applications. Therefore, JqueryMobile provides a set of standard tools and navigation bar tools. You can use the tool bar overview Toolbarbasics command in most cases: data-position = "fixed"
Data-rel = "back"
Data-derition = "reverse"

A toolbar is a tool bar in the header, tail, and content of a mobile website or application. Therefore, JqueryMobile provides a set of standard tools and navigation bar tools that can be directly used in most cases.

Toolbar overview Toolbar basics

In Jquery Mobile, there are two standard tool bars: the header column and the tail column.
The header column is the title of a website. It is usually the first element of a mobile website page. It generally includes the title Text of the page and a maximum of two buttons.
The tail column is usually the last element of a mobile website page. It is more flexible in content and function than the header column, but generally it must contain text and buttons.

It is common to place a horizontal navigation bar or tab bar in the header or tail bar. Therefore, JqueryMobile contains the navigation bar component, which converts the unordered list ul into a horizontal button bar, easy to use

Setting Toolbar positioning options for Toolbar positioning

There are several methods to set the position of the header and tail columns on the page. By default, the toolbar is positioned as "inline ". in this mode, the header and tail columns are automatically placed through the html document stream, ensuring that they can be visible on all devices without the support of css and js positioning.

The fixed positioning mode allows the toolbar to be fixed on the page without js settings. The toolbar is in their natural location on the page, just like the inline mode, but when it is rolled out of the screen, jqueryMobile automatically re-displays the scroll bar at the top or bottom of the screen through an animation.

At any time, clicking the screen will switch the display of the toolbar in fixed positioning mode: When the toolbar disappears, clicking the screen will make it appear, and then clicking it will make it disappear. In this way, you can choose not to hide the toolbar during maximum browsing. To set a fixed positioning mode for the toolbar, you only need to add the "data-position =" fixed "attribute to the toolbar container.

The full screen positioning mode is basically the same as the fixed positioning mode, but it is not automatically re-displayed when it is rolled out of the screen, unless you click the screen. This is very useful for apps with improved substitution for images or videos. When you browse, you want to display all the content in full screen, while the toolbar can call out by clicking on the screen. Note that in this mode, the toolbar will cover the page content, so it is best to use it in special cases.

Header structure

The header bar is a toolbar at the top of the page. It usually contains the text of the page title. You can place several optional buttons on the left and/or right of the text for navigation.
Title text is generally used h1 label, but from the h1-h6 is OK, so that the structure can be elastic. For example, if a page contains multiple "pages" marked pages, you can use the h1 label for the title text of the main "page, the title Text of the secondary "page" is labeled with h2. By default, all headers share the same style and maintain consistent appearance.

 
Page Title

Default header features
The topic style in the header bar is "a" (black) by default)
However, you can easily set theme styles.
Add button Adding buttons

Under the settings of the standard header bar, there is a button position on each side of the title text. Each button is usually a tag, but you can add any valid button tag for it. To save space, buttons in the toolbar are all inline buttons, so the button width can only contain the icon and the text in it.

Create custom back button Creating M back buttons

Add the data-rel = "back" attribute to tag a. Any link can be formatted as a back button, and the behavior is to move back to the previous history page, ignore the herf address of the link. This is useful for linking back to a named page. Note that you must set a meaningful herf address for the link to point to the page to be connected, this allows the C-level browser to use this button. Note that if you only need a back-up page transfer effect, instead of actually backing back to the previous historical page, the data-direction = "reverse" attribute should be used instead of the data-rel = "back" attribute button.

Default button positioning

The buttons in the header column are the direct sub-nodes of the container in the header column. The first link is located on the left of the header column, and the second link is placed on the right (first left and then right)

Use the class control button to locate the Controlling button position with classes

The button positions can be set through the class, without relying on their order in the source code. If you want to put the only button on the right, it will be very useful. The two control classes are ui-btn-right and ui-btn-left.

In this example, we need to place the only button in the header column on the right and add the class of ui-btn-right to the button.

Page Title
Options


Configure M header configurations in the Custom header bar

If you want to create a header column that does not follow the default configuration, you can use div to wrap your custom content in the header container. JqueryMobile does not automatically generate a button, so you can customize your style for your header bar

Footer bar structure

Except for the data-role attribute used in the tail column and the header column, the basic structure is the same as that in the header column.

 
Footer content

By default, the theme style of the application in the toolbar at the end is "a" (black), but you can easily set the theme style.
The setting of the tail column is basically the same as that of the header column. The biggest difference is that the tail column is set as simple as possible, so Jquery Mobile will not automatically generate a button for the tail Column

Add button Adding buttons

A button is generated when any element marked with a valid button is added to the End column. To save space, buttons in the toolbar are all inline buttons, so the button width can only contain the icon and the text in it.

By default, no padding is left when the Toolbar contains components and navigation. If you want to add padding to the toolbar, add a class of ui-bar.

Remove
Add
Up
Down



Add the form Element Adding form elements.

Form elements and other elements can also be added to the toolbar. Here is an example of adding select to the end bar:

Persistent footers

In some cases, you need a global navigation element as the tail bar, and you want the tail bar to be fixed and displayed during the page transition. This can be done by creating a continuous Tail Bar
Add the data-id attribute to the end column, and set the same data-id value in the end column of all associated pages, the tail column is fixed and displayed during page transition. For example, you can add the id = "myfooter" attribute to the tail column of the current page and the target page, jquery Mobile will keep the tail column fixed during Page Transition animation. Note: This effect is only set to a fixed position mode (data-position = "fixed") in the header and tail columns ") so that they are not hidden during page transfer (I don't know how to write)