kawama.jp

jqueryで月別アーカイブを年ごとの開閉式メニューにする

カテゴリ: Ajax,JavaScript — タグ: — 2011年6月18日 23:20 — Comments (0)hatebu count

このブログのサイドバーの月別アーカイブですが、さすがに6年分ともなるとリストが長く、見苦しいので、jqueryで開閉式のメニューにしてみました。

ソースはこんな感じです。

var rebuildMonthlyArchives = function() {

var mnYearArr = [];

//1.月別アーカイブのリストを走査し、jquery要素を年別に配列に格納

$('#archives ul li a').each(function(){

var $this = $(this),

$this_year = $this.attr("title").substring(0,4);

if(typeof(mnYearArr['mn'+$this_year])==="undefined"){

mnYearArr['mn'+$this_year] = [];

mnYearArr['mn'+$this_year] = $('<li><span class="expand">'+$this_year+'年</span><ul class="monthly"></ul></li>');

}

mnYearArr['mn'+$this_year].find('ul.monthly').append($this.parent());

});

//2.新たにjquery要素を作り、1で配列に入れた要素を入れ、最後に#archivesに戻す

var $jq_obj = $('<ul></ul>');

for (var mni in mnYearArr) {

$jq_obj.append(mnYearArr[mni]);

}

$('#archives ul').remove();

$('#archives').append($jq_obj);

//3.見た目をよくする

$('#archives ul li span.expand').click(function(){

$(this).next().toggle();

if($(this).next().css('display')=="block"){ $(this).css("background-image","url(/imgs/btn_minus.gif)"); }

else{ $(this).css("background-image","url(/imgs/btn_plus.gif)"); }

});

};

ちょっと冗長な感じがするのでもっと短くしたいのですが、とりあえず今回はここまでにします。

あとwpのタグはこうなってます。

<li id="archives">月別アーカイブ

<ul>

 <?php wp_get_archives('type=monthly&show_post_count=true'); ?>

</ul>

 </li>

<script type="text/javascript">rebuildMonthlyArchives();</script>

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress

css.php