1. 首頁 > 生活經驗 > >

美化checkbox

知識經驗

【美化checkbox】

美化checkbox

文章插圖
伊切克
特點:
1.在不同的瀏覽器(包括ie6+)和設備上的表現是一樣的& mdash包括桌面和移動設備 。
2.支持觸摸設備& mdashIOS、Android、黑莓、Windows Phone等系統 。
4.方便定制& mdash可以用HTML和CSS(多種皮膚)進行樣式化 。
5.小尺寸& mdashGzip壓縮后只有1 kb 。
6.25個參數用于定制復選框和單選按鈕 。
7.八個回調事件用于監控輸入框的狀態 。
8.通過編程使用七種方法來控制輸入框的狀態 。
9.它可以將輸入框的狀態變化同步回原來的輸入框，并支持所有的選擇器 。

iCheck插件表單美化效果圖
如何使用iCheck:
$('input').iCheck('check');//將輸入框的狀態設置為checked$('input').iCheck('uncheck');//移除checked狀態$('input').iCheck('toggle');//togglecheckedstate$('input').iCheck('disable');//將輸入框的狀態設置為disabled$('input').iCheck('enable');//移除disabled狀態$('input').iCheck('update');//applyinputchanges,whichweredoneoutsidetheplugin$('input').iCheck('destroy');//移除iCheck樣式當調用iCheck時，您只需要列出已經修改了默認值的參數:
//基礎使用方法$('input').iCheck({labelHover:false,cursor:true,checkboxClass:'icheckbox_square-blue',radioClass:'iradio_square-blue',increaseArea:'20%'});以下是參數及其默認值的列表:
{handle:'',checkboxClass:'icheckbox',radioClass:'iradio',checkedClass:'checked',checkedCheckboxClass:'',checkedRadioClass:'',uncheckedClass:'',uncheckedCheckboxClass:'',uncheckedRadioClass:'',disabledClass:'disabled',disabledCheckboxClass:'',disabledRadioClass:'',enabledClass:'',enabledCheckboxClass:'',enabledRadioClass:'',hoverClass:'hover',focusClass:'focus',activeClass:'active',labelHover:true,labelHoverClass:'hover',increaseArea:'',cursor:false,inheritClass:false,inheritID:false,insert:''}我們可以為上面列出的任何類重置樣式 。借助iCheck定制圖標的效果:
ICheck皮膚
黑色& mdashMinimal.css // black
紅色& mdashRed.css // red
綠色& mdashGreen.css //綠色
藍色& mdashBlue.css //藍色
Aero & mdashaero.css //win7中的玻璃效果 。
灰色& mdashGrey.css //銀灰色
橙色& mdashOrange.css //橙色
黃色& mdashYellow.css //黃色
粉色& mdashPink.css // pink
紫色& mdash紫色. css //紫色
(請自行下載這些皮膚包 。)
I檢查初始化
首先，介紹jQuery庫文件 。
其次，介紹jquery.icheck.js插件文件 。
(如果要導入相關皮膚，需要導入:相關主題顏色 。css文件)
ICheck回調事件
ICheck支持所有選擇器 ， 并且僅適用于復選框和單選按鈕 。
ICheck提供了大量的回調事件，可以用來監聽change事件 。

事件名稱 使用時機ifClicked 用戶點擊了自定義的輸入框或與其相關聯的labelifChanged 輸入框的 checked 或 disabled 狀態改變了ifChecked 輸入框的狀態變為 checkedifUnchecked checked 狀態被移除ifDisabled 輸入框狀態變為 disabledifEnabled disabled 狀態被移除ifCreated 輸入框被應用了iCheck樣式ifDestroyed iCheck樣式被移除使用on()方法綁定事件:
$('input').on('ifChecked',function(event){//ifCreated事件應該在插件初始化之前綁定alert(event.type+'callback');});bootstrap iCheck中單選和復選框的大小可以調整嗎？
.icheckbox_square-blue,.iradio_square-blue{display:block;margin:0;padding:0;width:22px;height:22px;background:url(/imgs/)no-repeat;border:none;cursor:pointer;}如果要調整icheck的單選或復選框樣式 ， 通過上面的css修改寬度和高度，同時修改/imgs/圖片相應的大小 。
ICheck插件下載(托管在github上，無法下載請從我的百度云盤下載iCheck插件包) 。
以上解釋了checkbox的美化 。這篇文章已經分享到這里了，希望對大家有所幫助 。