css3でトグルボタンを実装してみる(一部javascript)

treeの展開処理をcssで行ったとき，checkboxの見かけを変更してみたが，これを応用してwindows環境ではおなじみのトグルボタンを作成してみた．
トグルボタンとは，見かけが一般のボタンと同じであるものの，押しっぱなしにできるものである．一般的にon-offの2値を扱うのに適していて，この点でcheckboxと同じ役割をもっている．css3ではcheckboxの状態を表すことが出来るので，ボタンが押されている状態・押されていない状態の2つのスタイルを上手く使えばトグルボタンを作成できることになる．では早速やってみよう．


方針は次の通り．

• input[type="checkbox"]を用意し，直後にlabelを配置する．このinputとlabelとを関連付けておく．
• input要素はdisplay:noneで隠し，残ったクリック可能なlabel要素に装飾を施す．
• label要素にinput:checkedとinput:not(:checked)に押されている状態，押されていない状態の2つのスタイルをつける．

と，ここまでなら，前回と同じだが，トグルボタンであるためには，focusが当たる必要があったり，キー操作による値の変更が出来なければならない．従って次の作業を行う．

• label要素をspan要素で囲み，tabindexを設定する．こうすることでlabelを囲んだspanにフォーカスが当たるようになる．
  ※chromeではlabel要素のtabindexは無視されてしまう為このようにしている．
• span要素に対し，keypressイベントを設定し，キー入力時に要素がクリックされたことにする．この部分に限りcssでは対処不能であるため，javascriptの力を借りることになる．
  ※例では簡易的に処理しているが，実際にはキーコード毎に処理を行わせるのが望ましく，その場合は要件に応じ実装する必要がある．

なお，単にマウスに依るクリックのみが対象であればこの作業は必要ない．

この方針に従ってサンプルを2つ作ってみた．一つは伝統的なボタンスタイル．もうひとつはスライド式のスイッチをイメージして作ってみた．いずれにせよいかにも”押された”ことがよく判るようなデザインを施すことが大切．