使用jQuery Mobile制作加号图标

jQuery Mobile是一个用于移动web应用程序的框架，它提供了UI组件、主题和交互行为，让开发者可以快速地创建高质量的移动web应用程序。其中一个重要的组件是图标，图标可以让用户更轻松快速地理解和使用应用程序。本文将介绍如何使用jQuery Mobile制作一个加号图标。

使用jQuery Mobile提供的图标

jQuery Mobile提供了一系列常用的图标，包括加号图标。你可以通过在HTML代码中添加<span>元素，并将图标名称作为class，就可以使用这些图标。

<!-- 加号图标 -->
<span class="ui-icon ui-icon-plus"></span>

默认情况下，图标的大小为18px，如果需要更改可以使用CSS样式属性控制。

制作自定义的加号图标

如果你需要一个自定义的加号图标，而jQuery Mobile提供的图标不符合你的要求，可以使用CSS制作。主要的实现思路是通过CSS的伪元素::before和::after来绘制两条竖直和水平的线条，从而实现加号的效果。

<!-- 自定义加号图标 -->
<span class="custom-icon"></span>

<!-- CSS样式 -->
<style>
    .custom-icon {
        display: inline-block;
        position: relative;
        width: 20px;
        height: 20px;
    }
    .custom-icon::before,
    .custom-icon::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 2px;
        background-color: #000;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .custom-icon::before {
        transform: translate(-50%, -50%) rotate(90deg);
    }
</style>

上面的代码中，我们定义了一个class为custom-icon的<span>元素，然后使用CSS样式绘制两条竖直和水平的线条。其中，第一条线条是通过::before伪元素绘制的，通过CSS的rotate()函数来将其旋转90度。第二条线条是通过::after伪元素绘制的。两条线条的位置和大小可以通过CSS的样式属性进行控制。

结语

通过jQuery Mobile提供的图标和自定义的CSS样式，我们可以轻松地制作一个加号图标，从而让我们的移动web应用程序更加美观和易用。