[CSS]スクリプトに依存せずに、「:checked」でできるテクニックをBootstrapに組み込むプラグイン -Bootleg.css

Post on:2012年12月11日

sponsorsr

タブ、ドロップダウン、アコーディオン、カルーセルなど、今まではスクリプトに依存しないと実装できなかったものをスタイルシートベースで実装するBootstrapのプラグインを紹介します。
Bootstapのプラグインですが、CSSの「:checked」を使ったテクニックを学ぶのにも役立ちます。

Bootleg.css

仕組みは簡単に説明すると、見えない状態のラジオボタンを使い、そのオン・オフのチェック状態でコンテンツを表示・非表示します。
デモと共に、「:checked」擬似要素の使い方を紹介します。

モーダル

ボタンをラジオボタンにし、そのチェック状態でモーダルを表示・非表示します。

HTML

<-- Button to trigger modal -->
<label for="modal1" role="button" class="btn">Launch demo modal</label>
<input type="radio" id="modal1" name="modal" />

<-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <label role="button" class="close" for="closemodal">×</label>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <label role="button" class="close" for="closemodal">Close</label>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

ドロップダウン

各アイテムのリンク or ボタンをラジオボタンにし、そのチェック状態でドロップダウンを開閉します。

HTML

<div class="dropdown">
  <input type="radio" name="dropdowns" id="dropdown1">
  <label for="dropdown1" class="dropdown-toggle">Dropdown <b class="caret"></b></label>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

タブ

各タブはラジオボタンのinput要素とlabel要素を含んでおり、そのチェック状態でタブに対応したコンテンツを表示します。

HTML

<input type="radio" id="home" name="tabs" checked />
<label for="home">Home</label>

<input type="radio" id="profile" name="tabs" />
<label for="profile">Profile</label>

<input type="radio" id="other" name="tabs" />
<label for="other">Other</label>

<input type="radio" id="misc" name="tabs" />
<label for="misc">Misc</label>

ボタン

ボタンはチェックボックスのinput要素とlabel要素を含んでおり、そのチェック状態でボタンのアクティブを適用します。

HTML

<input type="checkbox" id="toggle" data-toggle="button">
<label for="toggle" class="btn">Single Toggle</label>

アコーディオン

基本的な仕組みはタブと同じです、各アイテムはラジオボタンのinput要素とlabel要素を含んでおり、そのチェック状態でアコーディオンを開閉します。

HTML

<input type="radio" id="collapse1" name="accordion-group" checked>
<label for="collapseAll" class="accordion-dismiss"></label>
<div class="accordion-heading">
  <label for="collapse1" class="accordion-toggle">Collapsible Group Item #1</label>
</div>
<div id="collapseOne" class="accordion-body collapse">
  <div class="accordion-inner">
    ...
  </div>
</div>

カルーセル

カルーセルはコンテンツを回転木馬のように巡回表示させるもので、少し高度なものになっています。各コンテンツに対応したラジオボタンをセットし、ナビゲーションでそのラジオボタンのチェック状態を判定し対応コンテンツを表示します。

HTML

<div id="myCarousel" class="carousel slide">
  <!-- Carousel radios, add checked attribute to set initial active slide -->
  <input type="radio" id="slide1" name="slider" checked>
  <input type="radio" id="slide2" name="slider">
  <input type="radio" id="slide3" name="slider">

  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <div id="controls">
    <label for="slide1" class="carousel-control"><span>&lsaquo;</span><span>&rsaquo;</span></label>
    <label for="slide2" class="carousel-control"><span>&lsaquo;</span><span>&rsaquo;</span></label>
    <label for="slide3" class="carousel-control"><span>&lsaquo;</span><span>&rsaquo;</span></label>
  </div>
</div>