angularjs开发ios风格的toggle

2014年12月20日 · 122 字 · 1 分钟

效果图

效果图

HTML代码

<div class="toggle-box" ng-click="item.hide_remind = !item.hide_remind"
     ng-class="{'active':item.hide_remind,'':!item.hide_remind}" ng-init="item.hide_remind=0">
    <div class="toggle-container">
        <div class="toggle-item"></div>
    </div>
</div>
.site-create .page-bd .container form .form-group .toggle-box {
  position: absolute;
  right: 48px;
  top: 15px;
}
.site-create .page-bd .container form .form-group .toggle-box .toggle-container {
  position: relative;
  width: 72px;
  height: 40px;
  background: #a8aeb3;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  padding: 2px;
}
.site-create .page-bd .container form .form-group .toggle-box .toggle-container .toggle-item {
  width: 39px;
  height: 39px;
  background: white;
  -webkit-border-radius: 39px;
  -moz-border-radius: 39px;
  border-radius: 39px;
  cursor: pointer;
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}
.site-create .page-bd .container form .form-group .toggle-box.active .toggle-container {
  background: #79e575;
}
.site-create .page-bd .container form .form-group .toggle-box.active .toggle-container .toggle-item {
  margin-left: 32px;
}

记得自己去掉不存在的容器(我是在项目中用的,有CSS层级限制)

JS代码

所有的操作都在html中实现的。
如果需要获取值,请获取item.hide_remind即可