Sematic Toggle组件解析

日期:2015-9-8 22:14 | 标签: | 阅读:682

这里以Toggle为例,查看toggle效果请点击jsfiddle演示,你可能想不到,一个这样的交互组件,根本不需要任何js即可以实现,实现方式咱一步步道来。

结构层次

首先我们来看一下Html结构

<!-- 最外层使用div包裹,ui为全局样式,toggle为控件名称,checkbook原生控件名称 --> 
<div class="ui toggle checkbox">
      <!-- 原生控件 -->
      <input type="checkbox" name="isprivate" checked="">
      <label>标签</label>
  </div>

div定位方式为relative,采用inline-block布局,既然是响应式UI,宽高等单位使用的都是rem,我们可以从一些样式中窥见一角,

.ui.checkbox {
  /* 相对定位 */
  position: relative;
  display: inline-block;
  /*旋转是背景不可见*/
  -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
  outline: none;
  vertical-align: baseline;
  /*省略若干...*/
}
/* div最小宽度 */
.ui.toggle.checkbox {
  min-height: 1.5rem;
}
/* Input宽高 */
.ui.toggle.checkbox input {
  width: 3.5rem;
  height: 1.5rem;
}

既然不用Js,那么按钮的切换是怎么触发的呢,我们知道checkbox至少有两个状态(还有一个是indeterminate,其只影响外观显示):选中与不选中,每次点击时,checkbook的状态即会进行切换,比如选中时,则可使用使用 input:checked匹配,样式可以这样设置:

/*选中时背景颜色,~为css3特性,用于选中兄弟元素*/
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: #2185d0 !important;
}
/*选中时圆形纽扣位置*/
.ui.toggle.checkbox input:checked ~ label:after {
  left: 2.15rem;
}

接下来,纠结下切换(switch)样式是怎么定义的,原来,切换样式定义在label上,使用加在label上的伪元素:before:after:before用来实现蓝底背景,:after用来实现白色小球,伪元素相对父div进行绝对定位,有意思的是作者把border-radius设置为500rem,其实设为1em倒也能够实现相同效果。 如:after的样式为,实现效果为带有渐变背景的白色按钮:

.ui.toggle.checkbox label:after {
  background: #ffffff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  background: #ffffff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  position: absolute;
  /*覆盖checkbox默认样式,有指定font-family为checkbox*/
  content: '' !important;
  opacity: 1;
  /*需要控制层级结构*/
  z-index: 2;
  border: none;
  box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
  width: 1.5rem;
  height: 1.5rem;
  top: 0rem;
  left: 0em;
  /*实现圆角*/
  border-radius: 500rem;
  -webkit-transition: background 0.3s ease, left 0.3s ease;
          transition: background 0.3s ease, left 0.3s ease;
}
/* 这样设置没太懂,可能用于其它checkbox UI */
.ui.checkbox label:after {
  font-family: 'Checkbox';
}

你可以能会问,原生checkbox都没了,还怎么点击呢,其实它只是被隐藏起来了啊,只需要把它的透明度设置为0即可以实现

/* HTML Checkbox */
.ui.checkbox input[type="checkbox"]{
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
  /*关键点为设置透明度*/
  opacity: 0 !important;
  outline: none;
  z-index: 3;
  width: 17px;
  height: 17px;
}

小小的一个UI控件,其实加了几百行的CSS代码,可见,控件开发者花了很多心思,在手机终端上使用时,还会带来一些性能问题,需要根据需求有条件的采用。此外,由于使用到了很多css3属性,semanticUI不兼容如ie9以下的浏览器。
之前有人用css写过一个打地鼠的游戏,其实原理大同小异,有兴趣可以参考:
http://zihua.li/2015/01/implement-pure-css-game/

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式