Button button Component basics in jQuery Mobile tutorial _jquery

One. Button component and JQuery Mobile How to enrich component styles
in jquery Mobile, you can create a button component by adding data-role= "button" to any link, and jquery Mobile will append a certain style to the link, and it's worth noting that jquery Mobile is giving the component When an element appends a style, it does not necessarily add CSS and Javascript responses to the original elements, and typically appends a few new elements to the style of the component that is closer to the native APP component style. An example is given below:
This is a link with the data-role= "button" attribute, the original HTML is as follows

<a href= "#page2" data-role= "button" >link button</a>

The styles displayed on the browser are as follows:

Using the DOM viewing tool to view the actual HTML, you can see that jquery mobile not only adds CSS to the original a element to enrich the button style, but also appends some HTML to make the style richer, of course this part is done automatically by jquery mobile, There is no need for developers to worry too much.

Note: Button elements with links and buttons in the form are automatically rendered without the addition of the data-role= "button" attribute.
Two. With icon button
JQuery Mobile allows developers to add a standard Web icon to the button component by adding the data-icon= "" attribute to the link, and supports setting the icon relative to the text by data-iconpos= "" Property (Top, bot Tom, right, default to left.

<a href= "#page2" data-role= "button" data-icon= "Check" >Check</a>

<a href= "#page2" data-role= "button" data-icon= "Check" data-iconpos= "Top" >Check</a>

Data-icon attributes (from the JQuery Mobile Chinese manual)

. Button group
If you want to put some buttons inside a container, build a separate widget (button group) such as navigation, you can put the button in a container and set the data-role= "Controlgroup" property for the container, and if you want to get a horizontal group of buttons, add data-type=. Horizontal "attribute to the container.

<div data-role= "Controlgroup" >
  <a href= "#page2" data-role= "button" > is </a>
  <a href= "# Page2 "data-role=" button "> No </a>
  <a href=" #page2 "data-role=" button "> Cancel </a>
</div >

Four. The other button components are available in the properties
1. Data-theme= "", all jQuery Mobile components support this property to set the color of the component, which defaults to five values A, B, C, D, E, respectively, representing From deep to shallow five colors, in addition, developers can also add the corresponding Class in the CSS to customize the color.
2. Data-inline= "", the inline button, the button component will automatically change to inline when it is added, and JQuery Mobile will add display:inline-block CSS to the link, allowing the link to control itself by the length of the text And can be shared with other inline elements.
Five. Button binding event
Let's take the example and go directly to the code:

<! DOCTYPE html>  

See how it works:

• Hashchange enables the tagging #hash history, and the hash value changes when a separate click occurs, such as when a user clicks the back button and passes the Hashchange event for processing.
• Navigate wrapped up the events of Hashchange and Popstate.
• Changes the event in a orientationchange direction, triggering when the user rotates the device vertically or horizontally.
• Pagebeforechange the event that is triggered before the page is toggled. Using $.mobile.changepage () to toggle the page, this method triggers 2 events, toggles the previous Pagebeforechange event, and Pagechange (success) or pagechangefailed (failure) after the switch completes.
• Pagebeforecreate when the page is initialized, it is triggered before initialization.
• Pagebeforehide the event that is triggered before the old page is hidden after a page switch.
• Pagebeforeload triggers before the load request is issued
• Pagebeforeshow the event that is triggered before the page is toggled.
• Pagechange The event that is triggered after a page switch succeeds. Using $.mobile.changepage () to toggle the page, this method triggers 2 events, toggles the previous Pagebeforechange event, and Pagechange (success) or pagechangefailed (failure) after the switch completes.
• Pagechangefailed the event that is triggered when a page switch fails. Using $.mobile.changepage () to toggle the page, this method triggers 2 events, toggles the previous Pagebeforechange event, and Pagechange (success) or pagechangefailed (failure) after the switch completes.
• Pagecreate the event that fires after the page is created, but before the enhancement completes.
• Pagehide the event that is triggered when the old page is hidden after a page switch.
• Pageinit the event that is triggered when the page page is initialized.
• Pageload is triggered when the page is fully loaded successfully.
• pageloadfailed if the page request fails to trigger.
• Pageremove is triggered before the window view removes an external page from the DOM.
• Pageshow is triggered on the arrival page after the transition animation completes.
• Scrollstart is triggered when the user starts scrolling the page.
• Scrollstop is triggered when the user stops scrolling the page.
• Swipe is triggered when the user slides horizontally on an element.
• Swipeleft is triggered when the user crosses the element from left to over 30px.
• Swiperight is triggered when the user crosses the element from right across the 30px.
• Tap triggers when a user knocks on an element.
• Taphold is triggered when an element knocks on an element and holds it for a second.
• Throttledresize Enable markup #hash history
• Updatelayout is triggered by the JQuery Mobile component of dynamic Show/hide content.
• Vclick A virtualized Click event handler
• Vmousecancel virtualized Mousecancel event handlers
• Vmousedown virtualized MouseDown event handlers
• Vmousemove virtualized MouseMove event handlers
• Vmouseout virtualized Mouseout event handlers
• Vmouseover virtualized MouseOver event handlers
• Vmouseup virtualized MouseUp event handlers