知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    jquery插件icheck api使用(美化checkbox和radio樣式)

    作者:佳明媽 來源:web前端開發 2016-08-11 人氣:
    jquery插件icheck.js是一個用來美化checkbox和radio樣式的插件,icheck提供了豐富的皮膚和回調事件,本文提供icheck api使用和實戰演示

    jquery插件icheck.js是一個用來美化checkbox和radio樣式的插件,icheck提供了豐富的皮膚和回調事件,本文提供icheck api使用和實戰演示

    具體的基本使用方法官方icheck教程已經寫的很多,可以看官方icheck api使用demo

    使用icheck注意的地方

    1、如果你直接使用$(("[type='checkbox']")).iCheck()發現沒有任何皮膚外觀,那就制定皮膚如:

    $(("[type='checkbox']")).iCheck({
      checkboxClass: 'icheckbox_minimal-blue',
      radioClass: 'iradio_square-blue'
    });
    皮膚有很多在skins目錄下面,可以單獨引入需要的皮膚文件也可以使用all.css把所有皮膚文件都引入,js配置參數中的皮膚名字,觀察觀察對照skin目錄下的css文件名就知道他是怎么組合的了'icheckbox_風格文件夾名-css文件名'

    2、你可以使用icheck cdn引入樣式和js文件

    <link href="http://cdn.bootcss.com/iCheck/1.0.2/skins/all.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/iCheck/1.0.2/icheck.min.js"></script>

    icheck.js使用選中、全選功能實例

    下面來寫一個表格中的選中、全選功能來看看icheck怎么在實際項目中使用,這里對icheck.js和css資源的引用全部使用外部icheck cdn

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>jquery插件icheck api使用(美化checkbox和radio樣式)-懶人建站http://www.ezdqdj.live/</title>
      <meta charset="utf-8">
      <meta content="width=device-width" name="viewport">
    
      <!--icheck的樣式文件-->
      <link href="http://cdn.bootcss.com/iCheck/1.0.2/skins/all.css" rel="stylesheet">
      <style>
        body,a{ font-size: 14px; color: #333;}
        th,td{ padding: 6px;}
      </style>
    </head>
    <body style="padding: 50px;">
    
    <p>jquery插件icheck.js是一個用來美化checkbox和radio樣式的插件,icheck提供了豐富的皮膚和回調事件,本文提供icheck api使用和實戰演示</p>
    
    <p>具體的基本使用方法官方icheck教程已經寫的很多,可以看官方demo</p>
    <p>下面來寫一個表格中的選中、全選功能來看看icheck怎么在實際項目中使用,這里對icheck.js和css資源的引用全部使用外部icheck cdn</p>
    <table id="testTable">
      <thead>
        <tr><th><input type="checkbox" class="js-checkbox-all"> 全選</th></tr>
      </thead>
      <tbody>
        <tr><td><input type="checkbox"></td></tr>
        <tr><td><input type="checkbox"></td></tr>
        <tr><td><input type="checkbox" disabled></td></tr>
        <tr><td><input type="checkbox"></td></tr>
      </tbody>
    </table>
    
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!--icheck的js文件-->
    <script src="http://cdn.bootcss.com/iCheck/1.0.2/icheck.min.js"></script>
    <script>
    var $checkboxAll = $(".js-checkbox-all"),
        $checkbox = $("tbody").find("[type='checkbox']").not("[disabled]"),
        length = $checkbox.length,
        i=0;
    
    //啟動icheck
    $(("[type='checkbox']")).iCheck({
      checkboxClass: 'icheckbox_minimal-blue',
      radioClass: 'iradio_square-blue'
    });
    
    //全選checkbox
    $checkboxAll.on("ifClicked",function(event){
      if(event.target.checked){
        $checkbox.iCheck('uncheck');
        i=0;
      }else{
        $checkbox.iCheck('check');
        i=length;
      }
    });
    
    //監聽計數  懶人建站http://www.ezdqdj.live/
    $checkbox.on('ifClicked',function(event){
      event.target.checked ? i-- : i++;
      if(i==length){
        $checkboxAll.iCheck('check');
      }else{
        $checkboxAll.iCheck('uncheck');
      }
    })
    
    </script>
    </body>
    </html>
    

    iCheck使用方法api和回調介紹

    iCheck初始化

    首先引入jQuery v1.7+ (或 Zepto),然后引入jquery.icheck.js (或者zepto.icheck.js) 。

    iCheck支持所有選擇器(selectors),并且只針對復選框和單選按鈕起作用:

    // customize all inputs (will search for checkboxes and radio buttons)
    $('input').iCheck();
    
    // handle inputs only inside $('.block')
    $('.block input').iCheck();
    
    // handle only checkboxes inside $('.test')
    $('.test input').iCheck({
      handle: 'checkbox'
    });
    
    // handle .vote class elements (will search inside the element, if it's not an input)
    $('.vote').iCheck();
    
    // you can also change options after inputs are customized
    $('input.some').iCheck({
      // different options
    });
    

    回調事件

    iCheck提供了大量回調事件,都可以用來監聽change事件。

    事件名稱 使用時機
    ifClicked 用戶點擊了自定義的輸入框或與其相關聯的label
    ifChanged 輸入框的 checked 或 disabled 狀態改變了
    ifChecked 輸入框的狀態變為 checked
    ifUnchecked checked 狀態被移除
    ifDisabled 輸入框狀態變為 disabled
    ifEnabled disabled 狀態被移除
    ifCreated 輸入框被應用了iCheck樣式
    ifDestroyed iCheck樣式被移除

    使用on()方法綁定事件:

    $('input').on('ifChecked', function(event){
      alert(event.type + ' callback');
    });
    

    ifCreated 事件應該在插件初始化之前綁定。

    方法

    下面這些方法可以用來通過編程方式改變輸入框狀態(可以使用任何選擇器):

    $('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樣式

    這里沒有列出所有基本使用demo,你可以查看官方icheck教程icheck api使用demo

    ↓ 查看全文

    jquery插件icheck api使用(美化checkbox和radio樣式)由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    jquery插件icheck api使用(美化checkbox和radio樣式)-最新評論

    • 懶人建站網友 2016-09-08 05:03:51
      兼容到ie幾?
    • 11 2016-09-08 05:09:51
      兼容到ie幾?
    • 11 2016-08-12 12:08:31
      實例很好
    • 懶人建站網友 2016-08-12 12:49:31
      實例很好
    老子是皇帝在线客服