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 星级评分效果(手写)
Dec 24 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
详解JavaScript常量定义
Jan 03 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
php7 新增功能实例总结
2020/05/25 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
angularjs实现分页和搜索功能
2018/01/03 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
python 利用toapi库自动生成api
2020/10/19 Python
一道Delphi面试题
2016/10/28 面试题
市场营销毕业生自荐信范文
2014/04/01 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
走进敬老院活动总结
2014/07/10 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书