Вступление
Занимаюсь сайтостроением около года, и стремлюсь к оптимизации кода, насколько это возможно.
Как говорится, «Лень — двигатель прогресса», ведь именно лень подтолкнула меня к идее оптимизировать меню на сайте. Сначала я делал так:
- Создавал меню отдельно в каждой html-странице.
- В каждой странице выделял тот пункт меню, который соответствует адресу данной страницы.
Этой осенью я написал собственную CMS на PHP+jQuery, и с тех пользуюсь такой системой:
- Пишу меню в отдельном файле menu.php.
- Подключаю файл с меню в каждую страницу сайта через include().
В результате для изменения меню мне нужно редактировать только один файл menu.php, а изменения отобразятся автоматически во всём сайте. Думаю, это очевидно и является грамотным подходом к сайтостроению.
Но я задался вопросом — как теперь выделять ссылку в меню, для того, чтоб пользователь ориентировался, на какой странице сайта он находится? Делюсь своим видением решения данного вопроса.
Принцип такой: получаем текст из адресной строки, отсекаем название сайта или же часть пути до названия страницы, далее находим в меню ссылку, адрес которой соответствует полученному значению, и выполняем действия с этой ссылкой. Но я пошёл ещё дальше и решил не только выделять нужную ссылку в меню, но и добавлять текст после неё (который также получаю из адресной строки и преобразовываю). Приятного чтения!
Подготовка
Качаем библиотеку jQuery и подключаем её к веб-странице между тэгами head. Также подключаем файл, в котором мы напишем скрипт.
<script type="text/javascript" src="jquery.1.8.3.js"></script> <script type="text/javascript" src="menu.location.js"></script>
Процесс
В нашем файле menu.location.js пишем
Код — часть 1 (выделение ссылки)
$(document).ready(function(){ // получаем текст из адресной строки var locationFull = (document.location.pathname); // отрезаем все слэши и всё, что находится перед ними (в зависимости от сложности структуры адреса нужно будет менять код) var currentPage= locationFull.replace(/.+[\\\/]/, "") // в блоке с меню (div id="menu") находим ссылку (а), адрес которой соответствует полученному (уже очищенному) значению из адресной строки. var currentLink = $('#menu a[href="'+ currentPage +'"]'); // если совпадение найдено, добавляем класс к данной ссылке (или производим любые другие действия с ней) if ($(currentLink).val(currentPage)) { $(currentLink).addClass('menu-current-page'); }; });
Код — часть 2 (добавление комментария после выделенной ссылки)
К примеру, структура адресной строки выглядит так:
http://company.com/shop-man-jeans
где «shop» — это категория, а «man-jeans» название страницы со списком джинс.
$(document).ready(function(){ // получаем текст из адресной строки var locationFull = (document.location.pathname); // отрезаем все слэши и всё, что находится перед ними - получаем "shop-man-jeans" var locationEnding = locationFull.replace(/.+[\\\/]/, ""); // из полученного "shop-man-jeans" убираем первые 4 символа, и получаем "-man-jeans" var locationEndingCut = locationEnding.replace(/..../, ""); // меняем все дефисы на дефисы, окружённые пробелами - получаем " - man - jeans" var locationParts = locationEndingCut.replace(/-/g, ' - '); // переводим на русский язык все допустимые варианты var locationCurrent = locationParts.replace('- man -', '- мужские').replace('- woman -', '- женские').replace('jeans', 'джинсы').replace('shirts', 'рубашки'); // и т. д. });
В итоге из «http:// company.com/shop-man-jeans» мы получили " — мужские джинсы", и теперь можем добавлять полученный текст после текущей ссылки в меню.
Результат
Код — часть 3 (объеденение двух функций, весь код)
Я объеденил несколько функций предыдущего сприпта в одну строку (т.к. здесь уже не нужно подробно расписывать эту часть).
$(document).ready(function(){ // получение имён подкатегории "shop" и страницы "- man - jeans" из адресной строки var locationParts = (document.location.pathname).replace(/.+[\\\/]/, "").replace(/..../, "").replace(/-/g, " - "); // замена английских имён на русские (варианты) var locationCurrent = locationParts.replace('- man -', '- мужские').replace('- woman -', '- женские').replace('jeans', 'джинсы').replace('tshirts', 'футболки'); // и т.д. // отсекание всего, что перед "shop" (http://company.com/) и после него (-man-jeans) var currentPage = (document.location.pathname).replace(/.+[\\\/]/, "").replace(/-.*/, ""); // определение ссылки, которая соответствует имени категории открытой страницы var currentLink = $('#menu a[href="'+ currentPage +'"]'); // если соответствующая ссылка в меню найдена, выполняем действия if ($(currentLink).val(currentPage)) { // добавляем класс данной ссылке $(currentLink).addClass('menu-current-page'); // добавляем текст после данной ссылки $(currentLink).after(locationCurrent); }; });
Получаем результат как на картинке, только в моём практическом примере вместо «shop» было «supera»:
Это всего лишь пример того, как можно работать с document.location.pathname, надеюсь кого-нибудь натолкнёт на ещё более интересное решение. Удачи!
ссылка на оригинал статьи http://habrahabr.ru/post/165905/
Добавить комментарий