switchery按钮的使用方法

1.先引入switchery.css 和 switchery.js

2.绘制 checkbox按钮 : a.静态页面写法  未选中时 <input type="checkbox" class="js-switch_3"  />        选中时  <input type="checkbox" class="js-switch_4" checked /> 

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按钮的使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • switchery按钮的使用方法

    switchery按钮的使用方法

    1.先引入switchery.css 和 switchery.js 2.绘制 checkbox按钮 : a.静态页面写法  未选中时 <input type="checkbox" class="js-switch_3"  />        选中时  <input type="checkbox" class="js-switch_4" checked />  b.C# 写法 (1) @Html.Chec

  • mint-ui的search组件在键盘显示搜索按钮的实现方法

    代码如下所示: <form action="" target="frameFile"> <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)"> <div v-infinite-scroll="loadMore()" infinite-scroll

  • IOS数字键盘左下角添加完成按钮的实现方法

    IOS数字键盘左下角添加完成按钮的实现方法 实现代码: - (void)addDoneButtonToNumPadKeyboard { UIButton *doneButton = [UIButton buttonWithType:UIButtonTypeCustom]; if (systemVersion < 8.0){ doneButton.frame = CGRectMake(0, 163, 106, 53); }else{ doneButton.frame = CGRectMake(0,

  • android监听返回按钮事件的方法

    android监听返回按钮事件的方法

    本文实例讲述了android监听返回按钮事件的方法.分享给大家供大家参考.具体如下: 用户在点击手机的返回按钮时,默认是推出当前的activty,但是有时用户不小心按到返回,所以需要给用户一个提示,这就需要重写onkeydown事件,实现的效果如下: java代码如下: @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.l

  • BootStrap 超链接变按钮的实现方法

    BootStrap 超链接变按钮的实现方法

    <a href="#"> xuhaitao </a> 上面代码效果如下: btn btn-default :变成一个按钮样子 btn-lg : 大号的按钮 btn-block : 按钮填充整个宽度 JS按钮(bootstrap)超链接 html代码: button是bootstrap样式,请先加入bootstrap.min.css和jquery-1.11.1.min.js <a href="#" id="DownLoadAud

  • js全选按钮的实现方法

    js全选按钮的实现方法

    本文实例讲述了js全选按钮的实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 <html> <head> <title>复选框checked属性</title> <script language="JavaScript" type="text/javascript"> function changeState(isChecked) { var chk_list=document.

  • 给easyui的datebox控件添加清空按钮的实现方法

    给easyui的datebox控件添加清空按钮的实现方法

    在不改源码的前提下给datebox添加清空按钮 var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: '清空', handler : function(target) { $(target).combo("setValue", "").combo("setText", ""); // 设置空值 $(targ

  • C#键盘输入回车键实现点击按钮效果的方法

    本文实例讲述了C#键盘输入回车键实现点击按钮效果的方法,在C#项目开发中非常具有实用价值.分享给大家供大家参考. 具体实现方法如下: 把Form的KeyPreview设为true 然后设置KeyDown,KeyUp或KeyPress事件.在KeyDown事件中截获. 主要功能代码如下: this.KeyDown += new KeyEventHandler(textBox1_KeyDown); private void textBox1_KeyDown(object sender, KeyEve

  • JavaScript实现自动消除按钮功能的方法

    JavaScript实现自动消除按钮功能的方法

    本文实例讲述了JavaScript实现自动消除按钮功能的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript自动消除前项显示的内容,在网页特定方位显示内容,第一个按钮可用,但第二个在第一个点击之后就不能用了,如果想让第二个按钮起作用,你需要对其进行功能消除,如本示例代码就实现这样一种功能. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

  • yii form 表单提交之前JS在提交按钮的验证方法

    很多时候,需要对Yii表单model中的对象设置的rules进行判断,但是有的时候可能需要在提交之前就在客户端进行验证,我这边设置的方法是在提交按钮上设置监听器,如果部分内容为空(比如多选按钮没有选择),那么提示出错信息.主要目的是页面不用提交后刷新,进入controller的对应函数之后再判断出错.显示rules()验证规则函数的错误信息. 这里为了验证是否选择某个单选按钮,对提交的按钮onclick设置监听,具体如下 <Button onclick = "return fun()&qu

随机推荐