在 jQuery Mobile 中,你可以使用按钮图标来增强按钮的可视化效果。jQuery Mobile 提供了一系列内置的图标,你可以将这些图标添加到按钮上。以下是一些常见的 jQuery Mobile 按钮图标的示例:

单个图标按钮:
<a href="#" data-role="button" data-icon="star">Star Button</a>

带文本的图标按钮:
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>

带自定义主题的图标按钮:
<a href="#" data-role="button" data-icon="gear" data-theme="b">Settings</a>

带图标的激活状态按钮:
<a href="#" data-role="button" data-icon="check" class="ui-btn-active">Checked</a>

自定义图标按钮:
<a href="#" data-role="button" data-icon="custom-icon">Custom Icon</a>

在这些示例中,data-icon 属性用于指定图标的名称,而 data-iconpos 属性用于指定图标的位置(left、right、top、bottom 等)。你可以根据需要选择不同的图标,并根据设计要求调整图标的位置。

请注意,jQuery Mobile 提供了一组内置的图标,你可以在官方文档中找到完整的图标列表。如果你想使用自定义图标,确保在 CSS 中正确定义了相关的样式。

在使用按钮图标时,也要确保引入了正确的 jQuery 和 jQuery Mobile 库,以及相关的 CSS 样式。这可以通过在 <head> 部分添加相应的链接来实现。


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