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初学困境—js初学
Dec 29 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
javascript 解析url的search方法
Feb 09 Javascript
javascript cookies操作集合
Apr 12 Javascript
js post提交调用方法
Feb 12 Javascript
js同源策略详解
May 21 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
PHP 日期加减的类,很不错
2009/10/10 PHP
php 引用(&amp;)详解
2009/11/20 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
帝国cms目录结构分享
2015/07/06 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
2014最新离职证明范本
2014/09/12 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
小学英语课教学反思
2016/02/15 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers