Use jQuery to add a button on the Mobile Page and add an icon to the button _ jquery

This article mainly introduces how to use jQuery to add buttons on the Mobile Page and add icons to the buttons. It uses the jQuerymobile library for mobile development. For more information, see Create button data-role = button
Add the data-role = "button" attribute to the HTML element. JQuery Moble will enhance this element as a button style. The Jquery Mobile framework contains the icons required by a group of the most commonly used Mobile applications. To reduce the download size, Jquery Mobile contains the sprite image of the white icon, and automatically add a translucent black circle behind the icon to ensure that it is clearly displayed on any background color.

Style link button

In the main content block of a webpage, you can add the data-role = "button" attribute to the button at any pin link of the style. The framework will enhance the link button with the flag and class. For example, the tag:

Link button

Note: There are some important differences between visual selection buttons with the same style as button links. A link-based button is a plug-in. It not only uses the basic button to mark the style of the button generated by the plug-in, so the form button method (enable, disable, and refresh) is not supported. If you need to disable a link-based button (or element), it may apply for disability levels for the UI disabled by using java script to achieve the same effect.

Mini data-mini = "true"

A more compact version is useful in the toolbar and in the tight space. You can create a mini version by adding the data-mini = "true" attribute button.

Link button

Add the icon data-icon to the button
The jQuery Mobile framework includes a set of selected icons that are usually required by Mobile applications. Minimize the download size. jQuery Mobile contains a single white icon Sprite and automatically adds a translucent black circle icon to ensure that it has any background color contrast.

An icon. You can add a data icon attribute to the anchor to specify the icon to be displayed. For example, the following mark:

Delete

Add data-mini = "true" attribute for mini edition

Icon style list

JQuery Mobile comes with many small buttons, as shown in:

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"
Reduce: data-icon = "minus"
Check: data-icon = "Check"
Gear: data-icon = "gear"
Forward: data-icon = "Forward"
Back: data-icon = "Back"
Grid: data-icon = "Grid"
Badge: data-icon = "Star"
Warning data-icon = "Alert"
Information: data-icon = "info"
Home: data-icon = "home"
Search: data-icon = "Search"

Data-iconpos

By default, all icons are placed on the left of the button text. By default, the data-iconpos attribute can be used to set the text of the top, bottom, right, and left of the icon. For example, mark:

Delete

Hide text data on the image-iconpos = "notext"

You can also create an icon to set data-iconpos = "notext ". The button plug-in uses hidden text on the screen, but uses it as a prompt for the context link title attribute for screen readers and device support tools. For example, data-iconpos = "right", data-iconpos = "notext ":

Delete

Mini and inline

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

Custom icon data-icon = "custom value"

To use a custom icon, you must specify the data-icon value. The button plug-in of Jquery Mobile generates a CSS class with the prefix ui-icon-followed by the data-icon value. Assume that the value of the data-icon attribute of a button is myapp-email, that is, data-icon = "myapp-email ". The generated CSS class is ui-icon-myapp-email.

Then you can write a CSS rule in your style sheet to define ui-icon-myapp-email. Then, specify the background image address of the class in css. To maintain visual consistency with other icons, create a white 18x18 pixel PNG-8 icon and save it as Alpha transparency.

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

This will create standard resolution icons, but many devices have very high resolution displays, like the iPhone 4 Retina display. Add a high-definition icon, create an icon, 36x36 pixels (two times the size of 18 pixels identical), and add the second rule using WebKit minute device pixel ratio: 2. The rules for media to query targets are only for high-resolution display. Specify the HD icon file of the background image and set the background pixel size to 18x18. Install 36 pixel icons to the same 18 pixel space. Media query blocks can use 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 here...}