Simulation des MIUI-Optionsfeld-Schalterstils

Es gibt eine Schaltersimulation für IOS und natürlich gibt es auch eine Schaltersimulation für MIUI

Als ich den Schalterstil in den Einstellungsoptionen sah, wollte ich es plötzlich ausprobieren

Der Endeffekt ist wie folgt:

Implementierungsprozess

1. Kontrollkästchen

Natürlich erfordert der Analogschalter ein Optionsfeld, und hier wird das Kontrollkästchen Kontrollkästchen verwendet

2. Verstehen Sie den Prozess des Wechsels

Klicken Sie auf die Umschalttaste, um es ein- oder auszuschalten. Das native Kontrollkästchen kann nicht die Wirkung des Symbols erreichen, daher sind zusätzliche Elemente erforderlich, um den Schalter im Bild darzustellen

Und wir müssen den Klickeffekt des Kontrollkästchens und den Effekt, ob es nach dem Klicken aktiviert wird, nutzen, damit das Kontrollkästchen nicht ausgeblendet, aber überschrieben werden kann

Um die Verwendung redundanter Tags zu reduzieren, können Sie Pseudoelemente verwenden: before und :after, und die Tag-Struktur ist

<span style="color: #0000ff;">　　<</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="switch-wrap"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="switch-action"</span><span style="color: #0000ff;">></span>开启<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>WLAN<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="switch"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="switch"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="switch"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

3. Implementierung des Schalters

Verwenden Sie das :before-Pseudoelement als Schalterhintergrundebene und das :after-Pseudoelement als Schalterelement (d. h. den kleinen Kreis)

<span style="color: #800000;">        .switch input:before </span>{<span style="color: #ff0000;">
            content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
            display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
            position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
            border-radius</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
            border</span>:<span style="color: #0000ff;"> 1px solid #ccccc6</span>;<span style="color: #ff0000;">
            box-shadow</span>:<span style="color: #0000ff;"> 0 0 1px 1px #ececf3</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
            cursor</span>:<span style="color: #0000ff;"> pointer</span>;
        }

<span style="color: #800000;">        .switch input:after </span>{<span style="color: #ff0000;">
            content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
            position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
            top</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;">
            left</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;">
            border-radius</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> #ccccc6</span>;<span style="color: #ff0000;">
            transition</span>:<span style="color: #0000ff;"> .2s left, .2s background-color</span>;
        }

Der anfängliche kleine Kreis befindet sich auf der linken Seite. Wenn der Schalterzustand eingeschaltet ist, verschieben Sie ihn nach rechts und aktualisieren Sie die Hintergrundfarbe des eingeschalteten Zustands

<span style="color: #800000;">        .switch input:checked:after </span>{<span style="color: #ff0000;">
            left</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> #36a6fa</span>;<span style="color: #ff0000;">
            transition</span>:<span style="color: #0000ff;"> .2s left, .2s background-color</span>;
        }

Das Obige ist der Schlüsselcode, das Folgende ist der vollständige Stil

<span style="color: #008080;"> 1</span> <span style="color: #800000;"><style>
</span><span style="color: #008080;"> 2</span> <span style="color: #800000;">    .switch-wrap </span>{
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">            position</span>:<span style="color: #0000ff;"> relative</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">            margin</span>:<span style="color: #0000ff;"> 50px auto</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">            width</span>:<span style="color: #0000ff;"> 120px</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">            height</span>:<span style="color: #0000ff;"> 40px</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">            font</span>:<span style="color: #0000ff;"> 14px/1.5 Arial, Sans-Serif</span>;
<span style="color: #008080;"> 8</span>         }
<span style="color: #008080;"> 9</span> 
<span style="color: #008080;">10</span> <span style="color: #800000;">        .switch,
</span><span style="color: #008080;">11</span> <span style="color: #800000;">        .switch input,
</span><span style="color: #008080;">12</span> <span style="color: #800000;">        .switch input:before </span>{
<span style="color: #008080;">13</span> <span style="color: #ff0000;">            width</span>:<span style="color: #0000ff;"> 30px</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">            height</span>:<span style="color: #0000ff;"> 14px</span>;
<span style="color: #008080;">15</span>         }
<span style="color: #008080;">16</span> 
<span style="color: #008080;">17</span> <span style="color: #800000;">        .switch input </span>{
<span style="color: #008080;">18</span> <span style="color: #ff0000;">            position</span>:<span style="color: #0000ff;"> absolute</span>;
<span style="color: #008080;">19</span> <span style="color: #ff0000;">            right</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">20</span>         }
<span style="color: #008080;">21</span> 
<span style="color: #008080;">22</span> <span style="color: #800000;">        .switch input:before </span>{
<span style="color: #008080;">23</span> <span style="color: #ff0000;">            content</span>:<span style="color: #0000ff;"> ''</span>;
<span style="color: #008080;">24</span> <span style="color: #ff0000;">            display</span>:<span style="color: #0000ff;"> inline-block</span>;
<span style="color: #008080;">25</span> <span style="color: #ff0000;">            position</span>:<span style="color: #0000ff;"> relative</span>;
<span style="color: #008080;">26</span> <span style="color: #ff0000;">            border-radius</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">27</span> <span style="color: #ff0000;">            border</span>:<span style="color: #0000ff;"> 1px solid #ccccc6</span>;
<span style="color: #008080;">28</span> <span style="color: #ff0000;">            box-shadow</span>:<span style="color: #0000ff;"> 0 0 1px 1px #ececf3</span>;
<span style="color: #008080;">29</span> <span style="color: #ff0000;">            background-color</span>:<span style="color: #0000ff;"> #fff</span>;
<span style="color: #008080;">30</span> <span style="color: #ff0000;">            cursor</span>:<span style="color: #0000ff;"> pointer</span>;
<span style="color: #008080;">31</span>         }
<span style="color: #008080;">32</span> 
<span style="color: #008080;">33</span> <span style="color: #800000;">        .switch input:after </span>{
<span style="color: #008080;">34</span> <span style="color: #ff0000;">            content</span>:<span style="color: #0000ff;"> ''</span>;
<span style="color: #008080;">35</span> <span style="color: #ff0000;">            position</span>:<span style="color: #0000ff;"> absolute</span>;
<span style="color: #008080;">36</span> <span style="color: #ff0000;">            width</span>:<span style="color: #0000ff;"> 12px</span>;
<span style="color: #008080;">37</span> <span style="color: #ff0000;">            height</span>:<span style="color: #0000ff;"> 12px</span>;
<span style="color: #008080;">38</span> <span style="color: #ff0000;">            top</span>:<span style="color: #0000ff;"> 2px</span>;
<span style="color: #008080;">39</span> <span style="color: #ff0000;">            left</span>:<span style="color: #0000ff;"> 3px</span>;
<span style="color: #008080;">40</span> <span style="color: #ff0000;">            border-radius</span>:<span style="color: #0000ff;"> 50%</span>;
<span style="color: #008080;">41</span> <span style="color: #ff0000;">            background-color</span>:<span style="color: #0000ff;"> #ccccc6</span>;
<span style="color: #008080;">42</span> <span style="color: #ff0000;">            transition</span>:<span style="color: #0000ff;"> .2s left, .2s background-color</span>;
<span style="color: #008080;">43</span>         }
<span style="color: #008080;">44</span> 
<span style="color: #008080;">45</span> <span style="color: #800000;">        .switch input:checked:after </span>{
<span style="color: #008080;">46</span> <span style="color: #ff0000;">            left</span>:<span style="color: #0000ff;"> 15px</span>;
<span style="color: #008080;">47</span> <span style="color: #ff0000;">            background-color</span>:<span style="color: #0000ff;"> #36a6fa</span>;
<span style="color: #008080;">48</span> <span style="color: #ff0000;">            transition</span>:<span style="color: #0000ff;"> .2s left, .2s background-color</span>;
<span style="color: #008080;">49</span>         }
<span style="color: #008080;">50</span> 
<span style="color: #008080;">51</span> 
<span style="color: #008080;">52</span> <span style="color: #800000;">    </style></span>

Vollständiger CSS-Code

4. Schaltertest

Schließlich können Sie JS verwenden, um die Statusänderung des Schalters zu erkennen

    <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="jquery.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #000000;">
        $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#switch</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).change(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">() {
            $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">.switch-action</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).text(</span><span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.checked </span><span style="background-color: #f5f5f5; color: #000000;">?</span> <span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">关闭</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;"> : </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">开启</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);
        });
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>