blog.aklaswad.com

MT4の管理画面では、かなりしっかりした独自のJavaScriptライブラリ(mt.js)が用意されています。Transformerやalt-tmplでの管理画面のカスタマイズに応用できると良いのですが、残念ながら、今のところまとまったドキュメントも無く、応用するのが難しい状況です。

でもやっぱり、そんな使えるライブラリを放置するともったいないお化けが出るぞ、ということで、mt.jsの機能の中で一番簡単そうな、タブ機能の使い方を調べてみました。

以下、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">