Use jquery to add buttons and add icons to buttons on a mobile page _jquery

Create a button Data-role=button
Add the data-role= button attribute to the HTML element. The JQuery moble will give this element a button-style boost. The jquery mobile framework contains the icons needed for a set of most commonly used mobile applications, and in order to reduce the size of the download, jquery Mobile contains the white icon sprite picture, and automatically add a translucent black circle behind the icon to make sure that the picture is clearly visible under any background color.

Style Link button

In the main content block of a Web page, you can style any anchor button to add the data-role= "button" attribute. The framework will strengthen links with tags and links to the class button. For example, this tag:

<a href= "index.html" data-role= "button" >link button</a>

Note: Styles like button links are the same as the visual selection buttons below the real form, but there are some important differences. Based on the link button, the button is a plug-in that uses not only the basic button tag plugin to generate the style of the button, so the Form button method (enabled, disabled, refreshed) is not supported. If you need to disable a link-based button (or element), it may request a disabled-level UI for the disabled to achieve the same effect with Java script.

Mini version data-mini= "true"

A more compact version, which is useful in toolbars and tight spaces, adds a button data-mini= the "true" property to create a mini version.

<a href= "index.html" data-role= "button" data-mini= "true" >link button</a>

Add an icon to the button Data-icon
The JQuery Mobile framework includes a set of selected icons that mobile applications typically require. To minimize the download size, JQuery Mobile contains a single white icon for the Genie, and automatically adds a translucent black circle behind the icon to make sure it has any background color contrast well.

An icon that you can add to a button by adding an icon property to the anchor bar that specifies the icons to display. For example, the following tag:

<a href= "index.html" data-role= "button" data-icon= "Delete" >Delete</a>

Mini Add Data-mini= "true" property

Icon Style list

JQuery Mobile has a number of button small icons, as shown in the following illustration:

Left arrow: data-icon= "Arrow-l"
Right arrow: data-icon= "Arrow-r"
Up ARROW: data-icon= "Arrow-u"
Down arrow: data-icon= "arrow-d"
Delete: data-icon= "Delete"
Add: data-icon= "Plus"
Reduced: data-icon= "Minus"
Check: data-icon= "Check"
Gear: data-icon= "gear"
Forward: data-icon= "Forward"
Back: data-icon=.
Grid: data-icon= "Grid"
Pentagon: data-icon= "Star"
Warning: data-icon= "alert"
Info: data-icon= "Info"
Homepage: data-icon= "Home"
Search by: data-icon= "Search"

Icon Positioning Data-iconpos

By default, all icons are placed to the left of the button's button text. This default can override the use of the Data-iconpos property to set the upper-right (top), bottom (bottom), right, and left text of the icon. For example, tag:

<font color= #0000ff ><a href= "index.html" data-role= "button" data-icon= "delete" data-iconpos= "right" > Delete</a>

Hide text on a picture data-iconpos= "Notext"

You can also create an icon button to set the Data-iconpos= "Notext". The button plugin will hide the text on the screen, but take it as a contextual link to the screen reader and the device support ToolTip properties. For example, data-iconpos= "right", data-iconpos= "Notext":

<a href= "index.html" data-role= "button" data-icon= "delete" data-iconpos= "Notext" >Delete</a>

Mini and inline

Mini and inline properties can be added to produce more compact buttons

Custom icon data-icon= "Custom Value"

Using a custom icon, you need to specify a Data-icon value. The Jquery Mobile button plugin will generate a CSS class that is prefixed by ui-icon-, followed by a Data-icon value. If: There is a button data-icon the value of the property is Myapp-email, that is, data-icon= "Myapp-email". Then the production of CSS class is: Ui-icon-myapp-email.

Then you can write a CSS rule in your stylesheet to define Ui-icon-myapp-email. Then specify the background image address for this class in the CSS. To maintain visual consistency with other icons, create a PNG-8 icon with a white 18x18 pixel and save it as alpha transparency.

. ui-icon-myapp-email {
 background-image:url ("App-icon-email.png");
}

This will create a standard resolution icon, but many devices have very high resolution monitors, just like the iphone 4 Retina display. Add a high-definition icon, create an icon, 36x36 pixel (18 pixel size exactly twice times), and add a second rule using webkit minute device pixel proportions: 2. The media query to the target's rules only with high-resolution displays. Specify background picture HD icon file and set background pixel size 18x18 will install 36 pixel icons to the same 18 pixel space. Media query blocks can be used with multiple icon rules:

@media only screen and (-webkit-min-device-pixel-ratio:2) {
 . ui-icon-myapp-email {
  Background-image:url (" App-icon-email-highres.png ");
  background-size:18px 18px;
 }
 ... more HD icon rules go ...
}