flat

line

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/all.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/icheck.min.js"></script>
<script>
    $(window).load(function(){
		$('.iCheck-demo').iCheck({
			checkboxClass: 'icheckbox_flat',
			radioClass: 'iradio_flat',
			increaseArea: '20%'
		});
		$('.iCheck-demo02').each(function(){
			var self = $(this),
			label = self.next(),
			label_text = label.text();
		
			label.remove();
			self.iCheck({
				checkboxClass: 'icheckbox_line',
				radioClass: 'iradio_line',
				insert: '<div class="icheck_line-icon"></div>' + label_text
			});
		});
		$('#iCheck .skin-list li').on('click', function(){
			var $this     = $(this);
			var $cur      = $($('#iCheck .iCheck-box').get(0));
			var _skin     = $this.text();
			var _curSkin  = $cur.attr('data-skin');
			
			var _curColor = '-' + $cur.attr('data-color');
			if(_curColor == '-black') _curColor = '';
			
			$cur.removeAttr('style');
			
			
			$('.icheckbox_' + _curSkin + _curColor + ', .iradio_' + _curSkin + _curColor).each(function(){
				var _cls = $(this).attr('class');
				_cls = _cls.replace(_curSkin, _skin);
				if(_skin == 'polaris' || _skin == 'futurico') {
					_cls = _cls.replace(_curColor, '');
					$cur.attr('data-color', 'black');
					$cur.css('background-color', '#444');
					$cur.css('color', '#fff');
				}
				$(this).attr('class', _cls);
			});
			$cur.attr('data-skin', _skin);
			$cur.find('.current-skin').text(_skin);
		});
		$('#iCheck .color-list li').on('click', function(){
			var $this     = $(this);
			var $cur      = $($('#iCheck .iCheck-box').get(0));
			
			var _color    = '-' + $this.text();
			if(_color == '-black') _color = '';
			
			var _curSkin  = $cur.attr('data-skin');
			if(_curSkin == 'polaris' || _curSkin == 'futurico') {
				return;
			}
			
			var _curColor = '-' + $cur.attr('data-color');
			if(_curColor == '-black') _curColor = '';
			
			$('.icheckbox_' + _curSkin + _curColor + ', .iradio_' + _curSkin + _curColor).each(function(){
				var _cls = $(this).attr('class');
				if(_curColor == '') {
					_cls = _cls.replace(_curSkin, _curSkin + _color);
				}
				else _cls = _cls.replace(_curColor, _color);
				$(this).attr('class', _cls);
			});
			$('.icheckbox_line' + _curColor + ', .iradio_line' + _curColor).each(function(){
				var _cls = $(this).attr('class');
				if(_curColor == '') {
					_cls = _cls.replace('_line', '_line' + _color);
				}
				else _cls = _cls.replace(_curColor, _color);
				$(this).attr('class', _cls);
			});
			if(_color == '') _color = 'black';
			else _color = _color.substr(1);
			$cur.attr('data-color', _color);
		});
    });
</script>
<ul class="skin-list">
	<li><button class="yellow">flat</button></li>
	<li><button class="yellow">futurico</button></li>
	<li><button class="yellow">minimal</button></li>
	<li><button class="yellow">polaris</button></li>
	<li><button class="yellow">square</button></li>
</ul>
<ul class="color-list">
	<li><button class="blue">black</button></li>
	<li><button class="blue">red</button></li>
	<li><button class="blue">green</button></li>
	<li><button class="blue">blue</button></li>
	<li><button class="blue">aero</button></li>
	<li><button class="blue">grey</button></li>
	<li><button class="blue">orange</button></li>
	<li><button class="blue">yellow</button></li>
	<li><button class="blue">pink</button></li>
	<li><button class="blue">purple</button></li>
</ul>
<div id="iCheckBox01" class="iCheck-box" data-color="black" data-skin="flat">
	<p class="current-skin">flat</p>
	<ul>
		<li><input type="checkbox" id="iCheckDemo01-1" class="iCheck-demo"><label for="iCheckDemo01-1">Checkbox1</label></li>
		<li><input type="checkbox" id="iCheckDemo01-2" class="iCheck-demo" checked><label for="iCheckDemo01-2">Checkbox2</label></li>
		<li><input type="checkbox" id="iCheckDemo01-3" class="iCheck-demo" disabled><label for="iCheckDemo01-3">Checkbox disabled</label></li>
		<li><input type="checkbox" id="iCheckDemo01-4" class="iCheck-demo" checked disabled><label for="iCheckDemo01-4">Checkbox disabled & checked</label></li>
	</ul>
	<ul>
		<li><input type="radio" id="iCheckDemo01-5" class="iCheck-demo" name="iCheckRadio01"><label for="iCheckDemo01-5">Radio Button1</label></li>
		<li><input type="radio" id="iCheckDemo01-6" class="iCheck-demo" name="iCheckRadio01" checked><label for="iCheckDemo01-6">Radio Button2</label></li>
		<li><input type="radio" id="iCheckDemo01-7" class="iCheck-demo" disabled><label for="iCheckDemo01-7">Radio Button disabled</label></li>
		<li><input type="radio" id="iCheckDemo01-8" class="iCheck-demo" checked disabled><label for="iCheckDemo01-8">Radio Button disabled & checked</label></li>
	</ul>	
</div>

<div id="iCheckBox02" class="iCheck-box">
	<p class="current-skin">line</p>
	<ul>
		<li><input type="checkbox" id="iCheckDemo02-1" class="iCheck-demo02"><label for="iCheckDemo02-1">Checkbox1</label></li>
		<li><input type="checkbox" id="iCheckDemo02-2" class="iCheck-demo02" checked><label for="iCheckDemo02-2">Checkbox2</label></li>
		<li><input type="checkbox" id="iCheckDemo02-3" class="iCheck-demo02" disabled><label for="iCheckDemo02-3">Checkbox disabled</label></li>
		<li><input type="checkbox" id="iCheckDemo02-4" class="iCheck-demo02" checked disabled><label for="iCheckDemo02-4">Checkbox disabled & checked</label></li>
	</ul>
	<ul>
		<li><input type="radio" id="iCheckDemo02-5" class="iCheck-demo02" name="iCheckRadio02"><label for="iCheckDemo02-5">Radio Button1</label></li>
		<li><input type="radio" id="iCheckDemo02-6" class="iCheck-demo02" name="iCheckRadio02" checked><label for="iCheckDemo02-6">Radio Button2</label></li>
		<li><input type="radio" id="iCheckDemo02-7" class="iCheck-demo02" disabled><label for="iCheckDemo02-7">Radio Button disabled</label></li>
		<li><input type="radio" id="iCheckDemo02-8" class="iCheck-demo02" checked disabled><label for="iCheckDemo02-8">Radio Button disabled & checked</label></li>
	</ul>	
</div>

iCheckについて

iCheckはチェックボックス、ラジオボタンのなどの見た目をPC,スマホ、クロスブラウザで統一できるプラグインです。
用意されているスキンも豊富なので自分好みのスタイルに設定できそうです
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Ranger

    Ranger

    スライダーで値を選択できるUIを簡単に設置できる

  • selectize

    selectize

    inputボックス、selectボックスなどの入力ボックスの使い勝手を向上してくれる

  • DependentSelects

    DependentSelects

    セレクトボックスの選択に応じて、次のセレクトボックスの内容を動的に変更

  • Stepper

    Stepper

    マウス操作で数字をカウントアップ、ダウンで入力させる

  • ClearableTextField

    ClearableTextField

    入力フォームに文字を入力すると文字削除用のボタンを表示