Поиск по этому блогу

суббота, 1 сентября 2012 г.

Спойлер для сайта. jQuery.

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

Из названия темы нас понятно, что использоваться будет jQuery. Поэтому подключаем его.
<script type="text/javascript" src="/js/jquery.js"></script>
Далее нужен будет файл со стилями, который называется spoiler.css(прикреплён в аттаче).
<link rel="stylesheet" type="text/css" href="style/css/spoiler.css" />
С внешними скриптами закончили, теперь на нужную страничку вносим js код:
<script type="text/javascript">
function initSpoilers(context)
{    var context = context || 'body';
    $('div.spoiler-head', $(context))
        .click(function(){
            $(this).toggleClass('unfolded');
            $(this).next('div.spoiler-body').slideToggle('fast');
        });
}
$(document).ready(function(){ initSpoilers('body'); });
</script>
А сам код спойлера будем добавлять вот так:
<div class="spoiler-wrap">
    <div class="spoiler-head folded clickable">Заголовок спойлера</div>
       <div class="spoiler-body">Текст, помещённый в спойлер</div>
  </div>
Пример можно посмотреть тут.

1 комментарий:

  1. как зделать штоб спойлер был открит сразу ?

    ОтветитьУдалить

Количество·просмотров