如何使用jQuery Mobile创建迷你主题的翻转开关

下面是如何使用jQuery Mobile创建迷你主题的翻转开关的完整攻略。

1. 关于jQuery Mobile主题

首先，需要了解jQuery Mobile主题。jQuery Mobile是一个移动端UI框架，具有为移动设备设计的UI控件和主题。jQuery Mobile的主题有四个主要部分，即页面、header、content和footer。

2. 开始创建翻转开关

接下来，我们开始创建翻转开关。首先，需要引入jQuery Mobile和我们自定义的CSS文件，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>翻转开关</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="css/custom.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>
</body>
</html>

接着，在body标签中添加一个div，用于放置翻转开关。如下所示：

<body>
    <div data-role="page" id="main">
        <div data-role="main" class="ui-content">
            <div class="flip-switch">
                <label>
                    <input type="checkbox">
                </label>
            </div>
        </div>
    </div>
</body>

在CSS文件中，需要定义翻转开关的样式。如下所示：

.flip-switch {
    width: 50px;
    height: 30px;
    margin: 10px;
    background-color: #ccc;
    border-radius: 15px;
    position: relative;
}

.flip-switch label {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    margin-top: -10px;
    font-size: 14px;
    color: #fff;
}

.flip-switch label:before {
    content: "OFF";
    display: inline-block;
    width: 25px;
    height: 20px;
    background-color: #f00;
    border-radius: 10px;
    margin-right: 6px;
    line-height: 20px;
}

.flip-switch label:after {
    content: "ON";
    display: inline-block;
    width: 25px;
    height: 20px;
    background-color: #0f0;
    border-radius: 10px;
    margin-left: 6px;
    line-height: 20px;
}

.flip-switch input[type="checkbox"] {
    display: none;
}

.flip-switch input[type="checkbox"]:checked + label:before {
    content: "";
}

.flip-switch input[type="checkbox"]:checked + label:after {
    content: "";
}

这个样式定义中，我们设置了一个背景颜色为灰色的圆形开关，开关上面的标签显示关键字OFF和ON。当这个开关被选中时，会更改开关上方标签的内容。这个样式定义可以自定义，根据需求来调整。

3. 美化主题

最后，我们来美化主题。我们可以通过更改CSS文件中的颜色来实现不同的主题效果。如下所示：

.flip-switch label:before {
    background-color: #f00;//红色主题
}

.flip-switch label:after {
    background-color: #0f0;//绿色主题
}

通过更改标签上的颜色值，可以创造出多种主题样式。

4. 示例说明

下面，我们来看两个示例说明：

示例1

这是一个黑白配色的简易翻转开关。

<body>
    <div data-role="page" id="main">
        <div data-role="main" class="ui-content">
            <div class="flip-switch">
                <label>
                    <input type="checkbox">
                </label>
            </div>
        </div>
    </div>
</body>

.flip-switch {
    width: 50px;
    height: 30px;
    margin: 10px;
    background-color: #ccc;
    border-radius: 15px;
    position: relative;
}

.flip-switch label {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    margin-top: -10px;
    font-size: 14px;
    color: #fff;
}

.flip-switch label:before {
    content: "OFF";
    display: inline-block;
    width: 25px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 10px;
    margin-right: 6px;
    line-height: 20px;
}

.flip-switch label:after {
    content: "ON";
    display: inline-block;
    width: 25px;
    height: 20px;
    background-color: #000;
    border: 1px solid #000;
    border-radius: 10px;
    margin-left: 6px;
    line-height: 20px;
}

.flip-switch input[type="checkbox"] {
    display: none;
}

.flip-switch input[type="checkbox"]:checked + label:before {
    background-color: #000;
    color: #fff;
}

.flip-switch input[type="checkbox"]:checked + label:after {
    background-color: #fff;
    color: #000;
}

示例2

这是一个彩色翻转开关。

<body>
    <div data-role="page" id="main">
        <div data-role="main" class="ui-content">
            <div class="flip-switch color">
                <label>
                    <input type="checkbox">
                </label>
            </div>
        </div>
    </div>
</body>

.flip-switch.color {
    margin: 10px;
    width: 70px;
    height: 45px;
    background-color: #eee;
    border-radius: 25px;
    position: relative;
}

.flip-switch.color label {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    z-index: 2;
    border-radius: 25px;
    background-color: #eee;
    border: solid 1px #999;
    transition: all 0.3s ease-in-out;
    box-shadow:
        inset -1px -1px 2px rgba(0,0,0,0.2),
        inset 1px 1px 2px rgba(255,255,255,0.7),
        1px 1px 2px rgba(0,0,0,0.2),
        -1px -1px 2px rgba(255,255,255,0.7);
}

.flip-switch.color label:before {
    display: block;
    position: absolute;
    top: 50%;
    right: -1px;
    transform: translate(0, -50%);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.flip-switch.color .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    margin: 0;
    z-index: 1;
    border-radius: 25px 0 0 25px;
    background-color: #eee;
    border: solid 1px #999;
    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,0.2),
        inset -1px -1px 2px rgba(255,255,255,0.7),
        1px 1px 2px rgba(0,0,0,0.2),
        -1px -1px 2px rgba(255,255,255,0.7);
}

.flip-switch.color .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    margin: 0;
    z-index: 1;
    border-radius: 0 25px 25px 0;
    background-color: #ccc;
    border: solid 1px #999;
    box-shadow:
        inset -1px -1px 2px rgba(0,0,0,0.2),
        inset 1px 1px 2px rgba(255,255,255,0.7),
        1px 1px 2px rgba(0,0,0,0.2),
        -1px -1px 2px rgba(255,255,255,0.7);
}

.flip-switch.color input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 3;
    opacity: 0;
    cursor: pointer;
}

.flip-switch.color input[type="checkbox"]:checked + label {
    width: 60%;
    left: 40%;
    background-color: #0f9e3f;
    box-shadow:
        inset -1px -1px 2px rgba(0,0,0,0.2),
        inset 1px 1px 2px rgba(255,255,255,0.7),
        1px 1px 2px rgba(0,0,0,0.2),
        -1px -1px 2px rgba(255,255,255,0.7);
}

.flip-switch.color input[type="checkbox"]:checked + label:before {
    content: "ON";
    color: #fff;
    left: 60%;
}

.flip-switch.color input[type="checkbox"]:checked ~ .left {
    width: 40%;
    border-radius: 25px;
    background-color: #0f9e3f;
    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,0.2),
        inset -1px -1px 2px rgba(255,255,255,0.7),
        1px 1px 2px rgba(0,0,0,0.2),
        -1px -1px 2px rgba(255,255,255,0.7);
}

.flip-switch.color input[type="checkbox"]:checked ~ .right {
    width: 60%;
    right: 40%;
    border-radius: 25px 0 0 25px;
    background-color: #eee;
    box-shadow:
        inset -1px -1px 2px rgba(0,0,0,0.2),
        inset 1px 1px 2px rgba(255,255,255,0.7),
        1px 1px 2px rgba(0,0,0,0.2),
        -1px -1px 2px rgba(255,255,255,0.7);
}

这个样式定义中，我们创造出了一个具有新颖翻转功能的开关。在样式定义中，我们使用了多个CSS属性，使开关更加真实，包括了透视，渐变和阴影等。可以在CSS样式中修改颜色，以得到不同的主题效果。

在这两个示例中，我们可以看到不同的CSS代码，以实现不同的主题样式。通过修改这些CSS样式，可以轻松地创建一个独特的翻转开关。

1. 关于jQuery Mobile主题

2. 开始创建翻转开关

3. 美化主题

4. 示例说明

示例1

示例2

你可能也喜欢

jQuery Mobile Pagecontainer beforeshow事件

jQWidgets jqxListBox getSelectedItems()方法

EasyUI jQuery maskedBox小工具