The jquery Mobile Road of Hao Xuan (ii)

JQuery Mobile uses HTML5 & CSS3 to layout Web pages with minimal script. Write the code to note that the outermost div needs to be addeddata-role= "Page" , the title needs to add data-role= "header", the content needs to add data-role= "Contents", the bottom need to add data-role= "Footer".

Code:

----------------------------------------------------------

<div data-role= "page" >
<div data-role= "header">
</div>

<div data-role= "Content">
<p> page Content </p>
</div>

<div data-role= "Footer">
</div>
</div>

----------------------------------------------------------

JQuery Mobile page Switching effect

1. The page transition effect can be applied to any link or form submission that uses the data-transition attribute

Code:

<a href= "#div2" data-transition= "slide"> Switch to div2</a>

<a href= "#div1" data-transition= "slide"> Switch to div1</a>

Parameters of the data-transition :

fade: The default fades to the next page; Flip: Flips from the back to the next;flow: The previous page shrinks to the left to the next page; pop: POPs into the next page ; Slide: Swipe from right to left to next page

Slidefade: Swipe from right to left and fade to the next page,slideup: Swipe from bottom to next,Slidedown: Swipe from top to bottom,turn: Turn to next page ;None: Removal effect.

2. data-transition All effects are supported back function to add data-direction= "reverse"

Code:

<a href= "#div2" data-transition= "flow" > Switch to div2</a>

<a href= "#div1" data-transition= "flow" data-direction= "reverse"> Switch to div1</a>

JQuery Mobile button

1. In JQuery Mobile, buttons can be created in three ways:

• Using <button> elements
• Use <input type= "button" value= "buttons" > elements
• Use <a> elements with <a href= "#" data-role= "button" > button </a>

In what scene with that button:

data-role= "button" for link between pages input and button for form submission

Code:

<a href= "#div2" data-role= "button" > Access second page </a>

<a href= "#div1" data-role= "button" > Access second page </a>

<div data-role= "page"   id= "Div1"
  <div data-role= "header";
      </div

  <div data-role= "content",
    <p><a href= "#div2" data-role= "button" > Access second page </a> </p>
  </div

  <div data-role= "Footer",
      < /div>
</div>

<div data-role= "page" id= "Div2" >
<div data-role= "Header" >
</div>

<div data-role= "Content" >
<p><a href= "#div1" data-role= "button" > Access second page </a></p>
</div>

<div data-role= "Footer" >
</div>
</div>

2. The button is full screen width by default, so it provides data-inline= "true" so that the width of the button is as wide as the word

<a href= "#pagetwo" data-role= "button" data-inline= "true"> button width same as me </a>

3. Jqmobile Combination button, the combination as the name implies is a few buttons together, then there are two cases, one is a button to occupy a row (the default), one is a few buttons occupy a row, so provide data-role= "Controlgroup" property and data-type= "Horizontal|vertical" to the button layout.

Code:

<div data-role= "page" id= "Pageone" >
<div data-role= "Header" >
</div>

<div data-role= "Content" >
<divdata-role= "Controlgroup" data-type= "Horizontal ">
<p> Horizontal Combo Button:</p>
<a href= "#" data-role= "button" > button 1</a>
<a href= "#" data-role= "button" > button 2</a>
<a href= "#" data-role= "button" > button 3</a>
</div><br>

<divdata-role= "Controlgroup" data-type= "Vertical ">
<p> Vertical Combo button (default):</p>
<a href= "#" data-role= "button" > button 1</a>
<a href= "#" data-role= "button" > button 2</a>
<a href= "#" data-role= "button" > button 3</a>
</div>
</div>

<div data-role= "Footer" >
</div>
</div>

4. The Jqmobile Back button needs to be added data-rel=.

Code:

<a href= "#" data-role= "button" data-rel= "Back"> Return </a>

5. More data-* properties for buttons

Data-corners= "True/false" whether to let the button rounded corners

Data-mini= "True/false" Specifies whether the button is minimal

data-shadow= the "/true/false" button has a shadow

6. Jqmobile button icon Add data-icon= ""

Data-icon= "Arrow-l" left Arrow

data-icon= "Arrow-r" right Arrow

data-icon= "Delete" delete

data-icon= "Info" information

Data-icon= "Home"

Data-icon= "Back" backwards

data-icon= "Search" searches

data-icon= "Grid" grid

Code:

<a href= "#anylink" data-role= "button" data-icon= "arrow-l" >Search</a>

7. Icon positioning add data-iconpos= ""/Top (top), right, bottom (bottom), left.

Code:

< Span class= "marked" ><a href= "#link" data-role= "button" data-icon= "Search" data-iconpos= "Top" > Top </a>
<a href= "#link" data-role= "button" data-icon= "Search" data-iconpos=" right " >" </a> "
<a href=" #link " data-role= "button" data-icon= "Search" data-iconpos= "Bottom" > Bottom </a>
<a href= "#link" data-role= "button" data-icon= "Search" data-iconpos= "Left" > LH </a>

8. Show icon only add data-iconpos= "Notext"

Code:

<a href= "#link" data-role= "button" data-icon= "Search" data-iconpos= "Notext" > Search </a>

JQuery Mobile Toolbar

The following code adds a button to the left of the header text, adding a button to the right of the header text

<div data-role= "Header" >
<a href= "#" data-role= "button" > Home </a>
<a href= "#" data-role= "button" > Search </a>
</div>

The following code adds a button to the left side of the header text:

<div data-role= "Header" >
<a href= "#" data-role= "button" > Home </a>
</div>

If you place a button link after the "Ui-btn-right":

<div data-role= "Header" >
<a href= "#" data-role= "button" class= "ui-btn-right"> Search </a>
</div>

The jquery Mobile Road of Hao Xuan (ii)