記事並び替えボタン（テスト）

トップページやバックナンバー、カテゴリページで、（見出し一覧＆続きを読むボタン生成後に）本文エリアの上部に並び替えボタンが出ます。どうでしょう？

OK:
Firefox 1.0
Internet Explorer 6
Konqueror 3.2.0
Netscape 7.1

NG:
Opera 7.53

Event thread: onclick
Error:
name: DOMException
message: HIERARCHY_REQUEST_ERR

# HIERARCHY_REQUEST_ERR :
# ノードが所属先以外に挿入された場合
# ...並び替えるなってこと？...(T_T)

バックナンバーで.entry-navが下に消えちゃいますね(^^;

肝心のスクリプト本体を置いておくのを忘れてました。orz
「sortEntries01a02.js.txt」
「sortEntries01a.js」をダウンロード

# はてなみたいな構造だともっと楽なんですけどねぇ...

▼（追記）一応設置方法なんかを。

右サイドバーのメモ欄（テキスト表示に設定済み）に、

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/files/sortEntries01a.js">
</script>
<script type="text/javascript">
<!--
function getSwitchToSortEntries()
{
	var text0 = "古い順に並び替え";
	var text1 = "新しい順に並び替え";
	return '<a class="switch" id="switchToSortEntries" href="#container" onclick="sortEntriesByDate();toggleText(this, '+"'"+text0+"'"+', '+"'"+text1+"'"+');" >'+text0+'</a>';
}
appendSwitchToSortEntries("content-top", "div", "center");
//-->
</script>
<style tyep="text/css">
<!--
.content-top {
text-align: center;
font-size: x-small;
margin: 15px 15px 0px 15px;
}
.content-top a.switch {
border: solid 1px silver;
text-decoration: none;
padding: 2px;
background-color: white;
color: #6699cc;
}
.content-top a.switch:hover {
border: outset 1px silver;
color: #99ccff;
}
#center {
background-color: white;
}
-->
</style>

みたいな感じで設置しています。

以下、中身の説明を少し。

function getSwitchToSortEntries()
{
...
}

という関数で並び替えボタンを作っています。

最初のtext0とtext1は、自分のブログ設定などにあわせてどうぞ。

# このスクリプトは純粋にひっくりかえしているだけみたいなものなので、「日付は古い順だけどその中で記事は新しい順」なんていう設定だと、並び替えても分かり辛くなるだけかも。

return行の引用符内を適当に編集することで、並び替えボタンもカスタマイズできます。

また、

appendSwitchToSortEntries("content-top", "div", "center");

の一行は、「"center"というidをもった要素中の"div"タグの内、"content-top"というidまたはclass名を持った要素の中に、並べ替えスイッチを追加する」という命令ですので、この三つのパラメータを変更することで、好きなところに変更できます。

なお、この命令は、ココログベーシックでは追加できない"content-top"にボタンを設置したかったから作っただけなので、下記のようなaタグを直接HTMLに追加できる場合は不要です。

例）

<a class="switch" id="switchToSortEntries" href="#container" onclick="sortEntriesByDate();toggleText(this, '古い順に並び替え', '新しい順に並び替え');">古い順に並び替え</a>';