[JS]順序付きリストの昇降を逆にするスクリプト -Reversed Ordered List
Post on:2009年11月12日
sponsors
ol要素で実装する順序付きリストの昇降を逆にするスクリプトをTrevor Davisから紹介します。
HTMLだけで上記のキャプチャのように実装することも可能ですが、Reversed Ordered ListはクリーンなHTMLで実装が可能です。
HTMLだけで実装するサンプル
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
スクリプト使用時のHTML
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <ol class="reversed"> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> 略 <li>Lorem ipsum</li> </ol> </textarea> |
Reversed Ordered ListはjQueryのプラグインのため、実装にはjquery.jsが必要です。
sponsors
