Нумерованный список в обратном порядке при помощи jQuery


Нашёл случайно одну любопытную вещь, возможно кому нибудь пригодится.
Нумерованный список наоборот (в обратном порядке), то есть высшие числа не внизу, а вверху (в порядке убывания), вдобавок рассмотрим различные настройки такого списка.

Пример с помощью Jquery:
Самые популярные дистрибутивы Linux/Результаты опроса
  1. Slackware - 4,5%
  2. Gentoo - 5,5%
  3. Fedora - 10%
  4. Debian - 25%
  5. Ubuntu - 55%

И с разным оформлением (+css):

  1. Slackware - 4,5%
  2. Gentoo - 5,5%
  3. Fedora - 10%
  4. Debian - 25%
  5. Ubuntu - 55%


Выглядит это так (коды второго демо):
Основной html блок списка:
<ol class="reversed" id="reversedcss">
 <li>Slackware - 4,5%</li>
 <li>Gentoo - 5,5%</li>
 <li>Fedora - 10%</li>
 <li>Debian - 25%</li>
 <li>Ubuntu - 55%</li>
</ol>

reversed обращается к скрипту (см. следующий код)
reversedcss обращается к стилям (см. третий код)

Скрипт jQuery:
<script>
$(document).ready(function() {
 $('.reversed').each(function() {
  var $children = $(this).children('li');
  var totalChildren = $children.length;
  var start = 0;
  $children.each(function() {
   $(this).val(totalChildren - start);
   start++;
  });
 });
});  
</script>

И стиль css для наведения красоты и подмены символов в нумерованном списке:
<style>
ol {padding-left: 60px;}
#reversedcss {list-style-type:upper-roman;}
#reversedcss:hover {list-style-type:upper-roman; color:gray; font-size:18px;}
</style>
Для ol прописан небольшой отступ вправо.
В reversedcss прописан list-style-type, который задаёт следующие маркеры:

upper-roman - большие римские цифры (как в демо)
lower-roman - малые риские цифры
decimal - значение по умолчанию, арабские цифры
upper-alpha - вместо цифр заглавные A, B, C
lower-alpha - вместо цифр строчные a, b, c

Увеличение (reversedcss:hover) я добавил просто для наглядности.

Автор скрипта - Trevor Davis
Подробности использования тегов ol и ul в этой заметке.

Комментариев нет:

Отправить комментарий