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>

            .........完整代码请登录后点击上方下载按钮下载查看