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 相关文章推荐
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 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 水平的题目
2007/05/30 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
Yii使用技巧大汇总
2015/12/29 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
PHP _construct()函数讲解
2019/02/03 PHP
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
Python中title()方法的使用简介
2015/05/20 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
实例详解Python模块decimal
2019/06/26 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
文明教师事迹材料
2014/01/16 职场文书
活动邀请函范文
2014/01/19 职场文书
爱情保证书大全
2014/04/29 职场文书
病假条格式范文
2015/08/17 职场文书
导游词之海南天涯海角
2019/12/05 职场文书