2017年11月22日 星期三

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

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

2017-11-22
2018-06-08 更新

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

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

iCheck 需要 jQurey，但 Visual Studio 2017 v15.4.4 用 NuGet 安裝 iCheck時候，不會自動安裝 jQuery，要自己另外安裝。










(下圖)
2018-06-08 時候發現，第一個 iCheck v1.0.2 不存在了，只剩剩下4個









(下圖)  把 jQuery 和 iCheck 拖放引用。

PS： 如果不想用 NuGet 下載安裝 iCheck，可以用遠端的 iCheck，例如：
<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>




Default.aspx 內容
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.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>



(下圖) 如果 NuGet 只有安裝 jCheck，沒有安裝 jQuery，會出現下面失敗情況


(待續)

相關

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

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


相關

[研究][C#][ASP.NET] jQuery 3.2.1 官方下載、安裝、試用
http://shaurong.blogspot.com/2017/11/caspnet-jquery-321.html

[研究][CSS] iCheck v1.0.2 (在不同流覽器和設備上都有相同的表現) 安裝與試用 (NuGet安裝)
http://shaurong.blogspot.com/2017/11/css-icheck-v102-nuget.html

[研究] [ASP.NET] hideShowPassword 元件安裝、試用
http://shaurong.blogspot.com/2017/11/aspnet-hideshowpassword.html

[研究] jQuery UI Datepicker 月曆 安裝與試用
http://shaurong.blogspot.com/2017/07/jquery-ui-datepicker.html

[研究] [C#] [ASP.NET] 用 SweetAlert + Button 作 送出確認 提示對話盒
http://shaurong.blogspot.com/2017/06/c-aspnet-sweetalert_23.html

[研究] [C#] [ASP.NET] 用 SweetAlert + LinkButton 作 刪除確認 提示對話盒
http://shaurong.blogspot.com/2017/06/c-aspnet-sweetalert.html

[研究][C#][ASP.NET] Bootstrap 3.3.7 安裝(NuGet)
http://shaurong.blogspot.com/2017/01/caspnet-bootstrap-337-nuget.html

[研究][C#][ASP.NET] jQuery 3.1.1 安裝(NuGet)
http://shaurong.blogspot.com/2017/01/caspnet-jquery-311-nuget.html

[研究][C#][ASP.NET] jQuery Cookie 1.4.1 - jQuery Plugin 安裝(NuGet)
http://shaurong.blogspot.com/2017/01/caspnet-jquery-cookie-141-jquery-plugin.html

[研究] [C#][ASP.NET] Select2 v4.0.3 - jQuery Plugin 安裝
http://shaurong.blogspot.com/2017/01/caspnet-select2-v403-jquery-plugin.html

[研究] Visual Studio 2015 用 Nuget 安裝 jQuery
http://shaurong.blogspot.com/2016/11/visual-studio-2015-nuget-jquery_14.html


張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)