サイトの内容を手軽にタブ形式に変更してくれるJavaScriptライブラリを見つけたので試してみました。
既にサイドメニューの一部で導入済みですが、MTのエントリーとも組み合わせてみました。
表示例ページは以下より。
エントリータイトルには見出し(H2やH3)を割り当てる事が多いかと思いますが、この見出しタグは、tabber.jsでは「タブ内の文字列」として扱われるので、その点が注意する点かと思います。
見出しタグはそのままに、class=tabbertabにtitle属性を付加して、タブ内の文字列を指定する方法も試してみました。
tabber.jsライブラリのDL
■JavaScript Tabifier automatically create an html css tabs interface
上記よりtabber.jsをDLして、読み込ませます。
スクリプトは任意の箇所に置いて、パスの指定を行います。
<script type="text/javascript" src="tabber.js"></script>
<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>タブ式に変換したい箇所の記述例
class=tabber で囲んだ箇所がタブ式コンテンツに変更されます。
class=tabbertab で囲んだ見出し箇所はタブの文字列になります。
<div class="tabber">
<div class="tabbertab">
<h2>タブの文字列</h2>
<p>コンテンツ部分</p>
<!-- tabbertab end --></div>
<div class="tabbertab">
<h2>タブの文字列</h2>
<p>コンテンツ部分</p>
<!-- tabbertab end --></div>
<!-- tabber end --></div><div class="tabber">
<div class="tabbertab" title="タブの文字列">
<h2>文字列</h2>
<p>コンテンツ部分</p>
<!-- tabbertab end --></div>
<div class="tabbertab" title="タブの文字列">
<h2>文字列</h2>
<p>コンテンツ部分</p>
<!-- tabbertab end --></div>
<!-- tabber end --></div>
タブで切り替えたコンテンツ内に更にタブを設置する方法もありますが、ここでは一番簡単な方法だけで。
より詳細に試してみたい場合は、配布サイトのTipsを見ながら試してみると良いです。
MTのエントリーをタブ式にしてみる
エントリーとして生成される範囲をtabbertabで括ってあげると良いです。
アイテム(画像)をタブ形式にしてみたり、タグをタブに割り当てて、属するエントリーを表示させたりも出来そうです。
<div class="tabber">
<MTEntries lastn="5">
<div class="tabbertab">
<h2><$MTEntryDate$></h2>
<div class="testtitle"><$MTEntryTitle$></div>
<div class="entry-body">
<$mt:EntryBody$>
<!-- entry-body end --></div>
<!-- tabbertab end --></div>
</MTEntries>
<!-- tabber end --></div>tabberのcss
tabberライブラリに付属しているcssでは、見出しをdisplay=noneで消してあります。
この箇所を変更すれば、オリジナルでは消えている見出しも表示させる事が可能です。
あとがき
スクリプトを読み込ませて、classを付加するだけなので、もとのHTML(テンプレート)に過度の変更を行わずに導入する事が可能です。
この点がとても良いなぁ、と思って試してみました。
スクリプトをOFFにした場合でもコンテンツが消えない点も○。
ひとつのページで複数のtabber指定を行っても、干渉もなく利用する事が出来ます。
サイトにちょっと変化を持たせてみたい方や、興味の湧いた方はちょっと試してみるといかがでしょうか？
(｢･ω･)｢
