Оформление нумерованных списков с помощью jQuery

Иногда возникает необходимость оригинально сверстать нумерованный список ol в соответствии с задумкой дизайнера. Обойтись одними возможностями html+css, сохранив при этом простую структуру списка ol, не получится. Однако эта задача элементарно решается с помощью простого скрипта на jQuery.

Мне вот недавно достался макет сайта с таким списком. Рассмотрим самый простой пример.

Принцип работы скрипта

Весь скрипт умещается всего в несколько строчек кода:

1
2
3
4
5
6
$(document).ready(function(){
$(«#number li»).each(function (i) {
i = i+1;
$(this).addClass(«item»+i);
});
});

С помощью метода each(); и переменной i создается цикл, внутри которого к каждому li элементу списка добавляется класс item1, item2, item3 и т.д.

Сам же html-код имеет самую обычную структуру:

1
2
3
4
5
<ol id=»number»>
<li>первая строка</li>
<li>вторая строка</li>
<li>третья строка</li>
</ol>

Стили

Для каждого класса item задаем фоновым изображением дизайнерски оформленные номера списка:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#number {
margin: 10px 0 40px;
padding: 0;
}#number li {
padding: 3px 0 6px 30px;
margin: 0 0 10px;
list-style: none;
}#number li.item1 {
background: url(img/li-1.png) no-repeat 0 0;
}#number li.item2 {
background: url(img/li-2.png) no-repeat 0 0;
}

#number li.item3 {
background: url(img/li-3.png) no-repeat 0 0;
}

Источники

Конечно, использование графических элементов для задания нумерации — не самое оптимальное решение. Однако в случаях, когда длина списков относительно небольная, вполне можно использовать и этот способ.

Первоисточник — Web Designer Wall. Здесь же можно скачать архив с другими демо-примерами.