スキンによるデザイン変更可能なチェックボックス、ラジオボタン「Ion.CheckRadio」

「Ion.CheckRadio」は3種類のスキンによるデザイン変更が可能な、チェックボックス、ラジオボタンを実装できるjQueryプラグインです。

Ion.CheckRadio

Ion-Check-Radio

シンプルなデザインが良いですね。さらに3種類のスキンからカラーを選ぶことができます。

 

もっともシンプルな”Cloudy Skin”です。清潔感のあるデザインです。やじるし箇所からスキンを選択できます。

Ion-Check-Radio-demo-1

 

次に”Dark Skin”。シックでかっこいいです。

Ion-Check-Radio-demo-2

 

最後に”Green Skin”。こちらも清潔感があってかつ特徴的なカラーですね。

Ion-Check-Radio-demo-3

 

 

それでは「Ion.CheckRadio」の実装方法をご紹介。まずはjQuery含む外部ファイルを読み込みます。今回はシックな”Dark Skin”を実装してみようと思うので、それに対応したスキンを読み込んでいます。

<link rel="stylesheet" href="css/ion.checkRadio.css">
<link rel="stylesheet" href="css/ion.checkRadio.dark.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/ion-checkRadio/ion.checkRadio.min.js"></script>

 

HTMLはこのようにマークアップします。

<input type="radio" name="reading" value="0" id="reading_0" /> <label for="reading_0">Very much</label>
<input type="radio" name="reading" value="1" id="reading_1" /> <label for="reading_1">Sometimes</label>
<input type="radio" name="reading" value="2" id="reading_2" /> <label for="reading_2">Better watch movie</label>
<input type="radio" name="reading" value="3" id="reading_3" /> <label for="reading_3">Hate it</label>

 

サンプル用にCSSをこのように指定しました。

body {
  background: #2D2D2D;
}

 

JavaScriptはこのように実装します。

$("input[type='radio'], input[type='checkbox']").ionCheckRadio();

 

するとこのように作ることが出来ました。

Ion-Check-Radio-sample-1

小さな部品ですが、デフォルトのチェックボックス、ラジオボタンからこういったオリジナルなものに変更するとオシャレ感がぐっとあがります。参考にどうぞ。

 

Home > JavaScript > スキンによるデザイン変更可能なチェックボックス、ラジオボタン「Ion.CheckRadio」

Return to page top