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 相关文章推荐
js调试工具Console命令详解
Oct 21 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 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验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python数据可视化之画图
2019/01/15 Python
python conda操作方法
2019/09/11 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
python时间time模块处理大全
2020/10/25 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
银行贷款承诺书
2014/03/29 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
大专学生求职信
2014/07/04 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
学校通报表扬范文
2015/05/04 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书