iT邦幫忙

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

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

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

  • 分享至 

  • xImage
  •  

example1

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

GitHub Star: 7,000
Javascripting Overall: 16%
瀏覽器: ChromeFirefoxIE6+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

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

《範例》

  • 美化checkbox和radio樣式

      <input type="checkbox">
      <input type="radio">
      <script>
      	$( "input" ).iCheck({
      		// 參數設定[註1]
      		checkboxClass: "icheckbox_minimal", // checkbox樣式為minimal
      		radioClass: "iradio_minimal" // radio樣式為minimal
      	});
      </script>
    

    [註1]

    參數 描述 選項

    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在物件上面|[字串]


《延伸》

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

上一篇
[十分鐘學習] nanoScroller.js - Mac OS風格捲軸
下一篇
[十分鐘學習] KUTE.js - 做動畫金柑單
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言