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 密码强弱度检测万能插件
Feb 25 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
js实现列表按字母排序
Aug 11 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 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存储过程调用实例代码
2013/02/03 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python注释详解
2016/06/01 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
大学生党员自我批评
2014/02/14 职场文书
保密承诺书
2014/03/27 职场文书
初中作文评语
2014/12/25 职场文书
2016春节放假通知范文
2015/08/18 职场文书
Go 语言结构实例分析
2021/07/04 Golang