jQuery для верстальщика (часть 2): вкусные меню

Это вторая статья о jQuery, которая будет интересна, прежде всего, начинающим пользователям этой библиотеки. В этой статье, с практической точки зрения, речь пойдет о подсветке текущего элемента меню на стороне клиента. А прочитав статью, вы поймете, как делать более сложные выборки и цепочки запросов.

Задача №2: вертикальное меню

Меню – фундаментальный элемент пользовательского интерфейса, как GUI, так и веб-приложений. На нескольких небольших примерах мы посмотрим, как с помощью jQuery создать элемент навигации. К тому же изучим обещанные возможности функции $(…) по работе со свойствами элементов.

Вертикальные меню представляют собой обычные списки ссылок:

<ul>
	<li><a href="/menu.html">Главная</a></li>
	<li><a href="/articles.html">Статьи</a></li>
	<li><a href="/forum.html">Форум</a></li>
	<li><a href="/links.html">Ссылки</a></li>
	<li><a href="/about.html">О нас</a></li>
</ul>

Его можно оформить очень красиво через таблицы стилей, и очень бы хотелось, что текущий раздел меню был подсвечен жирным шрифтом (или выделен как-то по-другому), чтобы дать пользователю понять, где он сейчас находится. Действовать можно по-разному: либо на стороне сервера, либо на стороне клиента. Серверный скрипт может при генерации страницы определить, какой пункт меню соответствует текущей странице, и пропишет нужный класс у элемента списка. У этого варианта есть недостатки: придется писать систему генерации меню на стороне сервера, при использовании же готовых скриптов трудно будет модифицировать модуль по работе с меню, а иногда возможность написания серверных скриптов отсутствует как таковая. Второй вариант лишен выше перечисленных недостатков. И для этого надо написать опять одну строчку в конструкции $(document).ready:

$("a[@href$=" + document.location.pathname + "]").css({fontWeight: "bold"})

Как вариант, можно использовать несколько другой подход, который предложил  PaulColomiets:

var a = $("a[@href$=" + document.location.pathname + "]");
a.parent().text(a.text()).addClass('selected');

 PaulColomiets Справедливо замечает, что выбирать лучше не просто тег a, но и необходимо указать более полный путь до него.

Как это работает

При изменении формата ссылок (я использовал относительные пути), необходимо будет поменять и скрипт. Что касается одной строчки, которая делает всю работу, то в ней используется уже знакомая функция $(…), которая в данном случае выбирает все ссылки с значением атрибута href, заканчивающегося на document.location.pathname. В этой переменной в свою очередь хранится путь до текущей страницы. Также мы используем метод css для установки значения параметра каскадных таблиц стилей font-weight. Если вы обратили внимание, то название параметра font-weight, написано немного по-другому fontWeight, то есть стилем «верблюд», который используется в JavaScript. В качестве завершающего штриха предлагаю сделать так, чтобы клик по элементу меню текущего раздела отменялся. Это очень разумное решение, ведь нельзя перейти на страницу, на которой уже находишься. А еще мне удастся продемонстрировать цепочку вызовов, которые постоянно используются в скриптах с jQuery:

$(document).ready(function() {
	$("a[@href$=" + document.location.pathname + "]")
		.css({fontWeight: "bold"})
		.click(function() { return false; } );
});

Выводы

У нас получилось обойтись без дополнительных переменных, что сокращает код в простых случаях без ущерба ясности. В этом исходнике вы можете также посмотреть стиль оформления, который удачно подойдет в таком случае: вместо одной строчке, я бью цепочку вызовов на несколько, чтобы показать, где вызовы происходят. Я думаю, что теперь не составит труда изменить скрипт для прикрепления «стрелочки», только к внешним ссылкам. Очень рекомендую посмотреть для простоты, какие операторы эквивалентности есть кроме «$=», и что именно они делают.

Цикл статей

• jQuery для верстальщика (часть 1): стрелочки для ссылочек
• jQuery для верстальщика (часть 2): вкусные меню

Автор: http://blv.habrahabr.ru/