Use of the Jquery mobile plugin-the Head toolbar detailed

Settings for toolbar positioning Toolbar positioning options

There are several ways to set the position of the header and tail columns in the page. By default, the toolbar's positioning property is "inline". In this mode, the header and tail columns are placed through HTML automatic document flow, ensuring that they are visible on all devices without the need to rely on CSS and JS positioning support

Fixed positioning mode allows the toolbar to be placed in a fixed position without the need for JS settings. The sidebar is in their natural position on the page, just like the inline mode, but when he is scrolled out of the screen, Jquery mobile automatically animates the scroll bar back to the top or bottom of the screen.

At any time, clicking on the screen toggles the display of the fixed-position mode bar: Clicking on the screen when the toolbar disappears will let him appear, and then clicking it will make it disappear. So the user has the option to maximize browsing to hide the toolbar, to the toolbar to set a fixed positioning mode, just give the toolbar container "data-position=" Fixed properties can

The full screen positioning mode is basically the same as a fixed positioning mode, but when he is scrolled out of the screen, it is not automatically displayed again unless the screen is clicked. This is useful for images or video classes that have a sense of ascension, and when browsing you want to display content in full screen, the toolbar can be exhaled by clicking on the screen. Note that the toolbar will cover the page content in this mode, so it's best to use it in a special situation.

The header bar is the toolbar at the top of the page, usually containing the title text of the page, the left and/or right side of the text can be placed with several optional buttons to use as a navigation operation

Title text is generally used H1 tags, but from the h1-h6 can be, so that the structure can be flexible. For example, a page contains multiple pages marked with "page", so that the main "page" title text with the H1 tag, secondary "page" title text with a H2 tag. All head defaults are the same on style, keeping the appearance consistent

 
  
  

  
   
   
< Div   data-role="header">  
  
   
   
< H1 > Page Title </ H1 >  
  
   
   
</ Div >   
 
  
  

Default Header Bar

The theme style for the header bar is "a" (black) by default, but you can easily set the theme style

Jquery Mobile automatically generates a "Back" button for each page's header to simplify the process of putting the button in the header bar. If you don't want to? Quot;back "button into the header bar, you can add a button you need or to the header bar to the data-backbtn=" false "property

Add a button

In the standard header bar settings, each side of the caption text has a position where the button can be placed. Each button is usually a, but any valid button-labeled element can. In order to save space, the buttons in the toolbar are inline buttons, so the button width only holds the icon and the text inside.

Create a custom Back button

Add a data-rel= "back" attribute to the a label, and any link can be styled as a rewind button, acting as a fallback to the previous history page, ignoring the link's herf address. This is useful for linking back to a named page. but note please give the link a meaningful herf address, point to the actual page to connect, so that C-level browser can also use this button and note If you just need a backward page transition effect, Instead of really backing down to the previous history page, you should use the data-direction= "reverse" property instead of the button with the data-rel= "back" attribute

Button default Positioning

The head button is the direct child node of the header bar container, the first link is positioned to the left of the header bar, and the second link to the right, in this case, according to the position of the two links in the source code, to the left, to the right.

 
 

  
  

  
< Div   data-role="header"   data-position="inline"   > 
  
  

  
< a   href="index.html"   data-icon=" Delete ">Cancel</a>  
  
  

  
< H1 > Edit Contact </ H1 >  
  
  

  
< a   href="index.html"   data-icon=" Check ">Save</a>  
  
  

  
</ Div >  
 
 

button automatically applies the theme style of their parent container, so the buttons in the header bar with the "a" theme style apply to the "a" theme style, and we can make the button look different by adding the Data-theme attribute to the button and setting it.

 
 

  
  

  
< Div   data-role="header"   data-position="inline"   > 
  
  

  
< a   href="index.html"   data-icon=" Delete ">Cancel</a>  
  
  

  
< H1 > Edit Contact </ H1 >  
  
  

  
< a   href="index.html"   data-icon=" Check "   data-theme="B ">Save</  a > 
  
  

  
</ Div >  
 
 

Positioning with the Class control button

The position of the button can be set by class instead of the order in which they are in the source code. If you want to put the only button on the right, this is very useful. The two controlled classes are ui-btn-right and Ui-btn-left

In this example, we want to put the only one button on the head bar on the right side, first add data-backbtn= "false" property to the header bar to prevent the header bar from automatically generating the back button behavior, and then give their own buttons to add Ui-btn-right class

 
 

  
  

  
< Div   data-role="header"   data-position="inline"    data-backbtn = "false" >  
  
  

  
< H1 > Page Title </ H1 >  
  
  

  
< a   href="index.html"   data-icon="Gear"   class="ui-btn-right">options</  a > 
  
  

  
</ Div >  
 
 

Customize the text of the head-back button

If you want to set the Back button text, you need to give the page "element" to add data-back-btn-text= "text" attributes, or through the program to implement? $.mobile.page.prototype.options.backbtntext = "Text";

If you want to configure the Back button theme style, use $.mobile.page.prototype.options.backbtntheme = "a" If you want to use this program, you need to use it in the Mobileinit time handler.

Customizing the configuration of the header bar

If you want to create a header bar that does not follow the default configuration, use div to wrap your customizations in the header container, and Jquery mobile will not automatically generate the button, so you can customize your style to the header bar.

-