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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
php实现图片缩略图的方法
2016/03/29 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
管理失职检讨书
2014/02/12 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
2014个人年度工作总结
2014/12/15 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书