JQery icheck 插件
Posted 哦先生
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQery icheck 插件相关的知识,希望对你有一定的参考价值。
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 var callbacks_list = $(‘.demo-callbacks‘); 4 $(‘.demo-list input‘).on(‘ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed‘, function(event){ 5 }).iCheck({ 6 checkboxClass: ‘icheckbox_square-blue‘, 7 radioClass: ‘iradio_square-blue‘, 8 increaseArea: ‘20%‘, 9 }); 10 }); 11 </script>
1 <div class="col-sm-3 col-md-offset-5 demo-list"> 2 <form class="form-horizontal"> 3 <div class="form-group"> 4 <label><input type="radio" class="form-control" >迟到扣款除于当月全勤人数</label> 5 </div> 6 <div class="form-group"> 7 <label><input type="radio" class="form-control" >固定</label><input type="text" class="form-control xztable_select_s margin5" >/人/月 8 </div> 9 </form> 10 </div>
加载icheck.js
1 <?php 2 /** 3 * Created by PhpStorm. 4 * User: Administrator 5 * Date: 2016/1/18 6 * Time: 16:27 7 */ 8 use yii\web\View; 9 use yii\helpers\Url; 10 use app\assets\AppAsset; 11 use yii\helpers\html; 12 13 AppAsset::addScript($this, ‘@web/assets/Public/static/icheck/custom.min.js‘); 14 AppAsset::addScript($this, ‘@web/assets/Public/static/icheck/icheck.js‘); 15 ?>
如上所示 ,实际项目中用到的例子。
首先引入jQuery v1.7+ (或 Zepto),然后引入jquery.icheck.js (或者zepto.icheck.js) 。
iCheck支持所有选择器(selectors),并且只针对复选框和单选按钮起作用
<script src="../Public/static/icheck/icheck.js" type="text/javascript"></script> <script src="../Public/static/icheck/custom.min.js" type="text/javascript"></script>
回调事件
iCheck提供了大量回调事件,都可以用来监听change事件。如上面的例子中,绑定了所有事件
事件名称 | 使用时机 |
---|---|
ifClicked | 用户点击了自定义的输入框或与其相关联的label |
ifChanged | 输入框的 checked 或 disabled 状态改变了 |
ifChecked | 输入框的状态变为 checked |
ifUnchecked | checked 状态被移除 |
ifDisabled | 输入框状态变为 disabled |
ifEnabled | disabled 状态被移除 |
ifCreated | 输入框被应用了iCheck样式 |
ifDestroyed | iCheck样式被移除 |
使用on()方法绑定事件:
1 $(‘input‘).on(‘ifChecked‘, function(event){ 2 alert(event.type + ‘ callback‘); 3 });
方法
下面这些方法可以用来通过编程方式改变输入框状态(可以使用任何选择器):
$(‘input‘).iCheck(‘check‘); — 将输入框的状态设置为checked
$(‘input‘).iCheck(‘uncheck‘); — 移除 checked 状态
$(‘input‘).iCheck(‘toggle‘); — toggle checked state
$(‘input‘).iCheck(‘disable‘); — 将输入框的状态设置为 disabled
$(‘input‘).iCheck(‘enable‘); — 移除 disabled 状态
$(‘input‘).iCheck(‘update‘); — apply input changes, which were done outside the plugin
$(‘input‘).iCheck(‘destroy‘); — 移除iCheck样式
使用方法:
1、选择你要使用的皮肤样式主题,共6个
flat, futurico, line, minimal, polaris, square
每个皮肤底下有好几个可以选择的颜色,例如:
Black — square.css
Red — red.css
Green — green.css
Blue — blue.css
Aero — aero.css
Grey — grey.css
Orange — orange.css
Yellow — yellow.css
Pink — pink.css
Purple — purple.css
2 例如选择square皮肤下的blue.css,复制 skin/square文件夹下的到css文件夹下
<link href="css/square/blue.css" rel="stylesheet">
3 引入icheck.js
移动端引入:
<script src="js/zepto.js"></script>
<script src="js/icheck.min.js"></script>
PC端引入
<script src="js/jquery.js"></script>
<script src="js/icheck.min.js"></script>
4 在页面添加以下代码
HTML:
<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>
javascript:
<script>
$(document).ready(function(){
$(‘input‘).iCheck({
checkboxClass: ‘icheckbox_square-blue‘, // 注意square和blue的对应关系
radioClass: ‘iradio_square-blue‘,
increaseArea: ‘20%‘ // optional
});
});
</script>
iCheck提供了大量回调事件,都可以用来监听change事件。
以上是关于JQery icheck 插件的主要内容,如果未能解决你的问题,请参考以下文章