lscho/am-switch

Amazeui switch plugin

Amaze ui 开关插件

demo地址

使用

1. 获取

• 直接下载：下载地址

2. 引入文件 依赖于amaze ui框架，需要先引入框架文件

    <link rel="stylesheet" type="text/css" href="../dist/amazeui.min.css">
    <link rel="stylesheet" type="text/css" href="../dist/amazeui.switch.css">
    <script type="text/javascript" src="../dist/jquery.min.js"></script>
    <script type="text/javascript" src="../dist/amazeui.min.js"></script>
    <script type="text/javascript" src="../dist/amazeui.switch.js"></script>

3. 开始使用

    <input type="checkbox" class="am-switch" />

示例

1. 普通示例

          <input type="checkbox" class="am-switch" />
          <input type="checkbox" class="am-switch" checked />

2. 简洁模式

          <input type="checkbox" class="am-switch am-switch-mini" />
          <input type="checkbox" class="am-switch am-switch-mini" checked />

3. 多主题

          <input type="checkbox" class="am-switch am-switch-default" checked />
          <input type="checkbox" class="am-switch am-switch-secondary" checked />
          <input type="checkbox" class="am-switch am-switch-success" checked />
          <input type="checkbox" class="am-switch am-switch-warning" checked />
          <input type="checkbox" class="am-switch am-switch-danger" checked /> 

4. 形状

<input type="checkbox" class="am-switch am-switch-default" checked />
<input type="checkbox" class="am-switch am-round am-switch-default" checked />

5.js调用

$(element).switch();

        <button class="am-btn am-btn-default" id="insert">插入</button>   
        <div class="am-g" id="content" style="margin-top:40px;">

        </div>

        <script type="text/javascript">
          $(function(){
            $("#insert").click(function(){
              $switch=$('<input type="checkbox" class="am-switch am-switch-default" checked />');
              $("#content").append($switch);
              $switch.switch();
            });
          });
        </script>

License

MIT