baserJSでチェックボックスを装飾する

コーポレートサイトにちょうどいいJavaScriptライブラリ baserJS の解説記事です。

Webサイトと詳しいAPIリファレンスはこちら baserJS Webサイト

装飾のための要素を追加する

input要素を装飾する場合、CSSのappearance: noneなどを使用すれば、ある程度の装飾はできますが、ブラウザの対応だったり、痒いところに手が届かなかったり、デザインによっては満足に実装できないケースがあります。

baserJSのbcCheckboxメソッドは、実行するとチェックボックスに対して、装飾のための要素を追加することができます。

HTML

<input type="checkbox" name="key" id="foo" />
<label for="foo">foo</label>

JavaScript

$(':checkbox').bcCheckbox();

上記のJavaScriptを実行するとHTMLは以下のように変化します。

付加されるクラス名は変更可能です。

<span class="-bc-form-element -bc-wrapper -bc-wrapper--blur -bc-form-checkbox-wrapper -bc-wrapper--unchecked">
  <input type="checkbox" name="key" id="foo" class="-bc-element -bc-form-element -bc-form-element--blur -bc-form-checkbox -bc-form-element--unchecked" aria-checked="false">
  <label for="foo" class="-bc-form-element -bc-form-element__label -bc-form-element__label--blur -bc-form-checkbox__label -bc-form-element__label--unchecked">foo</label>
</span>

状態変化

要素の一部には自動でイベントが登録され、状態によって変化します。この変化を利用して、CSS側で装飾の変化を記述するとよいでしょう。

フォーカス時のクラス

• -bc-wrapper--blur ←→ -bc-wrapper--focus
• -bc-form-element--blur ←→ -bc-form-element--focus
• -bc-form-element__label--blur ←→ -bc-form-element__label--focus

チェック時のクラス

• -bc-wrapper--unchecked ←→ -bc-wrapper--checked
• -bc-form-element--unchecked ←→ -bc-form-element--checked
• -bc-form-element__label--unchecked ←→ -bc-form-element__label--checked

チェック時の属性

• aria-checked="false" ←→ aria-checked="true"

サンプル