switchery实现icheckbox美化成os7开关效果代码-html代码-BFW代码库

代码语言：html
代码描述：switchery实现icheckbox美化成os7开关效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        * {
          margin: 0;
          padding: 0;
        }
        
        ::selection {
          background: #fe6b95;
          color: #fff;
        }
        
        ::-moz-selection {
          background: #fe6b95;
          color: #fff;
        }
        
        
        
        .download {
          background-position: 0 0;
        }
        
        .fork {
          background-position: 0 -24px;
        }
        
        /**
         *
         * Code snippets.
         *
         */
        
        pre {
          background-color: #fdf6e3;
          box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
          font-family: 'Source Code Pro', Arial, Helvetica, sans-serif;
          font-size: 0.9em;
          margin: 20px 0 20px 3px;
          overflow: auto;
          padding: 10px;
          white-space: nowrap;
          word-wrap: break-word;
        }
        
        .script,
        .tag {
          color: #586e75;
        }
        
        .quote,
        .comment {
          color: #93a1a1;
        }
        
        .specials {
          color: #268bd5;
        }
        
        .attribute {
          color: #708284;
        }
        
        .value {
          color: #269186;
        }
        
        .boolean {
          color: #c58b1e;
        }
        
        .single {
          color: #859900;
        }
        
        .check-state {
          margin: 0 50px 20px 0;
        }
        
        .check-state:last-child {
          margin-right: 0;
        }
        
        .check-state > .button,
        .dynamic-state > .button {
          margin-left: 10px;
          padding: 4px 15px;
        }
        
        .check-state > .check-change {
          background-color: #fdf6e3;
          box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
          color: #635eb0;
          display: inline-block;
          height: 22px;
          padding-top: 4px;
          text-align: center;
          vertical-align: middle;
          width: 52px;
        }
        
        /**
         *
         * Media queries.
         *
         */
        
        @media (max-width: 1024px) {
        
          .header,
          .container,
          .footer {
            animation: none;
        
            -webkit-animation: none;
            -moz-animation: none;
            -ms-animation: none;
            -o-animation: none;
          }
        
        }
        
        @media (max-width: 1010px) {
        
          h2 {
            margin-bottom: 25px;
          }
        
          .header {
            padding-top: 25px;
          }
        
          .header,
          .container,
          .footer {
            width: 95%;
          }
        
          .section-list li p {
            display: block;
            margin: 8px 0 0 20px;
          }
        
          .footer {
            padding-bottom: 25px;
          }
        
          .footer .left {
            width: 40%;
          }
        
          .footer .right {
            width: 60%;
          }
        
        }
        
        @media (max-width: 767px) {
        
          .footer .left {
            margin-bottom: 25px;
            text-align: center;
            width: 100%;
          }
        
          .footer .right {
            text-align: center;
            width: 100%;
          }
        
        }
        
        @media (max-width: 568px) {
        
          h1 {
            font-size: 2.8em;
          }
        
          h2 {
            font-size: 1.1em;
            line-height: 1em;
          }
        
          .description {
            padding-right: 10px;
          }
        
          .description > .button {
            margin-top: 30px;
            position: static;
          }
        
          .description > .button:hover {
            padding-right: 30px;
          }
        
        }
        
        @media (max-width: 480px) {
        
          .container {
            padding-left: 0;
          }
        
          .section {
            padding-left: 15px;
            padding-right: 15px;
          }
        
          .section h3 {
            box-sizing: border-box;
            padding-left: 15px;
        
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
          }
        
          .description > .button {
            box-sizing: border-box;
            padding-left: 50px;
            width: 100%;
        
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
          }
        
          .author > span,
          .footer .right > span {
            display: block;
            margin-bottom: 15px;
          }
        
          .header a,
          .footer .right a {
            margin-left: 6px;
          }
        
        }
    </style>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/switchery.min.css">


</head>

<body>

  
    <div class="container">




        <section class="section">
            <h3>Examples</h3>

            <div class="example">
                <h4>Checked</h4>

                <p>Only thing you need is to add a <strong>checked</strong> attribute to your checkbox input. Simple as that.</p>

                <pre>
            <div class="tag">
              &lt;<span class="specials">input</span> <span class="attribute">type=</span><span class="value">&quot;checkbox&quot;</span> <span class="attribute">class=</span><span class="value">&quot;js-switch&quot;</span> checked /&gt;
            </div>
          </pre>

                <p>Result:</p>
                <p>
                    <input type="checkbox" class="js-switch" checked />
                </p>
            </div>

            <div class="example">
                <h4>Multiple switches</h4>

                <p>You can add as many switches as you like, as long as their corresponding checkboxes have the same class. Select them and make new instance of the Switchery class for every of them.</p>

                <pre>
            <div class="script">
              <div><span class="specials">var</span> elems = <span class="single">Array</span>.prototype.slice.<span class="specials">call</span>(<span class="single">document</span>.querySelectorAll('<span class="value">.js-switch</span>'));</div>
              <br />
              <div>elems.forEach(<span class="specials">function</span>(html) <span class="specials">{</span></div>
              <div>&nbsp;&nbsp;<span class="specials">var</span> switchery = <span class="single">new</span> Switchery(html);</div>
              <div><span class="specials">}</span>);</div>
            </div>
          </pre>

                <p>Result:</p>
                <p>
                    <input type="checkbox" class="js-switch" />
                    <input type="checkbox" class="js-switch" checked />
                    <input type="checkbox" class="js-switch" />
                </p>
            </div>

            <div class="example">
                <h4>Multiple calls</h4>

                <p>You can filter out existing elements that have already been called by looking for <strong>data-switchery="true"</strong>. The following code will return if there's an element with this data attribute already.</p>

                <pre>
            <div class="script">
              <div><span class="specials">var</span> init = <span class="single">new</span> Switchery('<span class="value">.js-switch</span>');</div>
              <div><span class="single">if</span> (init.markedAsSwitched()) <span class="specials">{</span> ... <span class="specials">}</span></div>
            </div>
          </pre>
            </div>

            <div class="example dynamic-state">
                <h4>Disabled</h4>

                <p>Use the <strong>disabled</strong> option to make your switch active or inactive. Native approaches like adding a <strong>readonly</strong> or <strong>disabled</strong> attributes to the checkbox are respected and will end in having a disabled
                    switch by default.</p>

                <pre>
            <div class="script">
              <div><span class="specials">var</span> switchery = <span class="single">new</span> Switchery(elem, { disabled: <span class="boolean">true</span> });</div>
            </div>
          </pre>

                <p>Result:</p>
                <p>
                    <input type="checkbox" class="js-switch-disabled" checked />
                </p>

                <p>Customize the default opacity of the disabled switch like so:</p>
                <pre>
            <div class="script">
              <div><span class="specials">var</span> switchery = <span class="single">new</span> Switchery(elem, { disabled: <span class="boolean">true</span>, disabledOpacity: <span class="value">0.75</span> });</div>
            </div>
          </pre>

                <p>Result:</p>
                <p>
                    <input type="checkbox" class="js-switch-disabled-opacity" checked />
                </p>

                <p>You can also dynamically change the active/inactive state of your switches.</p>
                <pre>
            <div class="script">
              <div><span class="specials">var</span> elem = <span class="single">document</span>.querySelector('<span class="value">.js-dynamic-state</span>');</div>
              <div><span class="specials">var</span> switchery = <span class="single">new</span> Switchery(elem);</div>
              <br>
              <div><span class="single">document</span>.querySelector('<span class="value">.js-dynamic-disable</span>').addEventListener('<span class="value">click</span>', <span class="specials">function</span>() <span class="single">{</span></div>
              <div>&nbsp;&nbsp;switchery.disable();</div>
              <div><span class="single">}</span>);</div>
              <br>
              <div><span class="single">document</span>.querySelector('<span class="value">.js-dynamic-enable</span>').addEventListener('<span class="value">click</span>', <span class="specials">function</span>() <span class="single">{</span></div>
              <div>&nbsp;&nbsp;switchery.enable();</div>
              <div><span class="single">}</span>);</div>
            </div>
          </pre>

                <p>Result:</p>
                <input type="checkbox" class="js-dynamic-state" checked disabled />
                <button class="button js-dynamic-disable">Disable</button>
                <button class="button js-dynamic-enable">Enable</button>

            </div>

            <div class="example">
                <h4>Colored</h4>

                <p>You can change the primary(on) and secondary(off) color of the switch to fit your design perfectly. Accomplish this, changing the <strong>color</strong> and <strong>secondaryColor</strong> options. The jack colors are also customizable
                    via the <strong>jackColor</strong> and the <strong>jackSecondaryColor</strong> options. Below is a good example of what you can accomplish using those.</p>

                <pre>
            <div class="script">
              <div><span class="specials".........完整代码请登录后点击上方下载按钮下载查看