<meter id="7ntxv"></meter>

<b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
<nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

    <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
    <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

    <mark id="7ntxv"></mark>
    <meter id="7ntxv"><var id="7ntxv"></var></meter>

    知識 分享 互助 懶人建站

      懶人建站專注于網頁素材下載,提供網站模板、網頁設計、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.waidid2022.com/</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.waidid2022.com/
      $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樣式)-最新評論

      亚洲免费的黄色网站_黄色网站在线放久操射视频_A片www.黄色网站成年人_天天干 天天操天天干

      <meter id="7ntxv"></meter>

      <b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
      <nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

        <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
        <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

        <mark id="7ntxv"></mark>
        <meter id="7ntxv"><var id="7ntxv"></var></meter>