トップ > 日記 > タブインターフェース

タブインターフェース

日記


このスニペットから始まったタブボックスの検討は、Raindrops | Raindrops 0.924 レビューの申請しました で、タブボックスの自動生成として公開しました。


ポータルサイトなどでは、必ずといっていいほど使っているタブボックススニペットを書きました
スニペットを公開します

div要素に見出しとコンテンツを追加していくと、タブの部分は、jQueryが勝手に作ってくれるというものです。

  <ul id="tab-navigation"></ul>
  <div id="tab-block">
     <div id="wrapper">
      <div class="page">
        <h3>Home</h3>
     </div>
     <div class="page">
        <h3>Portfolio</h3>
        Lorem ipsum dolor sit amet, consectetur 
     </div>
     <div class="page" >
        <h3>Links</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     </div>
      <div class="page">
        <h3>Contact</h3>
      </div>
    </div>
  </div>

（div.pageのブロックを追加していけば、タブが追加）


単体で動作するhtmlページならこれで動いてくれるのですが、例えば、ブログにこのコードを埋め込んだような場合、単体でページを表示している分には、うまく動いてくれますが、indexするページでは、複数のエントリーの中に、複数のタブボックスが並ぶということになり、二つの問題が出てきます。

一つは、同一のidアトリビュートの重複という問題です。
もう一つは、スクリプトがどっちのidに属せばいいのか判断がつかないので、リスト自体もおかしくなります。


ブログで使えるタブインターフェースは、どうすればいいのかな、という事を検討するたたき台として、
以前作った#(フラグメント識別子)付リンクと目次の自動作成　jQueryをタブ用にしたものです。




TOP