Use jQuery to add buttons and icons to buttons on mobile pages

This article mainly introduces the method of using jQuery to add buttons and icons to buttons on mobile pages. It uses the jQuery mobile library for mobile development. Friends in need can refer to it

Create a button data-role=button
Add the data-role="button" attribute to the HTML element. jQuery Moble will enhance this element to a button style. The Jquery Mobile framework contains a set of icons required by the most commonly used mobile applications. In order to reduce the download size, Jquery Mobile contains white icon sprite images and automatically adds a translucent black circle after the icon to ensure Pictures can be displayed clearly on any background color.

Style Link Buttons

In the main content block of a web page, you can style any anchor link for a button by adding the data-role="button" attribute. The framework will enhance link buttons with markup and class linking methods. For example, this tag:

Link button

Note: Styles like button links are the same as the visual selection of the real form below the button, but there are some important differences. Based on the link button, the button is a plug-in, which not only uses the basic button tag plug-in to generate the style of the button, so the form button methods (enable, disable, refresh) are not supported. If you need to disable a link-based button (or element), it's possible to apply a disability level UI to the disabled person themselves using javascript to achieve the same effect.

Mini version data-mini="true"

A more compact version that is useful in toolbars and tight spaces, add data-mini="true" attribute of the button to create a mini version.

Link button

Add icon data-icon to button
The jQuery Mobile framework includes a selected set of icons that mobile applications typically require . To minimize download size, jQuery Mobile contains a single white icon sprite, and automatically adds a translucent black circle behind the icon to ensure it contrasts well with any background color.

An icon can be added to a button by adding an icon property to the anchor specifying the icon data to be displayed. For example, the following tag:

Delete

mini version adds the data-mini="true" attribute

Icon style list

jQuery Mobile comes with many small button icons, as shown below:

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"
pentagon: data-icon="Star"
Warning ：data-icon="Alert"
Information: data-icon="info"
Homepage: data-icon="home"
Search: 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 attribute to set the top, bottom, right, and left text of the icon. For example, tag:

Delete

Delete

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

@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... }