6697
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: нужны навыки css hmlt
- Демо:
Вертикальное ,выпадающее меню на jquery
Легкий и гибкий JQuery плагин, который позволяет свернуть содержимое меню.
JQuery Collapse требует JQuery 1.7 или более новый.
1.Загрузите JQuery и JQuery плагин Collapse :Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2.подключить скрипты в head
Код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="{tpl_url}/js/jquery.collapse.js"></script>
3.Вот пример HTML разметки меню:
Код:
<div id="demo" data-collapse>
<h2>Fruits</h2>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
<h2>Info</h2>
<div>
<p>You can use any container you like (in this case a div element)</p>
</div>
</div>
Вот и все!атрибут* data-collapse* автоматически вызовет сценарий.
еще немного о скрипте
Раскрыть
Открыть / свернуть раздел по умолчанию
Стандартное поведение является объединить все разделы при загрузке страницы.
Если вы хотите, показать раздел пользователю при загрузке страницы, вы можете
сдать этого путем добавления «open» класс в заголовок раздела
## использование JavaScript
Если вы не хотите использовать атрибут 'data-collapse"в HTML, а загрузить плагин JQuery, вы можете сделать так
js
Если вы не хотите использовать JQuery ($) оболочке, Вы также можете получить доступ *vanilla* JavaScript:
js
### Использование пользовательской разметкой
По умолчанию плагин будет искать группы из двух элементов.
В реальной lifeв "ў разметки может меняться, и вам нужно настроить, как
Плагин интерпретирует его. например
Для того, чтобы понять, плагин выше разметки, мы можем передать 'запрос'
опцию указания, где найти заголовок / Резюме элемент раздела:
js
## Accordion
Для активации набора поведения "аккордеон" в качестве значения атрибута ' data-collapse ":
## Сохранение
По умолчанию, если пользователь перезагрузит страницу все разделы будут закрыты.
Если вы хотите чтобы раздел оставался открытым вы можете добавить "persist" на data-collapse атрибутов:
И включают в себя модуль хранения в документе *storage * другие
скрипты.
Пожалуйста, обратите внимание: целевому элемент необходим идентификатор для того, чтобы работать.
Вы можете комбинировать варианты, добавляя
оба значения данного атрибута коллапса:
### Internet Explorer =< 7 Support
For IE 6-7 you'll need to include the cookie storage and JSON2 libraries
for the cookie storage support to work properly:
## API документация
Варианты которыми можно управлять .
Options
Вы можете передать следующие параметры при инициализации.
Пример использования опции:
js
```
Привязка событий
Можно выполнить привязку собственной функции обратного вызова для открытия и закрытия события.
js
API метод
Если вы используете vanilla JavaScript для создания экземпляра плагина, вы получите
доступ к *open* и *close* метод.
js
Стандартное поведение является объединить все разделы при загрузке страницы.
Если вы хотите, показать раздел пользователю при загрузке страницы, вы можете
сдать этого путем добавления «open» класс в заголовок раздела
Код:
<div id="demo" data-collapse>
<h2 class="open">I'm open by default</h2>
<p>Yay</p>
</div>
## использование JavaScript
Если вы не хотите использовать атрибут 'data-collapse"в HTML, а загрузить плагин JQuery, вы можете сделать так
js
Код:
$("#demo").collapse({
// options...
});Если вы не хотите использовать JQuery ($) оболочке, Вы также можете получить доступ *vanilla* JavaScript:
js
Код:
new jQueryCollapse($("#demo"), {
// options...
});### Использование пользовательской разметкой
По умолчанию плагин будет искать группы из двух элементов.
В реальной lifeв "ў разметки может меняться, и вам нужно настроить, как
Плагин интерпретирует его. например
Код:
<div id="demo">
<div>
<h2>Summary</h2>
<div>details...</div>
</div>
<div>
<h2>Summary</h2>
<div>details...</div>
</div>
</div>
Для того, чтобы понять, плагин выше разметки, мы можем передать 'запрос'
опцию указания, где найти заголовок / Резюме элемент раздела:
js
Код:
new jQueryCollapse($("#demo"), {
query: 'div h2'
});## Accordion
Для активации набора поведения "аккордеон" в качестве значения атрибута ' data-collapse ":
Код:
<div id="demo" data-collapse="accordion">
...
</div>
## Сохранение
По умолчанию, если пользователь перезагрузит страницу все разделы будут закрыты.
Если вы хотите чтобы раздел оставался открытым вы можете добавить "persist" на data-collapse атрибутов:
Код:
<div id="demo" data-collapse="persist">
...
</div>
И включают в себя модуль хранения в документе *storage * другие
скрипты.
Код:
<script src="jquery.collapse_storage.js"></script>
Пожалуйста, обратите внимание: целевому элемент необходим идентификатор для того, чтобы работать.
Вы можете комбинировать варианты, добавляя
оба значения данного атрибута коллапса:
Код:
<div id="demo" data-collapse="accordion persist">
...
</div>
### Internet Explorer =< 7 Support
For IE 6-7 you'll need to include the cookie storage and JSON2 libraries
for the cookie storage support to work properly:
Код:
<!--[if lt IE 8]>
<script src="jquery.collapse_cookie_storage.js"></script>
<script src="json2.js"></script>
<![endif]-->
## API документация
Варианты которыми можно управлять .
Options
Вы можете передать следующие параметры при инициализации.
Код:
* **open** (function) : Custom function for opening section (default: function(){ this.show() })
* **close** (function) : Custom function for collapsing section (default: function(){ this.hide() })
* **accordion** (bool) : Enable accordion behaviour by setting this option to 'true'
* **persist** (bool) : Enable persistence between page loads by setting this option to 'true'Пример использования опции:
js
Код:
// Initializing collapse plugin
// with custom open/close methods,
// persistence plugin and accordion behaviour
$("#demo").collapse({
open: function() {
// The context of 'this' is applied to
// the collapsed details in a jQuery wrapper
this.slideDown(100);
},
close: function() {
this.slideUp(100);
},
accordion: true,
persist: true
});
Привязка событий
Можно выполнить привязку собственной функции обратного вызова для открытия и закрытия события.
js
Код:
$("#demo").collapse(); // Initializing plugin
$("#demo").bind("open", function(e, section) {
console.log(section, " is open");
});
$("#demo").bind("close", function(e, section) {
console.log(section, " is closed");
});API метод
Если вы используете vanilla JavaScript для создания экземпляра плагина, вы получите
доступ к *open* и *close* метод.
js
Код:
var demo = new jQueryCollapse($("#demo")); // Initializing plugin
demo.open(); // Open all sections
demo.close(); // Close all sections
demo.open(0); // Open first section
demo.open(1); // Open second section
demo.close(0); // Close first sectionМожешь почитать и вот эту статейку "Полно экранное слайдшоу"
Это тоже интересно
05.02.13Выпадающее меню на CSS
16.04.13Выпадающее меню на CSS
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.