baserJSでラジオボタンを装飾する

  • 0
    いいね
  • 0
    コメント
    この記事は最終更新日から1年以上が経過しています。

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

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

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

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

    baserJSのbcRadioメソッドは、実行するとラジオボタンに対して、装飾のための要素を追加することができます。

    HTML

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

    JavaScript

    $(':radio').bcRadio();
    

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

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

    <span class="-bc-form-element -bc-wrapper -bc-wrapper--blur -bc-form-radio-wrapper -bc-wrapper--unchecked">
      <input type="radio" name="key" id="foo" class="-bc-element -bc-form-element -bc-form-element--blur -bc-form-radio -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-radio__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"

    サンプル

    http://codepen.io/YusukeHirao/pen/dPYxVR