switchery按钮的使用方法


Posted in Javascript onDecember 18, 2017

1.先引入switchery.css 和 switchery.js

2.绘制 checkbox按钮 : a.静态页面写法  未选中时 <input type="checkbox" class="js-switch_3"  /> switchery按钮的使用方法       选中时  <input type="checkbox" class="js-switch_4" checked /> switchery按钮的使用方法

 

b.C# 写法 (1) @Html.CheckBoxFor(m => m.Active, new { @Class = "js-switch", @checked = Model.Active }) <span> Activate</span>

(2) @Html.CheckBox("edit_forMave_" + i, new { @class = "js-switch", @checked = true })

3. script 中处理,是按钮有点击效果。

当页面中只有一个checkbox 时:var elem = document.querySelector(".js-switch")   var switchery= new Switchery( elem,{color : '#f8ac59'}).

当有多个时:var elem = document.querySelector(".js-switch") 

$.each(funtion (num) { var switchery = new Switchery(this, { color: '#1AB394', className: 'switchery-small' });}) ;

以上这篇switchery按钮的使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
微信小程序实现底部弹出框
Nov 18 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 #Javascript
JS函数节流和函数防抖问题分析
Dec 18 #Javascript
vue 将页面公用的头部组件化的方法
Dec 18 #Javascript
浅谈使用React.setState需要注意的三点
Dec 18 #Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 #Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 #Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 #Javascript
You might like
php下将XML转换为数组
2010/01/01 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
php实现的顺序线性表示例
2019/05/04 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
python操作xml文件示例
2014/04/07 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
python实现将元祖转换成数组的方法
2015/05/04 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python自定义线程类简单示例
2018/03/23 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
PyTorch中permute的用法详解
2019/12/30 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
Prototype是怎么扩展DOM的
2014/10/01 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
体育专业个人求职信范文
2013/12/27 职场文书
客房部经理岗位职责
2015/02/02 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
Django Paginator分页器的使用示例
2021/06/23 Python