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事件。

posted @ 2016-05-19 11:44  哦先生  阅读(45915)  评论(2编辑  收藏  举报