单个图标按钮:
<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