MT5の管理画面でテーブルの行ハイライト

Movable Type5 (MTOS5)の管理画面で各テーブルにてマウスオーバー時に行をハイライトするというカスタマイズです

tableの行ハイライトのデザインに慣れてしまうと、どうもどこでも実装してみたくなってしまいこのとおりでございます。

「ブログテンプレートの管理」とかtableで構成されているリストのあるページでマウスオーバーの時にハイライトになるというものです。

其レ、CSSで出来るよ（・∀・）というかたはその様にされて構わないのですけれど（んだども、セレクタが使える部分は大きいかなあとかなんとか）。

MTOS5.01-jaにて確認をおこないました（jQueryを使うのでMT5以降用です）。alt-tmplで代替テンプレートとして使用します。

{mtシステム}/alt-tmpl/CMS/include/ 以下に、{mtシステム}/tmpl/cms/include/footer.tmpl のコピーを置いて、以下のコードをfooter.tmplの先頭に追記します。

追記：すみません、selectedのときの背景色を考慮してなかったので書き直しました

【追記：2010/04/28 】クラスを(付加/削除)するタイプにコードを変更しました。＞旧コード

<mt:setvarblock name="jq_js_include" append="1">
var addCss='';
addCss += '<style type="text/css">\n'
addCss += '.listTableHighlight { background-color : #e5ecf3 !important; }\n';
addCss += '</style>\n';jQuery("head").append(addCss);jQuery('table[id*=listing] tbody tr').hover(function(){
       jQuery(this).addClass("listTableHighlight");
}, function() {
       jQuery(this).removeClass("listTableHighlight");
});</mt:setvarblock>

tableの縞々の背景色は手抜きでハイライト前の元の色を取得せずclass名、odd、evenに指定されていた背景色を使うことにしてるので、自分で好きな配色にされてるかたは（いるのか？）適宜変更が必要になるでしょう。

あ、いちおうプラグインらしきものも用意してみました。こういうの初めて作ったような気が。上のalt-tmpl使うのと同じです。footerに上記のコードを追加するだけです。それ以上の機能はありません。

http://www.markdiary.com/sample/haifu/ListTableHighlight.zip (zip)

markdiarycom / ShowHideLeftMenu

メモ的に。SetVarBlock（+append）を使った書き方をするのは好みの問題ですので直に代替テンプレートにjQueryのコードとか書き込んでも構わないと思います（自分が使う分には、という前提だけど）。SetVarBlockを使う方法でやってるのは、止めにしたいときに、SetVarBlockタグと中身をまるっと削除すればその部分はなかったことになるので。

そのような関係で、テンプレートに追加したいところに空要素書き込んでおいて流し込ませなくて、jQueryで要素を作って{append()/prepend()}するようなのをしばしばおこないます。