一个简单css+js的开关组件

Posted mankii

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个简单css+js的开关组件相关的知识,希望对你有一定的参考价值。

一个简单的开关组件

技术图片

技术图片

 

依赖:jquery.js

CSS

.choose-btn  display: none; 
.choose-label  box-shadow: #b1b1b1 0px 0px 0px 1px; width: 30px; height: 16px; display: inline-block; border-radius: 16px; position: relative; background-color: #bdbdbd; overflow: hidden; margin: 0; margin-top: 4px; cursor: pointer; vertical-align: middle; 
.choose-label:before  content: ‘‘; position: absolute; left: 0; width: 16px; height: 16px; display: inline-block; border-radius: 20px; background-color: #fff; z-index: 20; -webkit-transition: all 0.2s; transition: all 0.2s; 
.choose-btn:checked + label.choose-label:before  left: 14px; 
.choose-btn:checked + label.choose-label  background-color: #009cef; box-shadow: #009cef 0px 0px 0px 1px; 
.choose-text  display: inline-block; vertical-align: middle; line-height: 20px; color: #888; font-size: 12px; margin-top: 4px; 

JS

// 开关组件
$(".choose-btn").each(function()
  var texts = $(this).attr(‘data-toggle‘).split(‘|‘);
  $(this).siblings(‘.choose-text‘).text(this.checked?texts[0]:texts[1]);
);
$(".choose-btn").on("change", function()
  var texts = $(this).attr(‘data-toggle‘).split(‘|‘);
  $(this).siblings(‘.choose-text‘).text(this.checked?texts[0]:texts[1]);
);

html

<div>
    <input type="checkbox" name="switch1" id="switch1" class="choose-btn" data-toggle="开启|关闭">
    <label for="switch1" class="choose-label"></label>
    <span class="choose-text"></span>
</div>

注意:

  1. input的id和label的for属性值要一致
  2. data-toggle 的值用 | 分隔 是|否 的对应的文本
  3. 如果不需要显示文本,可以把 choose-text 去掉
  4. 父节点不一定要是div,我这里放一个只是为了看起来像个整体

以上是关于一个简单css+js的开关组件的主要内容,如果未能解决你的问题,请参考以下文章

封装一个简单的UI组件

Bootstarp-switch(动画开关插件)

纯css写一个switch开关

让网页装进Android手机(将html+css+js打包成Android应用)(简单的)

弹层组件-layer

有用的 JS 和 CSS 库