コニファ・ロゴ

csstest:軽量なjQueryプラグインicheck.jsを使って、きれいなcheckboxとradioボタン

jQueryプラグインicheck.jsを使って、きれいなcheck boxとradioボタンを実装します。あらかじめ6種類のskinが用意されていて、その内3種類には10個の色違いがあり、それぞれ個別のCSS、スプライト画像が付属しています。利用する際は、チェックボックス用、ラジオボタン用それぞれのCSSをscriptで指定します。使用する分のみのCSS、スプライト画像を設置する形になるので、1種類だけならごく軽量になります。

サンプル1 skinはflat-green

 チェックボックス1-1   チェックボックス1-2

 ラジオボタン1-1   ラジオボタン1-2

サンプル2 skinはsquare-blue

 チェックボックス2-1   チェックボックス2-2

 ラジオボタン2-1   ラジオボタン2-2

サンプル3 skinはminimal-pink

 チェックボックス3-1   チェックボックス3-2

 ラジオボタン3-1   ラジオボタン3-2

 

サンプルのCSS指定scriptのソース

$(document).ready(function(){
	$('#sample input').iCheck({
		checkboxClass: 'icheckbox_flat-green',
		radioClass: 'iradio_flat-green',
		increaseArea: '20%' // optional
	});
	$('#sample2 input').iCheck({
		checkboxClass: 'icheckbox_square-blue',
		radioClass: 'iradio_square-blue',
		increaseArea: '20%' // optional
	});
	$('#sample3 input').iCheck({
		checkboxClass: 'icheckbox_minimal-pink',
		radioClass: 'iradio_minimal-pink',
		increaseArea: '20%' // optional
	});
});

 

戻るボタン