Реальный пиарJavaScriptJquery → Как использовать виджет Accordion в качестве меню?

Как использовать виджет Accordion в качестве меню?

что такое плагин

Что такое Accordion наверное все знают, но если кто не знает, тому лучше сначала прочитать статью jQuery UI – виджет Accordion, в ней довольно подробно все рассказано. А сегодняшняя статья написана благодаря довольно многочисленным вопросам и моему обещанию рассказать, как, используя accordion, сделать на его основе меню для сайта. Естественно, что при переходе по ссылке открытая секция аккордеона должна оставаться открытой и активный пункт меню должен быть как-то выделен….

Сразу приведу пример и выложу архив демо, а то меня, не без оснований конечно, обвиняли в отсутствии демо в статьях про jQuery UI. Поскольку ничего особенно сложного в этом решении нет, то я буду краток – только код, пример и минимум необходимых пояснений.

Итак, сначала мы делаем все в точности так же, как написано в статье jQuery UI – виджет Accordion. Т.е. подключаем необходимые файлы к HTML-странице. Здесь же внесем первое дополнение. Для того, чтобы иметь возможность запоминать состояние секций аккордеона, нам потребуется подключить еще один небольшой, но весьма полезный плагин – jQuery Cookie.1 <script src="js/jquery.cookie.js" type="text/javascript"></script>

Поиметь свежую версию этого плагина можно на http://plugins.jquery.com/project/Cookie.

Теперь приведу пример HTML-разметки меню-аккордеона.01 <div id="accordion">
02 <h3><a href="#">Секция 1</a></h3>
03 <ul>
04 <li><a href="?1-1">Пункт меню 1-1</a></li>
05 <li><a href="?1-2">Пункт меню 1-2</a></li>
06 <li><a href="?1-3">Пункт меню 1-3</a></li>
07 </ul>
08 <h3><a href="#">Секция 2</a></h3>
09 <ul>
10 <li><a href="?2-1">Пункт меню 2-1</a></li>
11 <li><a href="?2-2">Пункт меню 2-2</a></li>
12 <li><a href="?2-3">Пункт меню 2-3</a></li>
13 </ul>
14 <h3><a href="#">Секция 3</a></h3>
15 <ul>
16 <li><a href="?3-1">Пункт меню 3-1</a></li>
17 <li><a href="?3-2">Пункт меню 3-2</a></li>
18 <li><a href="?3-3">Пункт меню 3-3</a></li>
19 </ul>
20 <h3><a href="#">Секция 4</a></h3>
21 <ul>
22 <li><a href="?4-1">Пункт меню 4-1</a></li>
23 <li><a href="?4-2">Пункт меню 4-2</a></li>
24 <li><a href="?4-3">Пункт меню 4-3</a></li>
25 </ul>
26 </div>

Ничего загадочного тут и вовсе нет. Что еще? Добавим немного стилей, чтобы выделять активный пункт меню. Например так:1 a.open { color: #f00;}

т.е. в примере просто выделяем текст ссылки в меню красным цветом.

А теперь самое интересное – javascript-код:01 <script type="text/javascript">
02 $(function(){
03 $("#accordion").accordion({
04 navigation: true
05 });
06 $("#accordion li a").click(function(){
07 $.cookie("openItem", $(this).attr("href"));
08 });
09 $("#accordion li a[href$=`" + $.cookie("openItem") +
10 "`]").addClass("open");
11 });
12 </script>

И здесь ничего сложного! Отыскали нужный элемент по идентификатору #accordion, применили к нему возможности плагина. Из опций передали только одну, но в нашем случае необходимую опцию navigation, которой присвоили значение true. Это обеспечит нам открытие нужной секции аккордеона при переходе по ссылке.

На следующем шаге необходимо обрабатывать щелчок мышкой по пункту меню, чтобы поставить соответствующую куку. Что мы и делаем – находим все элементы a внутри li, внутри нашего аккордеона, связываем с ними событие click, по которому будет вызвана функция-обработчик.

Тут нам пригодятся возможности плагина jQuery Cookie. Мы устанавливаем куку с именем openItem, и значением, которое получаем из атрибута href той ссылки, по которой был совершен клик.

И последний шаг – при загрузке страницы мы должны прочитать куку (если она конечно есть) и в соответствии с ее значением «подсветить» нужный пункт меню. Делаем это – ищем нужный пункт меню выбирая элемент a внутри li аккордеона. Но не просто, а значение атрибута href которого соответствует значению, сохраненному в куке.

Знак $ используем потому, что некоторые браузеры возвращают значения атрибута href по разному. Некоторые отдают абсолютный путь, некоторые – относительный. Чтобы исключить эту неоднозначность мы ищем такое значение атрибута href, которое заканчивается одинаково со значением, сохраненным в куке.

Если такая ссылка будет найдена, то с помощью метода addClass мы добавим ей класс open, что заставит ее «покраснеть».


Источник: http://www.linkexchanger.su

Рекомендуем



Официальные плагины jQuery: Templates plugin Следует отметить, что команда Microsoft использовала свои немалые наработки в этих направлениях, как и команда проекта jQuery, и при хорошо сложившемся взаимодействии получились, на мой взгляд, отличные инструменты для разработчиков


Некоторые концепции JavaScript, необходимые для эффективного применения jQuery Можно было подумать, что поскольку функция обратного вызова запустится только лишь спустя 5 секунд после готовности DOM, то во время выполнения функции переменная local окажется неопределенной, ведь код в котором определяется local выходит из области видимости, как только обработчик события готовности DOM заканчивает свою работу


Что такое Web Storage? Статьи про эту технологию конечно уже существуют, но я, следуя духу блога, попробую объяснить, что такое Web Storage, очень простым языком, с примерами и подробными комментариями к ним