Movable Typeのjsファイル内の関数を利用したShow-Hideのカスタマイズ

Movable Typeが生成する、インデックステンプレートのjsファイルに登録されている関数を利用して特定IDの要素の表示や非表示を実現するカスタマイズです。

ページ内の一部分をクリックで表示させたり、非表示にしたりするのに、自分でJavaScriptを書いて用意するか、prototype.jsやjQueryを利用するなどの方法があります。

さて、ほんの小ネタなのですが、MTのインデックステンプレートのJavaScriptテンプレートには、簡単な要素の表示・非表示をおこなう関数があらかじめ用意されています。簡素な表示切り替えでしたら、このJSファイルを利用する、という手もあります。

今回使う関数は、mtShow()とmtHide()です。

なお、上記の関数はMovable Type 4のヴァージョンによってはこの関数が導入されていませんので注意願います。ということで、以下のカスタマイズは、JavaScriptテンプレート内に、function mtHide(id)といったコードが記述されていることを前提として説明していきます。

`mtShow()`を利用した例

例として、簡単なテンプレートで示します。<$mt:Link template="javascript"$>を使ってMTのJSファイルを呼び出していますが、これはあくまでも例としてのテンプレートです。実際の使用は、individualアーカイブテンプレートのように作りこまれたテンプレート内で利用することを想定しています。


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
#show { display: none; }
</style>
<title>MT Template test Show(ID)</title>
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
</head>
<body>
<p><a href="./" onclick="mtShow('show'); return false;">Show List</a></p>
     <div id="show">
     <ul>
         <li>list - 1</li>
         <li>list - 2</li>
         <li>list - 3</li>
     </ul>
     </div>
</body>
</html>

mtShow('show')で表示したい要素のID、showを渡します。記事ページのコメント一覧の表示とか、トラックバックURIを表示させるなどに使えるかと思います。

`mtHide()`を利用した例

以下は、画面上部に表示された要素を消すボタン用に関数を利用した例です。サイドバーやページの最上部に簡単なお知らせを表示するような場合などに。


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
body *{ margin:0; padding:0; }
#hide { display: block;
 margin     : 0;
 border     : 1px solid #CCCCCC;
 background : #FFFFE0 none;
 text-align : right; }
</style>
<title>MT Template test Hide(ID)</title>
<script type="text/javascript" src="<mt:Link template="javascript">"></script>
</head>
<body>
     <p id="hide">This is a test of MT Template !! <a title="Click to hide this message" href="./" onclick="mtHide('hide'); return false;">[ X ]</a></p>
<ul>
<li>list - 1</li>
<li>list - 2</li>
<li>list - 3</li>
</ul>
</body>
</html>

以上です。もっと複雑なことをされたいようなときは、自前で用意されたほうがいいかと思います。

これらのテンプレートをセットしたものは以下にあります。

解凍後の、templatesフォルダ内のファイルをインデックステンプレートで作成すれば試すことができます。

Download

TestShowHide01.zip

Movable Typeのjsファイル内の関数を利用したShow-Hideのカスタマイズ

mtShow()を利用した例

mtHide()を利用した例

Comments:0

`mtShow()`を利用した例

`mtHide()`を利用した例