Jquery-mobile basic attributes and usage _jquery

This article gives an example of Jquery-mobile basic properties and usage. Share to everyone for your reference, specific as follows:

It's written in front.

This article is based on the learning track, the study of their own notes recorded in the process, only for their own learning track records, do not like to spray.

0. Introduction of the Library

To introduce the corresponding file:

<link rel= "stylesheet" href= "Http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" >
< Script src= "Http://code.jquery.com/jquery-1.8.3.min.js" ></script>
<script src= "http:// Code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js "></script>

First, the page structure description

Three elements of a page:

Page data-role= "page"//Note this attribute must have and is the outermost div otherwise the event registration will automatically register two times
Header data-role= Headers//Page header or menu area
Content data-role= "Content"//page contents
Page footer data-role= "Footer"//Footer title or menu area

<div data-role= "page" id= "Pageone" >
 <div data-role= "header" >
   
 

"1. Page Full Screen"

Requires the head and tail of the current page to remain at the top and bottom when you can add attributes to the header and footer Div

data-position= "fixed" data-fullscreen= "true"

Note that both must be added at the same time, otherwise there will be no effect

"2. Center Page title"

You must add the H1 label to the next level of the header or footer div and the other label is invalid

<div data-role= "Footer" >
   
 

Second, create multiple pages in HTML

"Toggle between Pages"

Show first page by default
Other page Hide

<div data-role= "page" id= "Pageone" >
  <div data-role= "Content" >
    <a href= "#pagetwo" > go to Page Two </a>
  </div>
</div>
<div data-role= "page" id= "Pagetwo" >
  <div data-role= "Content" >
    <a href= "#pageone" > go to Page One </a>
  </div>
</div>

"dialog Box"

If the page defaults to the first page as the main page with only two page pages
The first page becomes a dialog box because the Data-rel property of the second label A is changed

Of course, if there are more than one page, others can be changed, but the first page does not change

<div data-role= "page" id= "Pageone" >
  <div data-role= "Content" >
    <a href= "#pagetwo" data-rel= " Dialog > go To dialog Two </a>
  </div>
</div>
<div data-role= "page" id= "Pagetwo" >
  <div data-role= "header" >
   
 

Transition effects between multiple pages

Add a property to the a label

data-transition= "Slide"

Of course, you can add a slide in the reverse direction action

data-direction= "Reverse"

Fade default. Fade in to the next page.

Flip moves forward from behind to the next page.

Flow throws the current page and introduces the next page.

POPs go to the next page like a pop-up window.

Slide slides from right to left to the next page.

Slidefade slides from right to left and fades to the next page.

Slideup slide down to the next page.

Slidedown slide from top to bottom to the next page.

Turn turned to the next page.

None has no transition effect.

Four, the use of the button

Three ways to generate a button

<button>
<input type= "Submit/reset/button"/>
<a data-role= "button" > (Recommended)

"Navigation Button"

data-role= "button"

In-line buttons

The default one button occupies a row, and you can use inline properties if you don't want to occupy a row

Data-inline= "true"

"Combo Button"

Data-role= "Controlgroup"
data-type= "horizontal/vertical"

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

Back button (the href attribute is automatically ignored)

Data-rel= "Back"

Data-corners true | False
Specify whether the button has rounded corners. Default True
Data-mini true | False
Specify whether it is a small button. Default False
Data-shadow true | False
Specify whether the button has a shadow. Default True

Five, the use of the icon

Add an icon to the button as long as the following attributes are added

data-icon= "Search"

Data-icon= "Arrow-l" left Arrow

data-icon= "Arrow-r" right Arrow

data-icon= "Delete" delete

data-icon= "Info" information

Data-icon= "Home" homepage

Data-icon= "Back" return

data-icon= "Search" searches

data-icon= "Grid" grid

Icon Positioning

data-iconpos= "Top/left/right/bottom" default left

As long as the icon words:

Set the above property to Notext

Data-iconpos= "Notext"

Six, the use of the tool bar

Header

Add a button to the left and right sides of the text

<div data-role= "page" >
 <div data-role= "header" >
  <a href= "#" data-role= "button" data-icon= " Home > Homepage </a>
   
 

[Single button right] (default left)

If you add only one button, whether it's in front of the H1 or behind it, it defaults to the left, and if you want to put it on the right, add it on the button.

The following properties

Class= "Ui-btn-right"

[Note]: The header can contain only one or two buttons, and the footer is unlimited

Footer

The footer and the header are different, and he saves some inline styles and does not center
If you need to center, you can add a footer on the

Class= "Ui-btn" (and can only be added on footer)

Of course, you can also choose between horizontal and vertical combinations.

<div data-role= "Footer" class= "ui-btn" >
  <div data-role= "Controlgroup" data-type= "Horizontal" >
   <a href= "#" data-role= "button" data-icon= "Plus" > Broadcast to Sina Weibo </a>
   <a href= "#" data-role= "button" data-icon= "Plus" > Broadcast to Tencent Weibo </a>
   <a href= "#" data-role= "button" data-icon= "Plus" > Broadcast to QQ space </a>
  </div>
</div>

"Positioning headers and footers"

[Inline] Default

The header and footer are parallel to the contents of the page. Header and footer increase with content height

data-position= "inline"

[Fixed]

Show or hide headers or footers, depending on the position of the scroll bar

data-position= "Fixed"

[Fullscreen]

You need to define both properties to display a hidden header or footer at the same time

data-position= "fixed"
data-fullscreen= "true"

Seven, the use of navigation bar

"Navigation Bar"

To define a navigation bar using NavBar

Data-role= "NavBar"

Note: The a tag below navbar can be dispensed with
data-role= "button" automatically adds similar properties

<div data-role= "header" >
   
 

"Check button"

Activate the check without clicking

Class= "Ui-btn-active"

Click to activate the check (it will be activated when clicked in the preset button properties)

Class= "Ui-state-persist"

[Note]:

Navigation buttons can be placed in the footer content header

When you need to use:

Must follow

div:data-role= "Footer" >div:data-role= "NavBar" >ul>li>a hierarchy to show

Folding of the use of

"Single Collapsible"

data-role= "Collapsible"

Format:

<div data-role= "Collapsible" >
   
 

Collapse default is turned off, you need to open to add properties by default

Data-collapsed= "false"

"Nested Collapsible"

This format can be removed from the contents of the title, make the Unlimited polar menu

<div data-role= "Collapsible" >
  
 

"Collection Collapsible"

Father: data-role= "Collapsible-set"
Zi: data-role= "collapsible"

<div data-role= "Collapsible-set" >
   <div data-role= "collapsible" >
     
 

"Remove the rounded corners of the title"

Data-inset= "false"

"Small Button"

Data-mini= "true"

"Change Icon"

Data-expanded-icon

Nine, Grid layout

"Four kinds of grid layouts"

Grid class Column column width
corresponding instance
Ui-grid-a 2 50%/50% ui-block-a|b

Ui-grid-b 3 33%/33%/33% Ui-block-a|b|c

Ui-grid-c 4 25%/25%/25%/25% Ui-block-a|b|c|d

ui-grid-d 5 20%/20%/20%/20%/20% Ui-block-a|b|c|d|e

Parent class Row Row
Ui-grid-a two columns
Ui-block-a
Ui-block-b

Note subclasses each new class Ui-block-a will have a second row

Ten, List view

Add attributes on UL or OL

Data-role= "ListView"

"Specific column Segmentation"

Add separator manual split in Li list

Data-role= "List-divider"

"Automatic Segmentation by letter"

Ul/ol Add Properties

Data-autodividers= "true"

"Round Corner"

Data-inset= "true"

"Search and Filter"

Data-role= "ListView"                        List Property
Data-autodividers= "true"                    automatically group properties by letter
Data-inset= "true"                            Fillet Property
data-filter= "true"                          Data Filtering Properties
data-filter-placeholder= "Search Name ..."     filter text box default Text property

 <ul data-role= "ListView" data-autodividers= "true" data-inset= "true" data-filter= "True" data-filter-placeholder= Search name ... "> <li><a href=" # ">Adele</a></li> <li>< A href= "#" >Agnes</a></li> <li><a href= "#" >Albert</a></li> <li><a href= "#" >Billy</a></li> <li><a href= "#" >Bob</a></li> <li><a href= " # ">Calvin</a></li> <li><a href=" # ">Cameron</a></li> <li><a href=" # ">Chloe</a></li> <li><a href=" # ">Christina</a></li> <li><a href=" # ">Diana</a></li> <li><a href=" # ">Gabriel</a></li> <li><a href=" # " >Glen</a></li> <li><a href= "#" >Ralph</a></li> <li><a href= "#" > valarie</a></li> </ul> 

"Read-only property"

Remove the a tag in Li and keep the text.

"List Contents"

1. Include a list of thumbnails

<ul data-role= "ListView" data-inset= "true" >
   <li>
    <a href= "#" >
    
     
 

2. List icon

If the icon for 16*16 is added

Class= "Ui-li-icon"

<li>
  <a href= "#" >
   
   USA
  </a>
</li>

Not just ditto.

3. Split button

<ul data-role= "ListView" >
 <li>
  <a href= "#" ></a>
  <a href= "#download" data-rel= "dialog" > download browser </a>
 </li>
</ul>

4. Counting Bubbles

A tag in the SAPN plus class name

Class= "Ui-li-count"

<ul data-role= "ListView" >
 <li><a href= "#" >inbox<span class= "Ui-li-count" >335</span ></a></li>
 <li><a href= "#" >sent<span class= "Ui-li-count" >123</span> </a></li>
 <li><a href= "#" >trash<span class= "Ui-li-count" >7</span></a ></li>
</ul>

5. Change the default icon

Li Add attributes

Data-icon= "Minus"

6. Calendar events

List > Delimited list
> List Content

<ul data-role= "ListView" data-inset= "true" > <li data-role= "List-divider" > Wednesday, January 2, 2013 <span class = "Ui-li-count" >2</span></li> <li><a href= "#" >  

For more information on jquery-related content readers can view the site topics: "jquery common Plug-ins and Usage summary", "JQuery Extended Skills Summary", "jquery switching effects and Skills summary", "jquery traversal algorithm and Skills summary", " jquery Common Classic Effects Summary "jquery animation and special effects usage Summary" and "jquery Selector usage Summary"

I hope this article will help you with the jquery program design.