Четверг, 05 Июля 2012 13:27

Добавление элемента на страницу при помощи jQuery

Written by 
Оцени эту запись
(10 Голоса)

Иногда для реализации какой-то динамики на странице, необходимо добавить какой-то блок. Например, для фотогалереи в лайтбоксе мы можем добавлять фон страницы, который ее перекрывает, контейнер для отображения фото и т.д. Случаи бывают разные. Я расскажу в этой статье и таких способах добавления новых элементов, как append, prepent и wrap.

 

 

 

При помощи .append мы можем внутрь элемента вставить новый элемент. Причем, новый будет идти после всех существующих элементов. 

 

При использовании prepend новый элемент также будет добавляться внутрь заданного, только перед всем его содержимым. 

 

Используя wrap, мы можем обернуть заданный элемент новым блоком. То есть, в результате заданный элемент будет находиться внутри нового.

 

Синтаксис:

 

$('body').append('<div class="footer">Copyright</div>');

 

$('body').prepend('<div class="page_bg"></div>');

 

$('.container').wrap('<div class="wrapper"></div>');

 

Примеры:

 

 

a.append('<div class="parts_holder"></div>');
var count;
for(k=1;k<=count;k++){
a.children('.parts_holder').append('<div class="part'+k+'"></div>');
}
 
 
Здесь в нужный элемент вставляется блок с классом parts_holder, а в него внутрь в цикле вставляются блоки с классами "part'+k+'", где k - счетчик цикла. Поскольку используется append, эти блоки вставляются друг за другом. Получаем:
 
 

<div class="parts_holder">

<div class="part1"></div>

<div class="part2"></div>

<div class="part3"></div>

<div class="part4"></div>

<div class="part5"></div>

</div>
 

Если мы здесь использовали бы prepend, то получили бы:

 

 

<div class="parts_holder">

<div class="part5"></div>

<div class="part4"></div>

<div class="part3"></div>

<div class="part2"></div>

<div class="part1"></div>

</div>

 

Пример использования append в слайдере картинов можно посмотреть здесь.

 

Второй пример используется для стилизации скроллбара. В нем применяются все три варианта добавления элементов на страницу:

 

 

<script>
function nice_scroll(a){
a.wrap('<div class="scroll_cont"></div>');
a.wrapInner('<div class="text_inner"></div>');
a.parent('.scroll_cont').prepend('<div class="scrollbar_cont"><div class="scroll_pane"><div class="scroll_line"></div></div></div>');
a.parent('.scroll_cont').append('<div class="scrollbar_cont_bg"></div>');
a.parent('.scroll_cont').css('position','relative');
a.parent('.scroll_cont').width(a.width()).height(a.height());
a.parent('.scroll_cont').css('overflow','hidden');
a.css('overflow-x','hidden').css('overflow-y','scroll');
a.css('padding-right','20px');
a.parent('.scroll_cont').children().children('.scroll_pane').height(a.parent('.scroll_cont').height());
var b = a.children('.text_inner').height();
a.parent('.scroll_cont').children().children('.scroll_pane').children('.scroll_line').height(a.height()/b*100+'%');
a.scroll(function(){
var p = $(this).scrollTop()/b*100;
a.parent('.scroll_cont').children().children('.scroll_pane').children('.scroll_line').animate({top: p+'%'},100);
});
}
</script>
 
Подробнее об этом в статье Стилизация скроллбара своими руками
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов