На веб-странице необходимо организовать многоуровневое меню, раскрывающееся при наведении указателя мыши.
При этом все пункты меню должны быть доступными для индексации роботами поисковых систем. И конечно, страница должна соответствовать стандартам W3C.
Решение
Для решения этой задачи используем плагин Superfish, разработанный для библиотеки jQuery (листинг 11.1.1).
Листинг 1 1 .1 .1 . Использование плагина jQuery Superfish
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>example-11-1-1</title> <content> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/superfish.css" /> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/hoverIntent.js"></script> <script type="text/javascript" src="js/superfish.js"></script> <script type="text/javascript"> $(function(){ $("ul.sf-menu").superfish(); }); </script> </head> <body> <ul class="sf-menu"> <li class="current"> <a href="#a">Пункт меню</a> <ul class="A"> <li><a href="#aa">Пункт меню, где написано много</a></li> <li class="current"> <a href="#ab">Пункт меню</a> <ul class="AA"> <li class="current"><a href="#">Пункт меню</a></li> <li><a href="#aba">Пункт меню</a></li> <li><a href="#abb">Пункт меню</a></li> <li><a href="#abc">Пункт меню</a></li> <li><a href="#abd">Пункт меню</a></li> </ul> </li> <li> <a href="#">Пункт меню</a> <ul class="AB"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </li> <li> <a href="#">Пункт меню</a> <ul class="AC"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </li> </ul> </li> <li><a href="#">Пункт меню</a></li> <li> <a href="#">Пункт меню</a> <ul class="B"> <li> <a href="#">Пункт меню</a> <ul class="BA"> <li><a href="#">Мало</a></li> <li><a href="#">Мало</a></li> <li><a href="#">Мало</a></li> <li><a href="#">Мало</a></li> <li><a href="#">Мало</a></li> </ul> </li> <li> <a href="#">Пункт меню</a> <ul class="BB"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </li> <li> <a href="#">Пункт меню</a> <ul class="BC"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </li> <li> <a href="#">Пункт меню</a> <ul class="BD"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </li> <li> <a href="#">Пункт меню</a> <ul class="BE"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </li> </ul> </li> <li><a href="#">Пункт меню</a></li> </ul> </body> </html> |
Обсуждение
Рассмотрим пример, приведенный в листинге 11.1.1, и прежде всего разберемся, какие файлы необходимо указать в разделе head веб-страницы. Сначала подключен css/superfish.css — файл стилевого оформления меню, затем файл библиотеки jQuery js/jquery-1.5.2.min.js, а также файл плагина js/superfish.js.
Файл js/hoverIntent.js подключать необязательно, но если он указан, плагин Superfish определит его присутствие и будет использовать его возможности.
ПРИМЕЧАНИЕ
hoverIntent — плагин, который несколько замедляет вызов событий при наведении указателя мыши на элемент или выходе за его пределы, чтобы предотвратить случайный вызов каких-либо функций.
Теперь обратим свое внимание на HTML-разметку. По ней несложно понять, что многоуровневое меню состоит из вложенных друг в друга ненумерованных списков.
Все, что осталось проделать, — написать буквально одну строку JavaScript-кода: выбрать корневой элемент ul нашего меню по значению sf-menu его атрибута class и связать с ним метод superfish().
Полученный результат можно увидеть на рис. 11.1.
Продолжим знакомство с плагином Superfish и попробуем передать ему некоторые пользовательские настройки, которые он умеет принимать.
Листинг 1 1 .1 .2 . Использование плагина jQuery Superfish
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>example-11-1-2</title> <content> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/superfish.css" /> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/hoverIntent.js"></script> <script type="text/javascript" src="js/superfish.js"></script> <script type="text/javascript"> $(function(){ $("ul.sf-menu").superfish({ animation: { height: "show" }, delay: 1200, onShow: function(){ alert($(this).attr("class")); } }); }); </script> </head> <body> <ul class="sf-menu"> . . . . . . . . . . </ul> </body> </html> |
В листинге 11.1.2 мы опустили практически всю HTML-разметку, поскольку она не изменилась. И подключаемые файлы остались прежними. Изменения коснулись только JavaScript-кода.
Рис. 11.1. Меню Superfish — горизонтальное расположение
Посмотрите, теперь мы не только выбрали необходимый элемент ul и связали с ним метод superfish(), но и передали ему в качестве аргумента объект с некоторыми настройками.
В свойстве animation передаем объект с настройками для анимации, выполняемой при открытии уровней меню. Это свойство может принимать объект с любыми настройками, которые "понимает" метод animate() самой библиотеки jQuery.
В свойстве delay передаем задержку 1,2 с, т. е. вложенные уровни меню будут закрываться с этой задержкой.
Для свойства onShow в качестве значения выступает пользовательская функция, которая вызывается сразу после того, как открыт очередной уровень меню (т. е. сразу по завершении анимации, если она используется). Внутри функции объект $(this) представляет тот элемент ul, пункты списка li которого были открыты. Если вы испытаете пример, находящийся на прилагаемом к книге компакт-диске, то сможете убедиться, что в окне предупреждения действительно выводится значение атрибута class этого элемента.
Остальные опции используются аналогично, а полный их список с описаниями приведен в табл. 11.1.
Таблица 11.1. Опции плагина Superfish
|
Опция |
Описание |
|
hoverClass |
Имя класса, который применяется к пункту меню, когда над ним находится указатель мыши. Значение по умолчанию — sfHover |
|
pathClass |
Имя класса, который применяется к пункту списка, указывающему на текущую страницу |
|
delay |
Задержка закрытия меню после выхода указателя мыши за его пределы. Значение по умолчанию — 800 мс |
|
animation |
Принимает объект с настройками. Идентичен объекту, который может быть передан первым аргументом методу animate() библиотеки jQuery. Значение по умолчанию — {opacity:’show’} |
|
speed |
Время выполнения анимации. Указывается аналогично второму аргументу метода animate() библиотеки jQuery. Значение по умолчанию — ‘normal’ |
|
autoArrows |
Значение по умолчанию — true. Стрелки автоматически генерируются в разметке |
|
dropShadows |
Значение по умолчанию — true. Чтобы группы пунктов подменю не отбрасывали тень, необходимо установить значение false |
|
disableHI |
Значение по умолчанию — false. Установка значения true приведет к тому, что плагин hoverIntent.js (если подключен) не будет обнаруживаться и его возможности не будут использоваться |
|
onInit |
В этой опции может быть определена пользовательская функция, которая будет вызвана при инициализации меню |
|
onBeforeShow |
В этой опции может быть определена пользовательская функция, которая будет вызвана непосредственно перед открытием очередного уровня меню |
Таблица 11.1 (окончание)
|
Опция |
Описание |
|
onShow |
В этой опции может быть определена пользовательская функция, которая будет вызвана сразу после открытия очередного уровня подменю (после завершения анимации, если используется) |
|
onHide |
В этой опции может быть определена пользовательская функция, которая будет вызвана сразу после закрытия очередного уровня подменю (после завершения анимации, если используется) |
До сих пор мы рассматривали возможности плагина на примере горизонтального меню. А если нам понадобится меню вертикальное?
Оставим для примера ту же самую HTML-разметку и посмотрим, как этот вопрос можно решить с помощью плагина Superfish (листинг 11.1.3).
Листинг 1 1 .1 .3 . Использование плагина jQuery Superfish
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>example-11-1-3</title> <content> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/superfish.css" /> <link rel="stylesheet" type="text/css" href="css/superfish-vertical.css" /> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/hoverIntent.js"></script> <script type="text/javascript" src="js/superfish.js"></script> <script type="text/javascript"> $(function(){ $("ul.sf-menu").superfish({ delay: 1200 }); }); </script> </head> <body> <ul class="sf-menu sf-vertical"> . . . . . . . . . . </ul> </body> </html> |
В примере из листинга 11.1.3 мы подключили дополнительный стилевой файл css/superfish-vertical.css — он отвечает за вертикальную ориентацию меню. В HTML-разметке изменения минимальны — корневому элементу ul нашего меню
добавлен дополнительный класс sf-vertical. А в JavaScript-коде вообще никаких изменений не потребовалось!
На рис. 11.2 показано, как будет выглядеть развернутое многоуровневое меню при вертикальном расположении.
Рис. 11.2. Результат использования плагина jQuery Superfish
И наконец, познакомимся с еще одной возможностью плагина — попробуем организовать меню в виде навигационной панели. При этом опять HTML-разметка останется практически без изменений (листинг 11.1.4).
Листинг 1 1 .1 .4 . Использование плагина jQuery Superfish
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>example-11-1-4</title> <content> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/superfish.css" /> <link rel="stylesheet" type="text/css" href="css/superfish-navbar.css" /> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/hoverIntent.js"></script> <script type="text/javascript" src="js/superfish.js"></script> <script type="text/javascript"> $(function(){ $("ul.sf-menu").superfish(); }); </script> </head> <body> <ul class="sf-menu sf-navbar"> . . . . . . . . . . </ul> </body> </html> |
Из примера, приведенного в листинге 11.1.4, ясно, что для создания меню в виде навигационной панели потребовалось только подключить стилевой файл css/superfish-navbar.css и добавить имя класса sf-navbar корневому элементу ul меню. В JavaScript-коде вновь никаких изменений.
Результат можно увидеть на рис. 11.3.
Рис. 11.3. Результат использования плагина jQuery Superfish
Найти оригинальное описание плагина Superfish в Интернете можно по адресу
http://users.tpg.com.au/j_birch/plugins/superfish/.
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- JavaScript-библиотеки (0)
- Фреймворк jQuery (0)
- PHP и jQuery (0)
- Необходимо отыскать абсолютно все элементы веб-страницы. (0)
- Необходимо отыскать все элементы веб-страницы, но только в контексте body, исключив, таким образом, все прочие элементы. (0)
- Необходимо отыскать элемент по известному значению его атрибута id. (0)
- Необходимо отыскать элемент по значению атрибута id, в который входят специфические символы, такие как точка или квадратные скобки. Проблема состоит в том, что эти символы имеют специальное значение в CSS. (0)