使い方

次のようなタブを作ってみましょう。
Bのタブ(デフォルト選択)

※お試し版では最大2つまでしかタブを表示できません。
以下をヘッダ部にインクルードしてください。
<link rel="stylesheet" href="quicktabs.css" type="text/css"/>
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="quicktabs.js"</script>
次のようにテーブルを作成します。
<table class="-tabs">
    <tr>
        <td style="width: 200px; height: 750px;">
            <div title="A" class="-blink">Aのタブ(点滅)</div>
            <div title="B" class="-selected">Bのタブ(デフォルト選択)</div>
        </td>
    </tr>
</table>
							
解説
  • tableタグのclass属性に"-tabs"を指定します。(必須)
  • tdタグがタブのボディ部分になります。tdタグは1つだけ記述するようにしてください。(必須)
  • タブ全体の大きさを固定したい場合は、tdタグのstyle属性に、width/heightを記述して大きさを指定します。
  • tdタグ内に、divタグを記述していきます。このdivタグがタブ1つ分の内容になります。
    複数記述することができます。divタグのtitle属性に指定された文字が、タブのタイトルとして表示されます。
    title属性を省略した場合は、番号が表示されます。
  • divタグのclass属性に"-selected"を指定すると、そのタブがデフォルト選択されます。
  • divタグのclass属性に"-blink"を指定すると、そのタブのインデックスが点滅表示されます。
SmoothGridとの連携
SmoothGridと連携すればタブインデックス部分をカラフルにすることができます。
また、タブ内にきれいな表を作成して、見栄えを向上できます。
SmoothGridは以下の手順で利用できます。
  1. 同梱のSmoothGrid.cssをHTMLのヘッダ部にインクルードします。
    <link rel="stylesheet" href="smoothgrid.css" type="text/css"/>
    
  2. tableタグのclass属性に、SmoothGridのスタイルシートに用意された規定クラスを追加します。
    <table class="-tabs -lightblue">
    									
その他
  • タブインデックス部の文字のフォントや大きさを変更したい場合は、quicktabs.cssファイルの先頭にある
    tab-fontクラスを編集してください。
  • tableタグに内部的に自動でIDが振られるため、tableタグにはID属性を指定しないでください。
  • このフォルダ内にあるファイルはお試し版です。製品版を利用する場合は、 製品をご購入の上、フォルダ内にあるquicktabs.zipを解凍してください。
  • この仕組みを利用することで発生したトラブルについては責任を負いかねますのでご容赦ください。
  • バグや利用方法についてのお問い合わせは以下にお願いします。
    ujimasao@gmail.com