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 动态加载脚本的4种方法
May 05 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
开源Web应用框架Django图文教程
2017/03/09 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
财务助理岗位职责
2013/11/10 职场文书
学习保证书范文
2014/04/30 职场文书
大学生个人求职信
2014/06/02 职场文书
公司表扬稿范文
2015/05/05 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
办公室卫生管理制度
2015/08/04 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP