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 ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
js实现消息滚动效果
Jan 18 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 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
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
php实现天干地支计算器示例
2014/03/14 PHP
php跨服务器访问方法小结
2015/05/12 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
js几秒以后倒计时跳转示例
2013/12/26 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python实现视频下载功能
2017/03/14 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
Shell如何接收变量输入
2016/08/06 面试题
与UNIX有关的几个名词
2015/09/17 面试题
护士实习生自我鉴定范文
2013/12/10 职场文书
小学生新学期寄语
2014/01/19 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
天网工程实施方案
2014/03/26 职场文书
交通安全寄语大全
2014/04/08 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript