jQuery Mobile 按钮图标学习笔记

简介

jQuery Mobile 是一个基于 HTML5 的 UI 框架，它提供了丰富的组件和插件，帮助我们快速搭建出美观、响应式的移动端 Web 应用程序。在 jQuery Mobile 中，按钮是最常用的组件之一，它支持添加图标来增强按钮的表现力。本文将详细介绍 jQuery Mobile 中的按钮图标用法，并提供实例演示。

图标类型

在 jQuery Mobile 中，按钮图标主要分为两类：

内置图标：jQuery Mobile 提供了大量内置的图标，如向左箭头、向右箭头、删除图标等，这些图标可以直接使用，无需额外引入。
自定义图标：如果需要自定义图标，则需要通过 SVG 或者图片的方式来实现。

以下是 jQuery Mobile 内置的部分按钮图标：

htmlCopy Code
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">删除</a>
<a href="#" class="ui-btn ui-icon-check ui-btn-icon-left">确认</a>
<a href="#" class="ui-btn ui-icon-edit ui-btn-icon-left">编辑</a>
<a href="#" class="ui-btn ui-icon-back ui-btn-icon-left">返回</a>
<a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">上一页</a>
<a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-left">下一页</a>

使用方式

使用按钮图标非常简单，只需要在按钮的 HTML 元素上添加对应的 class 即可。其中，ui-btn-icon-left、ui-btn-icon-right、ui-btn-icon-top、ui-btn-icon-bottom 分别表示图标在按钮左侧、右侧、上方和下方。ui-icon-* 的 * 可以替换为具体的图标名字。

htmlCopy Code
<!--图标在左侧-->
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">删除</a>
<!--图标在右侧-->
<a href="#" class="ui-btn ui-icon-check ui-btn-icon-right">确认</a>
<!--图标在上方-->
<a href="#" class="ui-btn ui-icon-edit ui-btn-icon-top">编辑</a>
<!--图标在下方-->
<a href="#" class="ui-btn ui-icon-arrow-u ui-btn-icon-bottom">上一页</a>

自定义图标

如果要自定义图标，则需要通过 SVG 或者图片的方式来实现。以下是通过 SVG 实现自定义图标的示例：

htmlCopy Code
<a href="#" class="ui-btn custom-btn ui-btn-icon-left">
    <svg viewBox="0 0 24 24" width="24px" height="24px">
        <path fill="#000000" d="M19,10H5V8h14V10z M19,13H5v2h14V13z M19,16H5v2h14V16z"/>
    </svg>
    自定义图标
</a>

在上述代码中，我们在按钮中添加了一个 SVG 图标，填充颜色为黑色，路径为 d="M19,10H5V8h14V10z M19,13H5v2h14V13z M19,16H5v2h14V16z"。

实例演示

以下是一个基于 jQuery Mobile 的按钮图标实例。点击不同的按钮，即可查看不同的图标样式。

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Mobile Buttons with Icons Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
    <div data-role="header">
        <h1>Button Icons Example</h1>
    </div>
    <div role="main" class="ui-content">
        <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">删除</a>
        <a href="#" class="ui-btn ui-icon-check ui-btn-icon-left">确认</a>
        <a href="#" class="ui-btn ui-icon-edit ui-btn-icon-left">编辑</a>
        <a href="#" class="ui-btn ui-icon-back ui-btn-icon-left">返回</a>
        <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">上一页</a>
        <a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-left">下一页</a>
        <a href="#" class="ui-btn ui-icon-grid ui-btn-icon-left">网格视图</a>
        <a href="#" class="ui-btn ui-icon-refresh ui-btn-icon-left">刷新</a>
        <a href="#" class="ui-btn ui-icon-star ui-btn-icon-left">收藏</a>
        <a href="#" class="ui-btn ui-icon-user ui-btn-icon-left">个人中心</a>
        <a href="#" class="ui-btn ui-icon-info ui-btn-icon-right">查看更多信息</a>
        <a href="#" class="ui-btn custom-btn ui-btn-icon-left">
            <svg viewBox="0 0 24 24" width="24px" height="24px">
                <path fill="#000000" d="M19,10H5V8h14V10z M19,13H5v2h14V13z M19,16H5v2h14V16z"/>
            </svg>
            自定义图标
        </a>
    </div>
</div>

</body>
</html>

结束语

通过本文的介绍，相信读者已经能够熟练使用 jQuery Mobile 中的按钮图标了。在实际项目中，我们可以根据具体需求自定义图标，来满足更高级别的设计要求。