jQuery iCheck是一個基于jQuery的Plugin,可以幫助我們美化原生的checkbox和radio。
使用iCheck有很多好處,比如可以實現自定義樣式,增加交互效果,提高用戶體驗等等。
首先我們需要引入jquery庫和icheck插件:
<script src="jquery.min.js"></script> <link href="icheck.min.css" rel="stylesheet"> <script src="icheck.min.js"></script>
然后在html中添加需要美化的checkbox和radio:
<input type="checkbox" id="checkbox1" /> <label for="checkbox1">Checkbox 1</label> <input type="radio" id="radio1" name="radio" /> <label for="radio1">Radio 1</label>
接著我們可以對樣式進行自定義,比如設置默認選中狀態、更改背景顏色、改變形狀大小等等:
$('input').iCheck({ checkboxClass: 'icheckbox_square-green', radioClass: 'iradio_square-green', increaseArea: '20%' });
最后我們就可以看到美化后的效果了:
總的來說,jQuery iCheck是一個十分實用的插件,可以提升用戶體驗和頁面效果。
上一篇建筑等級CSS級
下一篇jquery ie 版本