[JS]順序付きリストの昇降を逆にするスクリプト -Reversed Ordered List

ol要素で実装する順序付きリストの昇降を逆にするスクリプトをTrevor Davisから紹介します。

Reversed Ordered List
demo

HTMLだけで上記のキャプチャのように実装することも可能ですが、Reversed Ordered ListはクリーンなHTMLで実装が可能です。

HTMLだけで実装するサンプル

<ol>
<li value="10">Lorem ipsum</li>
<li value="9">Lorem ipsum</li>
<li value="8">Lorem ipsum</li>

略
<li value="1">Lorem ipsum</li>
</ol>

スクリプト使用時のHTML

<ol class="reversed">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>

略
<li>Lorem ipsum</li>
</ol>

Reversed Ordered ListはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Post on:2009年11月12日