MIUI選項框開關樣式模擬-html教學-PHP中文網

首頁

web前端

html教學

MIUI選項框開關樣式模擬

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 21, 2016 pm 01:56 PM

有IOS的開關模擬，當然也有MIUI的開關模擬

看到設定選項裡面的開關樣式，突發奇想地來試試

最終效果如圖：

實現過程

1. 選項框checkbox

模擬開關當然需要一個選項框，這裡用到了複選框checkbox

2. 理解開關的過程

點選開關按鈕，則開啟或關閉。原生的checkbox無法做到圖示的效果，所以就需要額外的元素來表示圖中的開關

而我們又要使用到checkbox的點擊效果以及點擊後是否選中（checked）的效果，所以checkbox不能隱藏，但可以用覆蓋的方式

為了減少多餘標籤的使用，可以使用偽元素:before、:after ，標籤結構為

<span style="color: #0000ff;">　　<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 style="color: #800000;">span</span><span style="color: #0000ff;">><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 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 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></span></span></span></span></span>

3. 開關的實現

用:before偽元素作為開關背景層，用:after偽元素作為開關項（即那個小圓圈）

<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>;
        }

初始小圓圈在左側，當開關狀態為開啟時，右移，並更新開啟狀態的背景色

<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>;
        }

以上就是關鍵的程式碼了，以下為完整的樣式

<span style="color: #008080;"> 1</span> <span style="color: #800000;"><style>
</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;">    </span>

完整CSS代碼

4. 開關的測試

最後，可結合JS偵測一下開關的狀態變化

    <span style="color: #0000ff;"><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 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></span></span>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles