« インターネットラジオとLast.fm | メイン | 月にサッカー場を作ろう »

jQueryでMTにエフェクトを追加する [web_design]

jQueryこのサイトではjQueryをあっちこっちで使っています.jQueryはjavascriptのことをあまりよくわかっていなくても,いっちょまえにエフェクトをつけることができたり,アイディアをひねっておもしろいことができたりするのでとても使いやすいライブラリだと思います.まだまだ充分には活用できていないのですが,とりあえず今のところ,ちょこっと動きをつけてみようというのを考えていろいろと.

せっかくMTを使っていて自由にテンプレートを変更できるので,豊富にあるMT用のプラグインやテンプレートと組み合わせて何かできると面白いんじゃないかなということで,いくつか考えてみました.環境は以下の通りです.

  • Movable Type 4.01
  • jQuery 1.2.1 (1.1系でも動作すると思われます)

ご覧になっている皆様の方でもおもしろい使い方があったら教えていただけると嬉しいです.

  • 2007/10/15 : 「サイドバーの折りたたみ」でdiv#list_moreは必要ないので削除.代わりにul#list_moreとしました
  • 2007/10/14 : 「サイドバーの折りたたみ」で"次の表示"と"隠す"がトグルになるように修正

Counterプラグインの応用として小粋空間で紹介されているサイドバーの折りたたみ追記の折りたたみをjQueryで代用することを考えます.準備としてheadタグ内で<script type="text/javascript" src="jquery-latest.js"></script>などとしてスクリプトを読み込んでおきます.

「続きを読む」をいじってみる

// テンプレートの記述
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<button class="more_button" onclick="$('#more_<$mt:EntryID$>').slideToggle(500)">続きを読む &quot;<$mt:EntryTitle$>&quot; &raquo;"</button>
<div id="more_<$mt:EntryID$>" class="entry-more">
<$mt:EntryMore$>
</div>
</MTIfNonEmpty>

エントリー・アーカイブには必要ないのでカテゴリや月別の一覧表示用のテンプレートにだけ書いておけばいいかなと.スクリプトを書いてボタンを生成することもできるんですが,テンプレートを少し変えるだけで実現できるのでお手軽なんじゃないなかと思います.

「サイドバーの折りたたみ」をいじってみる

格段に記述量が少なくなることと,エフェクトの種類を選べるのがメリットです.テンプレートの方に続き...部分を表示させていないのはjavascriptを切っている場合に無意味なリンクが表示されるのを防ぐため.style属性で#list_moreにdisplay:none;を指定しているのも同じ理由です(あるいはそのまま表示させてもいいかもしれませんね).他の方法を考えることもできますが面倒なのでここではこの方法で.

// テンプレートの記述
<MTCounter>
<ul class="module-list">
<MTEntries lastn="10"><$mt:CounterPlus$>
<MTCounterIfEqual value="6">
</ul>
<ul id="list_more" class="module-list" style="display:none;">
</MTCounterIfEqual>
<li class="module-list-item"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5">
</MTCounterIfMore>
</MTCounter>
// jQueryの記述
$(function(){
    $("#list_more").before('<p class="showhide">次の5件を表示 &raquo;</p>');
    $(".showhide").toggle(function(){
        $(this).html('&laquo; 隠す');
        $("#list_more").slideToggle(500);
    }, function(){
        $(this).html('次の5件を表示 &raquo;');
        $("#list_more").slideToggle(500);
    });
});

ここではどちらもslideToggleを使っていますが,jQuery easingプラグインを使うともう少しバリエーションをつけることもできると思います.

トラックバック (0)

このエントリーのトラックバックURL: http://dormouse.oops.jp/mtc/mt-tb.cgi/65

(スパム対策として当該エントリへのリンクが含まれないトラックバックを弾いています)

以下の一覧は、このエントリーを参照しています:  jQueryでMTにエフェクトを追加する

コメント (0)

コメントを投稿

(コメントは承認制をとっているため,公開されるまで時間がかかる場合があります)


画像の中に見える文字を入力してください。