独自タグとJavascriptでアーカイブリストをツリー化(修正版)
以前にかいたアーカイブリストのツリー化の修正版です。
機能としては
・年をクリックすると各月へのリンクリストが表示される。
・各月のリンクリストが表示されているときに年をクリックするとリストが隠れる。
・一番新しい年だけ月リストを表示した状態にする。
実際のスクリプトは記事の続きに書いていますので欲しい方はご自由にお持ち帰りください。
機能としては
・年をクリックすると各月へのリンクリストが表示される。
・各月のリンクリストが表示されているときに年をクリックするとリストが隠れる。
・一番新しい年だけ月リストを表示した状態にする。
実際のスクリプトは記事の続きに書いていますので欲しい方はご自由にお持ち帰りください。
{archives_list}と書かれている独自タグを↓のタグと差し替えるだけ。
<script type="text/javascript">
<!--
function writeArchive(){
var year;
var str;
var i;
var display;
var archive= new Array();
<!-- BEGIN archives_items -->
tmp=new Array({archives_item_id},{archives_item_year},"{archives_item_num_month}",{archives_item_num});
archive.push(tmp);
<!-- END archives_items -->
document.write("<ul>¥n");
for(i=0;i<archive.length;i++){
str="";
if(year==undefined || year!=archive[i][1]){
if(year!=undefined){
display="none";
str="</ul></li>¥n";
}
if(year==undefined){
display="block";
}
year=archive[i][1];
str+="<li><a href=¥"javascript:viewarc('"+ year +"')¥">"+ archive[i][1] + "年</a>¥n"
str+="<ul id=¥"month_"+ year +"¥" style=¥"display:"+display+";¥">¥n";
}
str+="<li><a href=¥"./?month="+archive[i][0]+"¥">"+ archive[i][1] + "年" + archive[i][2] + "月(" + archive[i][3] +")</a></li>¥n";
document.write(str+"¥n");
}
document.write("</ul></li></ul>¥n");
}
function viewarc(year){
var tar =document.getElementById('month_'+ year);
var disp=tar.style.display
if(disp=="none"){
tar.style.display="block";
}else{
tar.style.display="none";
}
}
writeArchive();
//-->
</script>
<script type="text/javascript">
<!--
function writeArchive(){
var year;
var str;
var i;
var display;
var archive= new Array();
<!-- BEGIN archives_items -->
tmp=new Array({archives_item_id},{archives_item_year},"{archives_item_num_month}",{archives_item_num});
archive.push(tmp);
<!-- END archives_items -->
document.write("<ul>¥n");
for(i=0;i<archive.length;i++){
str="";
if(year==undefined || year!=archive[i][1]){
if(year!=undefined){
display="none";
str="</ul></li>¥n";
}
if(year==undefined){
display="block";
}
year=archive[i][1];
str+="<li><a href=¥"javascript:viewarc('"+ year +"')¥">"+ archive[i][1] + "年</a>¥n"
str+="<ul id=¥"month_"+ year +"¥" style=¥"display:"+display+";¥">¥n";
}
str+="<li><a href=¥"./?month="+archive[i][0]+"¥">"+ archive[i][1] + "年" + archive[i][2] + "月(" + archive[i][3] +")</a></li>¥n";
document.write(str+"¥n");
}
document.write("</ul></li></ul>¥n");
}
function viewarc(year){
var tar =document.getElementById('month_'+ year);
var disp=tar.style.display
if(disp=="none"){
tar.style.display="block";
}else{
tar.style.display="none";
}
}
writeArchive();
//-->
</script>
- 2008.11.17 Monday
- JUGEM TIPS
- 09:50
- comments(19)
- trackbacks(3)
- -
- by 茅乃
さっそく使わせていただきます。