switch开关

结合css3 动画制作的一款基于checkbox复选框开关效果,在列表.aui-list-view中使用,根据色值说明进行样式选择。

<div class="aui-content"><ul class="aui-list-view">
        <li class="aui-list-view-cell aui-switch-body"><div class="aui-switch-title">声音提醒</div><input type="checkbox" class="aui-switch aui-pull-right" checked="" />
        </li>
        <li class="aui-list-view-cell aui-switch-body"><div class="aui-switch-title">关闭状态</div><input type="checkbox" class="aui-switch aui-pull-right" />
        </li>
        <li class="aui-list-view-cell aui-switch-body"><div class="aui-switch-title">开关样式1</div><input type="checkbox" class="aui-switch aui-switch-success aui-pull-right" checked="" />
        </li>
        <li class="aui-list-view-cell aui-switch-body"><div class="aui-switch-title">开关样式2</div><input type="checkbox" class="aui-switch aui-switch-info aui-pull-right" checked="" />
        </li>
        <li class="aui-list-view-cell aui-switch-body"><div class="aui-switch-title">开关样式3</div><input type="checkbox" class="aui-switch aui-switch-danger aui-pull-right" checked="" />
        </li>
        <li class="aui-list-view-cell aui-switch-body"><div class="aui-switch-title">开关样式4</div><input type="checkbox" class="aui-switch aui-switch-warning aui-pull-right" checked="" />
        </li>
    </ul></div>