[JavaScript] iPhone風のトグルを実装する

iPhone風のトグルを実装するライブラリを作成したので公開します。
正直こんなの何の意味があるんだって感じですが、
お客さんの趣味嗜好によっては大人の対応が必要なケースもね...
まあせっかくなんで。

iPhone風のトグルっていうのはこういうやつなんですが、

これをWebサイトで実装するためのライブラリです。
基本的にはスマートフォン用ですが、一応PCでも動作するようにしています。

使い方

ファイルの読み込み

トグルを実装したいページで「toggle.css」と「toggle.minified.js」を読み込みます。

<link rel="stylesheet" href="toggle.css">
<script src="toggle.minified.js"></script>

マークアップ

次にトグルを表示させるためのマークアップをします。
以下の様に ON と OFF にあたる input要素（ラジオボタン）を記述して label要素で括ります。
（普通にラジオボタンを使用する際と同じですね。）
そして二つのラジオボタンをグルーピングする親要素を記述してその要素の class に「toggle」と指定します。
（※親要素は何でも構いません。適宜変更可能です。）

<p class="toggle">
<label><input type="radio" name="toggle1" value="1">ON</label>
<label><input type="radio" name="toggle1" value="0">OFF</label>
</p>

以上でトグルが実装されます。

cssファイルと jsファイルを分けてますので、
ある程度分かる人は cssファイルの方をいじってサイトに合うようにデザイン修正できるかと思います。
jsの方もいじれるように圧縮していないファイルも同梱しておきます。