[mt.js]mt:tabを使ってみる

以下、Movable Type の管理画面内でタブ(同ウィンドウ内での一部画面の切り替え)を実現する場合のサンプルコードです。
以下コードを、ファイルに保存してalt-tmplディレクトリに「dashboard.tmpl」とかの名前で置くと動くと思います。

<mt:setvarblock name="page_title">mt:tab test</mt:setvarblock>
<mt:include name="include/header.tmpl">
 
<h2>サンプル1 : tab-container の骨格部分</h2>
<style type="text/css">
#sample1 .hidden {
    display: inline !important;
    color: #aaa;
}
</style>
<span id="sample1" mt:delegate="tab-container">
    <span mt:tab="foo" mt:command="select-tab">foo</span>
    <span mt:tab="bar" mt:command="select-tab">bar</span>
    <span mt:tab="buz" mt:command="select-tab">buz</span>
    <span mt:tab-content="foo">
        foofoofoo
    </span>
    <span mt:tab-content="bar">
        barbarbar
    </span>
    <span mt:tab-content="buz">
        buzbuzbuz
    </span>
</span>
<mt:include name="include/footer.tmpl">

このサンプルは敢えてタブらしくない動きにしてます。見ての通り、JavaScriptは一切書かずに動きます。

先頭の「foo bar buz」の部分をクリックすると、それに応じて後続の部分のstyle属性が変化し、見た目も変わると思います。firebugなどで各要素のclass属性の変化を追ってみてください。

大雑把な動作プロセスとしては、

• mt:delegate="tab-container"が指定された要素の内側では
• 属性「mt:command="select-tab"」が指定された要素がクリックされたら
• その要素のmt:tab属性で指定されたタブのID(foo)を表示するように
• mt:tab-content属性を持ち、そこに同じタブID(foo)が指定されている要素のclassから「hidden」を取り除き
• mt:tab-content属性にタブID(foo)が指定されていない要素にはclass「hidden」を追加する

という動作になります。
MTの管理画面では事前に設定されているcssにより、「hidden」クラスは非表示となるので、タブらしい動作が実現できるというわけです。

以下、ちょっとだけcssを追加してみたバージョンです。お試し下さい。

<mt:setvarblock name="page_title">mt:tab test</mt:setvarblock>
<mt:include name="include/header.tmpl">
 
<h2>サンプル2 : css を加えてみる</h2>
 
<style type="text/css">
#sample2 .tab {
    border: 1px solid #abc;
    cursor: pointer;
}
 
#sample2 .selected-tab {
    text-decoration: underline;
    color: #f00;
}
 
#sample2 .tab-container {
    border: 1px solid #678;
}
 
</style>
<div id="sample2" mt:delegate="tab-container">
    <span mt:tab="foo" mt:command="select-tab" class="tab selected-tab">foo</span>
    <span mt:tab="bar" mt:command="select-tab" class="tab">bar</span>
    <div class="tab-container" mt:tab-content="foo">
        foofoofoo
    </div>
    <div class="tab-container hidden" mt:tab-content="bar">
        barbarbar
    </div>
</div>
 
<mt:include name="include/footer.tmpl">