Открыть меню    

jQuery упорядоченный список. Оформляем и реализуем счетчик

Кодировать последовательные элементы весьма утомительно, не правда ли? Однако существует простой решение. В этой статье будет показано, как при помощи jquery добавить элементам списка соответствующие классы так, чтобы создать основанный на изображениях упорядоченный список. Во втором примере вы увидите, как можно при помощи метода prepend добавить счетчик для комментариев.

1a. Вставляем jquery код

Во-первых, скачайте последнюю версию jquery. Затем в тег head вставьте следующий код.

JQuery

// подключаем jQuery
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
//i - индекс текущего элемента в наборе Query (начиная с 0) 
  $("#step li").each(function (i) {
    i = i+1;
    $(this).addClass("item"+i);
   });

});
</script>

На выходе jQuery преобразует список следующим образом:

преобразуем список при помощи jQuery

1b. CSS код

Индивидуальный стиль каждого элемента списка определяется при помощи фонового изображения (step1.png, step2.png, step3.png, и т.д ).

CSS

#step .item1 {
  background: url(step1.png) no-repeat;
}
#step .item2 {
  background: url(step2.png) no-repeat;
}
#step .item3 {
  background: url(step3.png) no-repeat;
}
преобразуем список при помощи jQuery и css

2a. Упорядоченный контент

Данную технику можно использовать одновременно с методом prepend. Метод prepend позволяет добавить HTML-код внутрь выбранного элемента, но перед кодом, который уже есть. Следующий пример показывает, как можно добавить счетчик для списка с комментариями.

JQuery

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  
  $("#commentlist li").each(function (i) {
    i = i+1;
    $(this).prepend('<span class="commentnumber"> #'+i+'</span>');
   });

});
</script>

На выходе в каждый тег li будет добавлен тег span с соответствующим номером.

преобразуем блок комментариев при помощи jQuery

2b.CSS

Элемент li следует позиционировать относительно (position:relative), тег span – абсолютно (position:absolute) (верхний правый уол).

CSS

#commentlist li {
  position: relative;
}

#commentlist .commentnumber {
  position: absolute;
  right: 0;
  top: 8px;
}
преобразуем блок комментариев при помощи jQuery и css

источник

Комментарии к статье

Добавить комментарий