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 相关文章推荐
js判断字符长度及中英文数字等
Mar 19 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
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 字符串函数收集
2010/03/29 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
Javascript 二维数组
2009/11/26 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
document.write的几点使用心得
2014/05/14 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
小试小程序云开发(小结)
2019/06/06 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
python通过文件头判断文件类型
2015/10/30 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
Django卸载之后重新安装的方法
2017/03/15 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
深入理解Python 多线程
2020/06/16 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
英语专业学生个人求职信
2014/01/28 职场文书
交通安全寄语大全
2014/04/08 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
预备党员自我评价范文
2015/03/04 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python