上1篇文章講到了在Bootstrap框架下如何建立1個(gè)漂亮的樹(shù)形菜單。漂亮的菜單是建立了,但是現(xiàn)在卻有1個(gè)實(shí)際的需求:在每一個(gè)菜單前面添加1個(gè)復(fù)選框,用來(lái)勾選1些需要的數(shù)據(jù)。
下面是添加上復(fù)選框以后的樹(shù)形菜單效果:
這樣看起來(lái)有種驢唇不對(duì)馬嘴的感覺(jué)。
所以就要想辦法給這些復(fù)選框添加1些樣式,讓全部界面看起來(lái)搭配1些。
通過(guò)查詢得知,有個(gè)叫ICheck的第3方Bootstrap插件,專門用于給復(fù)選框,單選框添加漂亮的樣式。
可以查看官方網(wǎng)站:http://www.bootcss.com/p/icheck/ 進(jìn)行了解。
ICheck插件提供幾套非常好看的皮膚,供我們選擇。
最簡(jiǎn)皮膚
Square皮膚
Flat皮膚
Polaris 皮膚
下面以Square皮膚為例,說(shuō)明如何利用這個(gè)插件:
<link href="blue.css" rel="stylesheet">
和 <script src="http://www.jyygyx.com/uploadfile/cj/20150307/icheck.js"></script>
//給單選框復(fù)選框添加樣式
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
注意:blue.css、blue.png、blue@2x.png,這3個(gè)文件保證了皮膚為藍(lán)色,更換其他色彩需要同時(shí)更換這3個(gè)文件。
特別注意:事件綁定! Icheck把CheckBox和ComboBox的事件名稱進(jìn)行了更改。這點(diǎn)要特別注意,見(jiàn)下圖:
然后使用on()方法綁定事件:
$('input').on('ifChecked', function(event){
alert(event.type + ' callback');
});
還有ICheck提供了1些方法可以實(shí)現(xiàn)通過(guò)編程方式改變輸入框狀態(tài):比如,
$('input').iCheck('check');
― 將輸入框的狀態(tài)設(shè)置為checked
$('input').iCheck('uncheck');
― 移除 checked 狀態(tài)
等等。
下面這幅圖是使用ICheck插件后樹(shù)形菜單的樣式:
這樣看起來(lái)還算是比較搭配的。
最近1直在使用Bootstrap這個(gè)框架,整體感覺(jué)還是挺不錯(cuò)的,非常高效,美觀。不過(guò)要實(shí)現(xiàn)1些特性的功能時(shí)還需要去尋覓1些第3方的Bootstrap插件。現(xiàn)在第3方插件也是愈來(lái)愈多,功能愈來(lái)愈豐富了。
這里提供了50個(gè)Bootstrap插件供大家學(xué)習(xí)使用:http://www.oschina.net/news/56950/jquery-bootstrap-plugins-for-your-next-projects