Switch开关组件

开关组件是一组根据AppCan 布局框架封装的HTML5代码片段,通过配合的样式和JS对象appcan.switch,使开发者在界面中可以快速创建开关控件,并可以快速的完成事件的监听和控制。

依赖

  • appcan.js
  • appcan.control.js
  • appcan.control.css

JS对象

appcan.switchBtn(selector, css, callback)
  1. selector 按钮的选择器,例如 .btndiv或#id。可同时处理多个按钮
  2. css Switch 开启后的背景CSS类名称。预置 bc-head。可选参数
  3. callback switch 状态变更后的回调函数

例子

HTML5代码

  1. <div class="switch uba bc-border data-checked="true">
  2.   <div class="switch-btn sc-bg-active "></div>
  3. </div>

JS代码

appcan.switchBtn(switchBtns,function(obj,value) {
    console.log(“switch status:”,value);
})
appcan.updateSwitch(obj)
    obj:   需要操作的dom对象

说明:调用此方法操作更改dom对象下的switch开关状态,如果原来为true.更改为false,原来为false,更改为true;

例子:

HTML5代码

<div class="switch uba bc-border" data-checked="true">
  <div class="switch-btn sc-bg-active "></div>
</div>

JS代码

appcan.updateSwitch($('.switch'))