2017年11月22日 星期三

[研究][CSS] iCheck v1.0.2 (在不同流覽器和設備上都有相同的表現) 官方下載、安裝與試用

[研究][CSS] iCheck v1.0.2 (在不同流覽器和設備上都有相同的表現) 官方下載、安裝與試用

2017-11-22

官方網站
http://fronteed.com/iCheck
http://icheck.fronteed.com/

http://www.bootcss.com/p/icheck/








(下圖) 去 jQuery 官方網站和 iCheck 官方網站下載套件,從檔案總管拖放到 Visual Studio 中你想要的目錄。





Default.aspx 內容
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="Scripts/jquery-3.2.1.min.js"></script>
    <link href="Scripts/icheck-1.x/skins/all.css" rel="stylesheet" />
    <script src="Scripts/icheck-1.x/icheck.min.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
    <table id="testTable">
  <thead>
    <tr><th><input type="checkbox" class="js-checkbox-all">全選</th></tr>
  </thead>
  <tbody>
    <tr><td><input type="checkbox">選項1</td></tr>
    <tr><td><input type="checkbox">選項2</td></tr>
    <tr><td><input type="checkbox" disabled>選項3</td></tr>
    <tr><td><input type="checkbox">選項4</td></tr>
  </tbody>
</table>
    <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;
  }
});

$checkbox.on('ifClicked',function(event){
  event.target.checked ? i-- : i++;
  if(i==length){
    $checkboxAll.iCheck('check');
  }else{
    $checkboxAll.iCheck('uncheck');
  }
})

</script>
</body>
</html>


(下圖) 執行結果



(待續)

相關

jquery插件icheck api使用(美化checkbox和radio样式)
http://www.51xuediannao.com/js/jquery/icheck.html

iCheck表单美化插件使用方法详解(含参数、事件等)
http://www.exp99.com/f2e/iCheck.html

沒有留言:

張貼留言