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入门教程(11) js事件处理
Jan 31 Javascript
Prototype Date对象 学习
Jul 12 Javascript
javascript CSS画图之基础篇
Jul 29 Javascript
jQuery 表格工具集
Apr 25 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 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
实用函数7
2007/11/08 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python实现栈的方法
2015/05/26 Python
Python验证码识别的方法
2015/07/10 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
深入浅析Python代码规范性检测
2020/07/31 Python
Python pip 常用命令汇总
2020/10/19 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
Python使用Web框架Flask开发项目
2022/06/01 Python