Jquerymobile button, navigation and folding block components

buttons, navigation bar, collapsed block, collapse menu generation and methods, events

1. Button

Jquerymobile automatically enhances the button and type attributes to the input element of the submit, reset, button, and image buttons

<div data-role= "Content" data-theme= "B" >

<button>Button</button>

<input type= "Submit" value= "Submit" >

　　　　<input type= "reset" value= "reset" >

　　　　<input type= "button" value= "button" >

Set a, div to button

<a href= "page.html" data-role= "button" >go to Page</a>

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

Composite Combo button

(rounded up and down with vertical direction)

<div data-rel= "Controlgroup" >

　　　　　<button> back </button>

<button> Home </button>

<button> forward </button>

　　</div>

　　　　(horizontal, with rounded corners at both ends)

　　　　<div data-rel= "Controlgroup" data-type= "Horizontal" >　　　

<button> back </button>

<button> Home </button>

<button> forward </button>

　　</div>

</div>

　　Configuring button Components

Data-corners Corners true round angle; false right angle; default is True

Data-icon icon using icons

Data-iconpos Iconpos Specify the location of the icon

Data-iconshadow Iconshadow If True, adds a shadow to the icon

Data-inline inline production buttons that automatically set the width based on content

Data-mini Mini If True, it is displayed as a compact button

Data-shadow Shadow If True (default), there is a shadow; False, there is no shadow;

Add an icon to a button

Arrow-l, Arrow-r, left and right arrow

Arrow-u, arrow-d

Bars Three horizontal line

Edit the pencil tip to modify the content

Check, delete checkmark, wrong number

Plus, minus Plus, minus

Gear gears

Refresh, forward refreshed, previous page

Back, home, search page, home, magnifying glass (search)

Star Pentagram

Alert exclamation mark, warning

Info i information native format

<div data-role= "Content" >

<div class= "Ui-grid-b" >

　　　　　　<div class= "Ui-block-a" >

<button data-icon= "Home" >home</button>//home icon

</div>

<div class= "Ui-block-b" >

<button data-icon= "Home" data-iconpos= "up" >home</button>//icon on top of home text

</div>　　　　　

<div class= "Ui-block-c" >

<button data-icon= "Home" data-iconpos= "Notext" >home</button>//only icons, no text

</div>　　　　　　

<div class= "ui-block-d" >

<button data-icon= "Home" data-inline= "true" dat-mini= "true" >home</button>//minimalist format, press text to determine button length

</div>

</div>

</div>

Update button Component contents

button ("Disable") disabled, not point

Button ("Enable"), which can be clicked

Button ("Refresh") refreshes the state of the buttons to reflect changes in the underlying elements

If the content of the button or INPUT element underlying the component changes, call refresh

<script>

$ (document). Bind ("Pageinit", function () {//Bind Pageinit Event

var conter=0;

SetInterval (function () {//update the underlying element content every 1 seconds

var msg= "Conter" +conter++; Number of times plus one per

$ ("#btn"). Text (msg). Button ("Refresh"); Call the text on the Refresh button to change depending on the content of the underlying element

$ ("#inp"). Val (msg). Buton ("refresh");

$ ("#divE span.ui-btn-text"). Text (msg); You add a span to the div, you can use the. Ui-btn-text to navigate to the span element, and change the content

},1000);

})

</script>

<div data-role= "Content" >

<button id= "BTN" >Button</button>

<input id= "INP" type= "button" value= "Input" >

<div id= "DivE" data-role= "button" >DIV</div>

</div>

Button Events

Create event, which fires when a button component is successfully generated, and the underlying elements of the button component also trigger their own time,

That is, you can use the Tap event to write a handler function to accept feedback after clicking the button.

<script>

$ (document). Bind ("Pageinit", function () {

$ ("#btn"). Tap (function () {

$ (this). Text ("taped"). Button ("refresh");//Click to update the contents of the buttons

});

});

</script>

2. Navigation bar　

<div data-role= "NavBar" data-iconpos= "left" >//define navigation bar, or add an icon
<ul>//To indicate which is the current page, you must add two classes to element a
Ui-btn-active: The current button is marked as Active
Ui-state-persist: Ensure that the button is active when the user returns to the previous page
<li><a href= "#page1" data-icon= "info" class= "ui-btn-active ui-state-persist">Page1</a> </li>
<li><a href= "#page2" data-icon= "alert" >page 2</a></li>
<li><a href= "#page3" data-icon= "gear" >page 3</a></li>
</ul>
</div>

3. Folding Block

Data-collapsed collapsed default to True, hide, display only title, false display, title content show together

Data-collapsed-icon Collapsedicon Specifies the icon to display when the collapsed state

Data-content-theme Contenttheme Specify the theme for the collapsed content area

Data-corners Corners True The collapsed area is displayed as rounded corners, false is right angle

Data-expanded-icon Expandedicon The icon that appears when the collapsed block expands state

Data-iconpos the location of the Iconpos icon displayed in the title

Data-inset inset default True, if False then the caption is pressed against the window, without any white

Data-mini Mini True is a compact title

　　

<div data-role= "Content" Data-theme= "a" >
　　　　<div data-role= "Collapsible" data-collapsed= "true" Data-content-theme= "C"
Data-inset= "false" data-iconpos= "Top" >
<p> content here ... Many </p>
</div>
</div>

4. Collapse Menu

A package of these several folding blocks consisting of a menu data-role= "Collapsible-set"　　

<div data-role= "Collapsible-set" data-theme= "a" >//Folding Block Menu
<div data-role= "collapsible">//Folding block
<p> content here ... Many 1111</p>
</div>
<div data-role= "Collapsible" data-collapsed= "false">//default expansion
<p> content here ... Many 2222</p>
</div>
<div data-role= "Collapsible" >
<p> content here ... Many 3333</p>
</div>
</div>

Jquerymobile button, navigation and folding block components