Как создать свой сайтjQuery - полезные навыки → Виджет Accordion - раскрывающиеся панели

jQuery - Виджет Accordion - раскрывающиеся панели

Виджет - это специальным образом оформленный модуль вывода информации.

Виджет jQuery UI - Accordion помогает отображать или скрывать информацию, расположенную в нескольких панелях. Именно поэтому, этот виджет часто используют для организации меню на сайте (хотя с точки зрения оптимизации сайта это не очень хорошо). А вот использовать этот виджет для других целей порой очень удобно. Например, для организации вот такого справочника (пощелкайте по панелям):

Справочник тегов HTML

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Тег <br> - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.
Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен.
<cite></cite>
<dfn></dfn>
<em></em>
<i></i>
<strong></strong>
<b></b>
<ins></ins>
<u></u>
<kbd></kbd>
<samp></samp>
<tt></tt>
Теги <sub></sub> выводят текст ниже уровня строки шрифтом меньшего размера.
Теги <sup></sup> выводят текст выше уровня строки шрифтом меньшего размера.
Обратите внимание, одновременно панели не открываются. Мы видим содержимое только той панели, по которой щелкнули, остальные сворачиваются.

Для реализации такого справочника, необходимо учитывать требования, выдвигаемые виджетом к html-разметке. Дело в том, что виджет считает панелью то, что содержится в тегах <a></a>, а содержимым панели - все, что находится в тегах <div></div> после ссылки. Иными словами структура html-разметки должна быть следующей:
<div class="accordion"> <a href="#">Панель 1</a> <div>Содержимое панели 1</div> <a href="#">Панель 2</a> <div>Содержимое панели 2</div> <a href="#">Панель 3</a> <div>Содержимое панели 3</div> ... </div>
Сами ссылки в панелях можно обрамлять другими тегами. Так, для нашего примера, html-код будет следующим:
<html> <head> <title>jQuery виджет accordion</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <h3>Справочник тегов HTML</h3> <div id="les15_accordion"> <p class="menu_accordion"><a href="#">Теги, делающие текст заголовками</a></p> <div class="accordion"> <i class="teg">&lt;h1&gt;&lt;/h1&gt;</i><br> <i class="teg">&lt;h2&gt;&lt;/h2&gt;</i><br> <i class="teg">&lt;h3&gt;&lt;/h3&gt;</i><br> <i class="teg">&lt;h4&gt;&lt;/h4&gt;</i><br> <i class="teg">&lt;h5&gt;&lt;/h5&gt;</i><br> <i class="teg">&lt;h6&gt;&lt;/h6&gt;</i><br> </div> <p class="menu_accordion"><a href="#">Теги разделения на абзацы и переноса строки</a></p> <div class="accordion"> Тег <i class="teg">&lt;br&gt;</i> - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.<br> Теги <i class="teg">&lt;p&gt;&lt;/p&gt;</i> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <i class="teg">&lt;p&gt;</i>, закрывающий тег не обязателен. </div> <p class="menu_accordion"><a href="#">Теги, выделяющие текст курсивом</a></p> <div class="accordion"> <i class="teg">&lt;cite&gt;&lt;/cite&gt;</i><br> <i class="teg">&lt;dfn&gt;&lt;/dfn&gt;</i><br> <i class="teg">&lt;em&gt;&lt;/em&gt;</i><br> <i class="teg">&lt;i&gt;&lt;/i&gt;</i><br> </div> <p class="menu_accordion"><a href="#">Теги, выделяющие текст полужирным шрифтом</a></p> <div class="accordion"> <i class="teg">&lt;strong&gt;&lt;/strong&gt;</i><br> <i class="teg">&lt;b&gt;&lt;/b&gt;</i><br> </div> <p class="menu_accordion"><a href="#">Теги, выделяющие текст подчеркиванием</a></p> <div class="accordion"> <i class="teg">&lt;ins&gt;&lt;/ins&gt;</i><br> <i class="teg">&lt;u&gt;&lt;/u&gt;</i><br> </div> <p class="menu_accordion"><a href="#">Теги, выводящие текст моноширинным шрифтом</a></p> <div class="accordion"> <i class="teg">&lt;kbd&gt;&lt;/kbd&gt;</i><br> <i class="teg">&lt;samp&gt;&lt;/samp&gt;</i><br> <i class="teg">&lt;tt&gt;&lt;/tt&gt;</i><br> </div> <p class="menu_accordion"><a href="#">Теги, выводящие текст в верхнем и нижнем индексах</a></p> <div class="accordion"> Теги <i class="teg">&lt;sub&gt;&lt;/sub&gt;</i> выводят текст ниже уровня строки шрифтом меньшего размера.<br> Теги <i class="teg">&lt;sup&gt;&lt;/sup&gt;</i> выводят текст выше уровня строки шрифтом меньшего размера.<br> </div> </div> </body> </html>


Оформим стили на странице style.css:
#les15_accordion{ width:400px; background:#d8d9db; border:1px solid #96a8be; padding:5px; } p.menu_accordion{ height:20px; width:380px; margin:1px; padding:5px; background:#d8d9db; border:1px solid #96a8be; } p.menu_accordion a{ text-decoration:none; font-weight:bold; } div.accordion{ padding-left:20px; }
А на странице script.js укажем:
$(document).ready(init); function init(){ $(function(){ $("#les15_accordion").accordion(); }); };
Все, наш пример работает. Справочник можно немного доработать, используя параметры виджета Accordion:
  • active - определяет, какая панель при инициализации будет открыта, по умолчанию - первая.

    Пример:
    $(function(){ $("#les15_accordion").accordion({ active: 2 }); });
    Теперь при инициализации будет раскрыта вторая панель.


  • animated - здесь можно отключить анимацию, установленную по умолчанию (slide).

    Пример:
    $(function(){ $("#les15_accordion").accordion({ animated: false }); });


  • autoHeight - устанавливает высоту содержимого панели. По умолчанию высоты у всех панелей одинаковы и равны высоте панели с максимальным содержимым. Значение false этого параметра сделает высоты всех панелей разными, по их содержимому.

    Пример:
    $(function(){ $("#les15_accordion").accordion({ autoHeight: false }); });


  • clearStyle - полезно для работы с динамическим содержанием, т.к. очищает css-свойства height и overflow каждый раз после окончания анимации. По умолчанию этот параметр выключен (false). Кстати, вместе с опцией autoHeight этот параметр не работает.

    Пример:
    $(function(){ $("#les15_accordion").accordion({ clearStyle: true }); });


  • collapsible - определяет, могут ли все панели закрываться одновременно, а так же позволяет свёртывать активную панель с помощью щелчка по ней.

    Пример:
    $(function(){ $("#les15_accordion").accordion({ collapsible: true }); });


  • event - определяет событие, по которому будет происходить свертывание и развертывание панелей. По умолчанию это щелчок (click), но можно выбрать и другое.

    Пример:
    $(function(){ $("#les15_accordion").accordion({ event: 'mouseover' }); });


  • fillSpace - определяет высоту открытой секции (игнорируя параметр autoheight). По умолчанию - false. При установке значения true открытая панель будет занимать всю высоту, определяемую родительским элементом.

    Пример:
    $(function(){ $("#les15_accordion").accordion({ fillSpace: true }); });


  • header - определяет заголовок панели. По умолчанию это содержимое тегов <a></a>, но по желанию можно определить его и явно.

    Пример:
    $(function(){ $("#les15_accordion").accordion({ header: 'p' }); });


  • navigation - при перезагрузке страницы позволяет сохранить состояние. Для этого разыскивает и активирует ссылку (по умолчанию используется значение false).

    Пример:
    $(function(){ $("#les15_accordion").accordion({ navigation: true }); });


  • navigationFilter - здесь можно определить функцию, которая будет обрабатывать ссылку, по которой осуществляется переход. Используется совместно с опцией navigation для построения меню.

    Пример:
    $(function(){ $("#les15_accordion").accordion({ navigationFilter: function(){ ... } }); });


Следующие два параметра связаны с событиями:
  • changestart - событие наступает с началом смены панелей.

  • change - событие наступает каждый раз при смене активной панели (по завершению анимации).

При использовании этих параметров мы можем определить функцию, которая принимает два аргумента – event (объект события) и ui (специальный объект, содержащий информацию о заголовках и содержании панелей).

Свойства этих аргументов:
- ui.newHeader - заголовок активной панели,
- ui.oldHeader - заголовок предыдущей панели,
- ui.newContent - содержимое активной панели,
- ui.oldContent - содержание предыдущей панели.

Давайте настроим наш справочник, используя некоторые параметры, например, вот так:
$(document).ready(init); function init(){ $(function(){ $("#les15_accordion").accordion({ collapsible: true, autoHeight: false, header: 'p' }); }); };

Справочник тегов HTML

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Тег <br> - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.
Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен.
<cite></cite>
<dfn></dfn>
<em></em>
<i></i>
<strong></strong>
<b></b>
<ins></ins>
<u></u>
<kbd></kbd>
<samp></samp>
<tt></tt>
Теги <sub></sub> выводят текст ниже уровня строки шрифтом меньшего размера.
Теги <sup></sup> выводят текст выше уровня строки шрифтом меньшего размера.
Теперь один щелчок открывает панель, повторный щелчок закрывает ее. Высота панели определяется по ее содержимому, что выглядит гораздо лучше.

Так же, как и у плагинов jQuery UI, у виджета accordion есть методы, которые позволяют менять его работу после инициализации: destroy, disable, enable, option и activate. С первыми четырьмя мы уже знакомы (по уроку 10), метод activate позволяет программно активировать необходимые секции.

Пример:
$("#les15_accordion").accordion("activate", 0); // где 0 - номер секции (отсчет ведется с 0).


22.05.2010
www.site-do.ru




ГлавнаяjQuery - полезные навыки → Виджет Accordion - раскрывающиеся панели

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