Виджет jQuery UI - Accordion помогает отображать или скрывать информацию, расположенную в нескольких панелях. Именно поэтому, этот виджет часто используют для организации меню на сайте (хотя с точки зрения оптимизации сайта это не очень хорошо). А вот использовать этот виджет для других целей порой очень удобно. Например, для организации вот такого справочника (пощелкайте по панелям):
Обратите внимание, одновременно панели не открываются. Мы видим содержимое только той панели, по которой щелкнули, остальные
сворачиваются.
Для реализации такого справочника, необходимо учитывать требования, выдвигаемые виджетом к 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"><h1></h1></i><br>
<i class="teg"><h2></h2></i><br>
<i class="teg"><h3></h3></i><br>
<i class="teg"><h4></h4></i><br>
<i class="teg"><h5></h5></i><br>
<i class="teg"><h6></h6></i><br>
</div>
<p class="menu_accordion"><a href="#">Теги разделения на абзацы и переноса строки</a></p>
<div class="accordion">
Тег <i class="teg"><br></i> - тег принудительного перевода строки.
Текст, после этого тега начинается с новой строки.<br>
Теги <i class="teg"><p></p></i> разделяют текст на абзацы.
Перед началом каждого абзаца следует поместить тег
<i class="teg"><p></i>, закрывающий тег не обязателен.
</div>
<p class="menu_accordion"><a href="#">Теги, выделяющие текст курсивом</a></p>
<div class="accordion">
<i class="teg"><cite></cite></i><br>
<i class="teg"><dfn></dfn></i><br>
<i class="teg"><em></em></i><br>
<i class="teg"><i></i></i><br>
</div>
<p class="menu_accordion"><a href="#">Теги, выделяющие текст полужирным шрифтом</a></p>
<div class="accordion">
<i class="teg"><strong></strong></i><br>
<i class="teg"><b></b></i><br>
</div>
<p class="menu_accordion"><a href="#">Теги, выделяющие текст подчеркиванием</a></p>
<div class="accordion">
<i class="teg"><ins></ins></i><br>
<i class="teg"><u></u></i><br>
</div>
<p class="menu_accordion"><a href="#">Теги, выводящие текст моноширинным шрифтом</a></p>
<div class="accordion">
<i class="teg"><kbd></kbd></i><br>
<i class="teg"><samp></samp></i><br>
<i class="teg"><tt></tt></i><br>
</div>
<p class="menu_accordion"><a href="#">Теги, выводящие текст в верхнем и нижнем индексах</a></p>
<div class="accordion">
Теги <i class="teg"><sub></sub></i> выводят текст ниже уровня строки
шрифтом меньшего размера.<br>
Теги <i class="teg"><sup></sup></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:
Свойства этих аргументов:
- ui.newHeader - заголовок активной панели,
- ui.oldHeader - заголовок предыдущей панели,
- ui.newContent - содержимое активной панели,
- ui.oldContent - содержание предыдущей панели.
Давайте настроим наш справочник, используя некоторые параметры, например, вот так:
$(document).ready(init);
function init(){
$(function(){
$("#les15_accordion").accordion({
collapsible: true,
autoHeight: false,
header: 'p'
});
});
};
Теперь один щелчок открывает панель, повторный щелчок закрывает ее. Высота панели определяется по ее содержимому, что
выглядит гораздо лучше.
Так же, как и у плагинов jQuery UI, у виджета accordion есть методы, которые позволяют менять его работу после инициализации: destroy, disable, enable, option и activate. С первыми четырьмя мы уже знакомы (по уроку 10), метод activate позволяет программно активировать необходимые секции.
Пример:
$("#les15_accordion").accordion("activate", 0);
// где 0 - номер секции (отсчет ведется с 0).
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как создать свой сайт → jQuery - полезные навыки → Виджет Accordion - раскрывающиеся панели
jQuery - Виджет Accordion - раскрывающиеся панели
Виджет - это специальным образом оформленный модуль вывода информации.Виджет jQuery UI - Accordion помогает отображать или скрывать информацию, расположенную в нескольких панелях. Именно поэтому, этот виджет часто используют для организации меню на сайте (хотя с точки зрения оптимизации сайта это не очень хорошо). А вот использовать этот виджет для других целей порой очень удобно. Например, для организации вот такого справочника (пощелкайте по панелям):
Справочник тегов HTML
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Тег <br> - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.
Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен.
Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен.
<cite></cite>
<dfn></dfn>
<em></em>
<i></i>
<dfn></dfn>
<em></em>
<i></i>
<strong></strong>
<b></b>
<b></b>
<ins></ins>
<u></u>
<u></u>
<kbd></kbd>
<samp></samp>
<tt></tt>
<samp></samp>
<tt></tt>
Теги <sub></sub> выводят текст ниже уровня строки шрифтом меньшего размера.
Теги <sup></sup> выводят текст выше уровня строки шрифтом меньшего размера.
Теги <sup></sup> выводят текст выше уровня строки шрифтом меньшего размера.
Для реализации такого справочника, необходимо учитывать требования, выдвигаемые виджетом к html-разметке. Дело в том, что виджет считает панелью то, что содержится в тегах <a></a>, а содержимым панели - все, что находится в тегах <div></div> после ссылки. Иными словами структура html-разметки должна быть следующей:
Оформим стили на странице style.css:
- 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 - событие наступает каждый раз при смене активной панели (по завершению анимации).
Свойства этих аргументов:
- ui.newHeader - заголовок активной панели,
- ui.oldHeader - заголовок предыдущей панели,
- ui.newContent - содержимое активной панели,
- ui.oldContent - содержание предыдущей панели.
Давайте настроим наш справочник, используя некоторые параметры, например, вот так:
Справочник тегов HTML
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Тег <br> - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.
Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен.
Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен.
<cite></cite>
<dfn></dfn>
<em></em>
<i></i>
<dfn></dfn>
<em></em>
<i></i>
<strong></strong>
<b></b>
<b></b>
<ins></ins>
<u></u>
<u></u>
<kbd></kbd>
<samp></samp>
<tt></tt>
<samp></samp>
<tt></tt>
Теги <sub></sub> выводят текст ниже уровня строки шрифтом меньшего размера.
Теги <sup></sup> выводят текст выше уровня строки шрифтом меньшего размера.
Теги <sup></sup> выводят текст выше уровня строки шрифтом меньшего размера.
Так же, как и у плагинов jQuery UI, у виджета accordion есть методы, которые позволяют менять его работу после инициализации: destroy, disable, enable, option и activate. С первыми четырьмя мы уже знакомы (по уроку 10), метод activate позволяет программно активировать необходимые секции.
Пример:
22.05.2010
www.site-do.ru
www.site-do.ru
Главная → jQuery - полезные навыки → Виджет Accordion - раскрывающиеся панели
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
|
Код кнопки: |
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
|
|