Хаки и Скрипты Next Generation CMS

Вертикальное ,выпадающее меню на jquery

irbees2008 irbees2008 Опубликовано - 20 - апреля Меню и навигация
5924 - 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

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

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [6]
  • Гости: [5]
  • Поисковики: [1] Яндекс
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 0.411сек
  • Потребление памяти: 4.950 Mb 
  •   яндекс.ћетрика