• 4809
  • 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» класс в заголовок раздела
Код:
<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

Можешь почитать и вот эту статейку "Полезная программка TortoiseSVN"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element