在 jQuery Mobile 中,图标是一种用于增强用户界面的小型图像,通常用于按钮、导航条和其他 UI 元素。jQuery Mobile 使用一套图标集,你可以通过 data-icon 属性来指定图标。

以下是一些常见的 jQuery Mobile 图标及其使用示例:

1. 基础图标:
   - data-icon="delete":删除图标
   - data-icon="arrow-l":向左箭头图标
   - data-icon="arrow-r":向右箭头图标
   - data-icon="check":勾选图标
   - data-icon="gear":齿轮图标
   <a href="#page2" data-role="button" data-icon="delete">Delete</a>
   <a href="#page3" data-role="button" data-icon="arrow-l">Back</a>
   <a href="#page4" data-role="button" data-icon="arrow-r">Next</a>
   <a href="#page5" data-role="button" data-icon="check">OK</a>
   <a href="#page6" data-role="button" data-icon="gear">Settings</a>

2. 自定义图标:
   你还可以使用自定义图标,通过在 data-icon 中指定图标的 URL 或图标类名。
   <a href="#page2" data-role="button" data-icon="custom-icon">Custom Icon</a>

   在这里,你需要在 CSS 中定义 .ui-icon-custom-icon 类,以设置自定义图标的样式。

3. 图标位置:
   使用 data-iconpos 属性可以指定图标的位置,可以是 "left"、"right"、"top" 或 "bottom"。
   <a href="#page2" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>

   在这个例子中,箭头图标位于按钮文本的右侧。

这只是一小部分 jQuery Mobile 图标的示例。你可以在 jQuery Mobile 的官方文档中找到完整的图标集以及详细的使用说明:[jQuery Mobile Icons](https://demos.jquerymobile.com/1.4.5/icons/)。


转载请注明出处:http://www.pingtaimeng.com/article/detail/14470/jQuery Mobile