Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Switch控件制作(IE11/Chrome/Firefox)

  上一篇文章中的Switch控件被喷得体无完肤了,确实那玩意儿的用处不大,但比起浏览器自带的checkbox要好的多。其实这个Switch控件的概念还是很有用的,主要问题是控件的操作体验和UI设计。一个没有做任何美化的东西确实让人看着很蛋疼,也难怪要被喷。
  现在我们再来做一个Switch控件,稍微设计一下UI,并兼容到更多浏览器。
  
<!DOCTYPE html>
<style>
.switch {
  position:relative;
  border:1px solid #CCC;
  border-radius:6px;
  width:80px;height:24px;
  font:12px/2 微软雅黑;
  cursor:pointer;
  box-shadow:inset 0px 0px 3px #CCC;
}
.switch::before {
  position:absolute;top:-1px;
  width:70%;height:100%;background:#eee;
  text-align:center;
  border:1px solid #CCC;
  border-radius:6px;
  box-shadow:0px 0px 3px #999;
  transition:all 500ms ease;
}
.switch[data-state='false']::before {
  content:attr(data-false);
  background:#FFEAD5;
  border-color:#AF6114;
  left:-1px;
}
.switch[data-state='true']::before {
  content:attr(data-true);
  background:#EAFFD5;
  border-color:#61B014;
  margin-left:-1px;
  left:30%;
}
</style>
<div class="switch"
     data-state="false"
     data-true="启用"
     data-false="禁用">
</div>
<script>
document.querySelector(".switch").onclick=function(){
  this.dataset.state=!JSON.parse(this.dataset.state);
  this.className+=""; //兼容IE11
};
</script>
  这次的设计主要是用了CSS的属性选择器,而属性也使用的时标准的自定义属性data-*,操作则使用dataset(这玩意儿IE11才开始兼容)。其它就是一些比较古老的东西了。但是在IE11上有个属性选择器的样式无法及时更新的BUG,所以上面的代码中为元素的className属性重赋值,触发CSS重新计算。
  其实这个控件很早以前就有需求了,现在手机App上也经常见到。比起传统的一个checkbox要好的多吧?
  这篇文章中我只做了仅支持两个选项的Switch控件,实际上“开关”的概念不仅限于此。有

  这样的开关,还有

  这样的开关。我们的Switch控件设计也可以有多个选项(但也不要太多,否则不如用select控件),具体的设计可以参考现实中的事物。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^