iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
0
Modern Web

30天學習30套前端技術(2018年)系列 第 25

[十分鐘學習] iCheck - 免出國,也可以幫C先生和R先生做Face Off

example1
專為jQuery和Zepto做的高彈性客製化checkbox和radio按鈕的套件

《評分》

  • GitHub Star: 7,000
  • Javascripting Overall: 16%

《支援》

  • 瀏覽器: ChromeFirefoxIE6+
  • RWD: 不支援(可運作)
  • License: MIT

看範例


《安裝》

  • CDN
    將下方語法複製貼上 <head></head>

    <!-- jQuery v1.9.1 -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- iCheck v1.0.2 -->
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
    

《使用》

  • 應用1:自訂checkbox和radio樣式 (範例)
    example1
    將下方語法複製貼上 <body></body>

    <input type="checkbox">
    <input type="radio" >
    <script type="text/javascript">
    	$( "input" ).iCheck({
    		checkboxClass: "icheckbox_minimal", // checkbox樣式選擇minimal
    		radioClass: "iradio_minimal" // radio樣式選擇minimal
    	});
    </script>
    

【設定】

參數 描述
handle 設定渲染的物件。選項: radiocheckboxboth(預設)
checkboxClass checkbox的風格。選項: [字串]
radioClass radio的風格。選項: [字串]
checkedClass 當input.checked是true時,自動新增的類別名稱。選項: [字串]
checkedCheckboxClass 當checkbox的input.checked是true時,自動新增的類別名稱。選項: [字串]
checkedRadioClass 當radio的input.checked是true時,自動新增的類別名稱。選項: [字串]
uncheckedClass 當input.checked是false時,自動新增的類別名稱。選項: [字串]
uncheckedCheckboxClass 當checkbox的input.checked是false時,自動新增的類別名稱。選項: [字串]
uncheckedRadioClass 當radio的input.checked是false時,自動新增的類別名稱。選項: [字串]
disabledClass 當input.disabled是true時,自動新增的類別名稱。選項: [字串]
disabledCheckboxClass 當checkbox的input.disabled是true時,自動新增的類別名稱。選項: [字串]
disabledRadioClass 當radio的input.disabled是true時,自動新增的類別名稱。選項: [字串]
enabledClass 當input.disabled是false時,自動新增的類別名稱。選項: [字串]
enabledCheckboxClass 當checkbox的input.disabled是false時,自動新增的類別名稱。選項: [字串]
enabledRadioClass 當radio的input.disabled是false時,自動新增的類別名稱。選項: [字串]
indeterminateClass 當input.indeterminate是true時,自動新增的類別名稱。選項: [字串]
indeterminateCheckboxClass 當checkbox的input.indeterminate是true時,自動新增的類別名稱。選項: [字串]
indeterminateRadioClass 當radio的input.indeterminate是true時,自動新增的類別名稱。選項: [字串]
determinateClass 當input.indeterminate是false時,自動新增的類別名稱。選項: [字串]
determinateCheckboxClass 當checkbox的input.indeterminate是false時,自動新增的類別名稱。選項: [字串]
determinateRadioClass 當radio的input.indeterminate是false時,自動新增的類別名稱。選項: [字串]
hoverClass 當hover至物件時,自動新增的類別名稱。選項: [字串]
focusClass 當focus至物件時,自動新增的類別名稱。選項: [字串]
activeClass 當觸碰到物件時,自動新增的類別名稱。選項: [字串]
labelHover 當hover至物件時,是否自動新增label。選項: truefalse(預設)
labelHoverClass 當hover至物件時,自動新增到label的類別名稱。選項: [字串]
increaseArea 增加觸碰面積,負數為減少。選項: [數字]
cursor 啟用pointer的CSS屬性(手指圖案)。選項: truefalse(預設)
inheritClass 繼承input原本的類別名稱。選項: truefalse(預設)
inheritID 啟用"iCheck-"的前綴詞在ID上面。選項: truefalse(預設)
aria 支援ARIA。選項: truefalse(預設)
insert 新增HTML在物件上面。選項: [字串]

《延伸》

Checkboxes and radio buttons customization (jQuery and Zepto) plugin
fronteed/icheck: Highly customizable checkboxes and radio buttons (jQuery & Zepto)


上一篇
[十分鐘學習] nanoScroller.js - Mac OS風格滾輪
下一篇
[十分鐘學習] KUTE.js - 做動畫金柑單
系列文
30天學習30套前端技術(2018年)30

尚未有邦友留言

立即登入留言