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 相关文章推荐
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
JS代码编译器Monaco使用方法
Jun 11 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
解析MySql与Java的时间类型
2013/06/22 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
range 标准化之获取
2011/08/28 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
Vue组件的使用教程详解
2018/01/05 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
python实现维吉尼亚加密法
2019/03/20 Python
python用for循环求和的方法总结
2019/07/08 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
介绍长城的导游词
2015/01/30 职场文书
学校运动会感想
2015/08/10 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android