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

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

Итак, сначала мы делаем все в точности так же, как написано в статье jQuery UI – виджет Accordion. Т.е. подключаем необходимые файлы к HTML-странице. Здесь же внесем первое дополнение. Для того, чтобы иметь возможность запоминать состояние секций аккордеона, нам потребуется подключить еще один небольшой, но весьма полезный плагин – jQuery Cookie.

<script src="js/jquery.cookie.js" type="text/javascript"></script>

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

Теперь приведу пример HTML-разметки меню-аккордеона.

<div id="accordion">
  <h3><a href="#">Секция 1</a></h3>
  <ul>
    <li><a href="?1-1">Пункт меню 1-1</a></li>
    <li><a href="?1-2">Пункт меню 1-2</a></li>
    <li><a href="?1-3">Пункт меню 1-3</a></li>
  </ul>
  <h3><a href="#">Секция 2</a></h3>
  <ul>
    <li><a href="?2-1">Пункт меню 2-1</a></li>
    <li><a href="?2-2">Пункт меню 2-2</a></li>
    <li><a href="?2-3">Пункт меню 2-3</a></li>
  </ul>
  <h3><a href="#">Секция 3</a></h3>
  <ul>
    <li><a href="?3-1">Пункт меню 3-1</a></li>
    <li><a href="?3-2">Пункт меню 3-2</a></li>
    <li><a href="?3-3">Пункт меню 3-3</a></li>
  </ul>
  <h3><a href="#">Секция 4</a></h3>
  <ul>
    <li><a href="?4-1">Пункт меню 4-1</a></li>
    <li><a href="?4-2">Пункт меню 4-2</a></li>
    <li><a href="?4-3">Пункт меню 4-3</a></li>
  </ul>
</div>

Ничего загадочного тут и вовсе нет. Что еще? Добавим немного стилей, чтобы выделять активный пункт меню. Например так:

a.open { color: #f00;}

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

А теперь самое интересное – javascript-код:

<script type="text/javascript">
$(function(){
  $("#accordion").accordion({
    navigation: true
  });
  $("#accordion li a").click(function(){
    $.cookie("openItem", $(this).attr("href"));
  });
  $("#accordion li a[href$=`" + $.cookie("openItem") +
  "`]").addClass("open");
});
</script>

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

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

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

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

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

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

Собственно это все, больше тут рассказывать не о чем…

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru