Some instructions on how to use jquery Mobile

JQuery Mobile navigation bar, the navigation bar consists of a set of horizontally arranged links, usually inside the header or footer. By default, links in the navigation bar are automatically converted to buttons (No data-role= "button"). Use the data-role= "NavBar" property to define the navigation bar:

Instance

<div data-role= "Header" >

<div data-role= "NavBar" >

<ul>

<li><a href= "#anylink" > Home </a></li>

<li><a href= "#anylink" > Page two </a></li>

<li><a href= "#anylink" > Search </a></li>

</ul>

</div>

</div>

The width of the button, which, by default, is consistent with its contents. Use the unordered list to divide the buttons equally: a button occupies 100% of the width, two buttons share 50% width, three button 33.3%, and so on. However, if you specify more than five buttons in the navigation bar, it bends to more than one line.

Collapsible content block, collapsible (collapsibles) allows you to hide or display content-useful for storing part of the information. To create a collapsible content block, assign the data-role= "collapsible" property to a container. In the container (DIV), add a CAPTION element (H1-H6) followed by any HTML markup you need to extend:

Instance

<div data-role= "Collapsible" >

<p> I am a collapsible content. </p>

</div>

By default, the content is turned off. To extend the content when the page loads, use data-collapsed= "false":

Instance

<div data-role= "Collapsible" data-collapsed= "false" >

<p> now I'm expanding by default. </p>

</div>

A nested collapsible block that can nest collapsible content blocks:

Instance

<div data-role= "Collapsible" >

<p> I was the content that was being unfolded. </p>

<div data-role= "Collapsible" >

<p> I am the content that is being expanded in a nested collapsible block. </p>

</div>

</div>

Collapsible sets, collapsible sets (collapsible sets) refer to collapsible blocks that are grouped together (often referred to as accordion). When the new block is opened, all other blocks are closed. Create several content blocks, and then wrap the collapsible block with a new container by data-role= "Collapsible-set":

Instance

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

<div data-role= "Collapsible" >

<p> I was the content that was being unfolded. </p>

</div>

<div data-role= "Collapsible" >

<p> I was the content that was being unfolded. </p>

</div>

</div>

jquery Mobile text input, input fields are written by standard HTML elements, and jquery mobile sets them to a beautiful and easy-to-use style specifically for mobile devices. You can also use the new HTML5 <input> type:

Instance

<form method= "POST" action= "demoform.asp" >

<div data-role= "Fieldcontain" >

<label for= "FullName" > Full name:</label>

<input type= "text" Name= "FullName" id= "FullName" >

<label for= "bday" > Birthday:</label>

<input type= "Date" name= "Bday" id= "Bday" >

<label for= "Email" > Email:</label>

<input type= "Email" name= "email" id= "email" placeholder= "Your email address ..." >

</div>

</form>

text box, use <textarea> to implement multiple lines of text input. Note: The text box automatically expands to fit the line of text that you enter.

Instance

<form method= "POST" action= "demoform.asp" >

<div data-role= "Fieldcontain" >

<label for= "Info" >additional information:</label>

<textarea name= "Addinfo" id= "info" ></textarea>

</div>

</form>

Search box, input type type= "Search" is a new type in HTML5 that defines the text field for the input search term:

Instance

<form method= "POST" action= "demoform.asp" >

<div data-role= "Fieldcontain" >

<label for= "Search" >Search:</label>

<input type= "Search" name= "search" id= "search" >

</div>

</form>

check box, the check box is used when the user selects one or more of the options in the limited quantity option:

Instance

<form method= "POST" action= "demoform.asp" >

<fieldset data-role= "Controlgroup" >

<legend>choose as many favorite colors as you ' d like:</legend>

<label for= "Red" >Red</label>

<input type= "checkbox" Name= "Favcolor" id= "Red" value= "Red" >

<label for= "Green" >Green</label>

<input type= "checkbox" Name= "Favcolor" id= "green" value= "green" >

<label for= "Blue" >Blue</label>

<input type= "checkbox" Name= "Favcolor" id= "Blue" value= "Blue" >

</fieldset>

</form>

Some instructions on how to use jquery Mobile