Плагин на JQuery «desart.accordion»

jquery.desart.accordion-1.0
В ходе работы мне понадобилось написать скрипт «аккордеона», который сворачивал и разворачивал блоки. И при изученнии всевозможных возможностей JQuery я решил написать удобный плагин.

И сразу к установке :
1) прикрепляем JQuery библиотеку и сам плагин. Например:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
<script src="jquery.desart.accordion-1.0.js" type="text/javascript">

все конечно знают, но я на всякий случай напомню, что прикреплять нужно между тегами и

2) туда же, в «голову», вставляем вызов функции и её настройки(в примере показаны настройки «по умолчанию»)

<script type="text/javascript">
$(document).ready(function(){
$('.container').accordion_desart({
accordionContainer: ".accordion",
accordionTitle: ".acc-title",
accordionHidden: ".acc-hidden",
accordionVisible: ".acc-visible",
hideOther: "yes",
hideClicking: "yes"
});
});
</script>

3) И собственно html-код. Плагин построен так, что он срабатывает по нажатию на тег с классом «acc-title» и действует на тег идущий за ним с классом «acc-hidden»

Все довольно просто и гибко. Я старался разработать плагин наиболее удобный в использовании.

А теперь к параметрам:
1) $('.container').accordion_desart -вызов плагина и применение его к блоку с классом «.container»
2) accordionContainer: ".accordion" сам аккордеон
3) accordionTitle: ".acc-title" класс заголовка блока
4) accordionHidden: ".acc-hidden" скрываемый/показываемый блок
5) accordionVisible: ".acc-visible" класс блока, который нужно отображать по умолчанию
6) hideOther: "yes" скрывать открытые блоки при открытии нового
7) hideClicking: "yes" повторное скрытие блока при повторном нажатии

Ну вообщем то и все, выкладываю исходники и демо, в демо показаны все варианты настройки плагина.
В следующей версии добавлю выбор эффектов анимации.

Source
Demo

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*


× 5 = двадцать пять

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Получать новые комментарии по электронной почте.