jQuery Mobile 图标学习笔记

jQuery Mobile是一个流行的Web开发框架，它提供了大量的UI组件和工具，其中包括了很多精美的图标。在本文中，我们将学习如何使用jQuery Mobile中的图标，并给出一些实例。

如何使用jQuery Mobile图标

在jQuery Mobile中，我们可以使用以下方式来使用图标：

1. 使用<span>标签和类名来插入图标：

   htmlCopy Code
   <span class="ui-icon ui-icon-delete"></span> 
   

2. 在按钮中使用图标：

   htmlCopy Code
   <a href="#" data-role="button" data-icon="delete">删除</a> 
   

3. 在列表项中使用图标：

   htmlCopy Code
   <li><a href="#" data-icon="delete">删除</a></li> 
   

jQuery Mobile提供了大量的图标可供使用，这些图标的类名和对应的图标名称如下表所示：

jQuery Mobile图标实例

在按钮中使用图标

htmlCopy Code
<a href="#" data-role="button" data-icon="delete">删除</a>

在列表项中使用图标

htmlCopy Code
<ul data-role="listview">
  <li><a href="#">首页<span class="ui-li-count">1</span></a></li>
  <li><a href="#" data-icon="info">信息</a></li>
  <li><a href="#" data-icon="arrow-r">更多</a></li>
</ul>

使用不同颜色的图标

htmlCopy Code
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" class="ui-btn-icon-notext ui-corner-all ui-icon-nodisc">左箭头</a>

<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" class="ui-btn-icon-notext ui-corner-all ui-icon-nodisc" style="background-color:#2B9FFF;">右箭头</a>

自定义图标

htmlCopy Code
.ui-icon-my-icon:after {
    background-image:url(my-icon.png);
    background-size:20px 20px;
}

<a href="#" class="ui-btn ui-corner-all ui-icon-my-icon ui-btn-icon-notext"></a>

通过上述实例，我们可以看到如何在我们的项目中使用jQuery Mobile图标。希望这篇学习笔记能够对你有所帮助！