Category : BLOGいじり
2005-01-10

アーカイブをプルダウンにする

こんなエントリを、MTの時代にもあげた記憶があります・・
ともあれ、sbでもアーカイブをプルダウン化しました。
参照はJUGEMカスタマイズ講座


1)リストにidをつける

ページエントリーリスト:<div id="entrylist">{selected_entry_list}</div>
最新エントリーリスト:<div id="newentrylist">{latest_entry_list}</div>
最新コメントリスト:<div id="commentlist">{recent_comment_list}</div>
最新トラックバックリスト:<div id="tblist">{recent_trackback_list}</div>
リンクリスト:<div id="linklist">{link_list}</div>
カテゴリーリスト:<div id="categorylist">{category_list}</div>
アーカイブリスト:<div id="archivelist">{archives_list}</div>
ユーザーリスト:<div id="profilelist">{user_list}</div>

2)スクリプトの記述

<script type="text/javascript">
<!–
ListSelector(‘archivelist’,1,’月別アーカイブ’); /* アーカイブリストをプルダウン化 */
function ListSelector(idName,checkNum,selText) {
if (!selText) selText = ‘移動先を選択’;
var objFocus = this.document.getElementById(idName);
if (!objFocus) return;
var objLists = objFocus.getElementsByTagName(‘li’);
if (objLists.length < checkNum) return;
var outText = new Array();
outText[outText.length] = ‘<form class="listselector" action="#">’;
outText[outText.length] = ‘<select onchange="window.location.href = this.value">’;
outText[outText.length] = ‘<option value="">’;
outText[outText.length] = selText;
outText[outText.length] = ‘</option>’;
for (i=0;i<objLists.length;i++) {
var oAnchor = objLists[i].getElementsByTagName(‘a’);
var txtLink = oAnchor[0].getAttribute(‘href’);
var txtElem = oAnchor[0].firstChild.nodeValue;
outText[outText.length] = ‘<option value="’;
outText[outText.length] = txtLink;
outText[outText.length] = ‘">’;
outText[outText.length] = txtElem;
outText[outText.length] = ‘</option>\n’;
}
outText[outText.length] = ‘</select></form>\n’;
objFocus.innerHTML = outText.join(”);
}
// –>
</script>

3)スタイルシートを追加

form.listselector {
margin: 0px;
padding: 1px;
text-align: center;
font-weight: bold;
color: #889;
border-bottom: 1px solid #bbc;
background-color: #e5e5f5;
}

以上!

Tags: Comments Closed 

関連記事