Нашёл случайно одну любопытную вещь, возможно кому нибудь пригодится.
Нумерованный список наоборот (в обратном порядке), то есть высшие числа не внизу, а вверху (в порядке убывания), вдобавок рассмотрим различные настройки такого списка.
Пример с помощью Jquery:
← Самые популярные дистрибутивы Linux/Результаты опроса
- Slackware - 4,5%
- Gentoo - 5,5%
- Fedora - 10%
- Debian - 25%
- Ubuntu - 55%
И с разным оформлением (+css):
- Slackware - 4,5%
- Gentoo - 5,5%
- Fedora - 10%
- Debian - 25%
- Ubuntu - 55%
Выглядит это так (коды второго демо):
Основной html блок списка:
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 в этой заметке.

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