- PVSM.RU - https://www.pvsm.ru -
Занимаюсь сайтостроением около года, и стремлюсь к оптимизации кода, насколько это возможно.
Как говорится, «Лень — двигатель прогресса», ведь именно лень подтолкнула меня к идее оптимизировать меню на сайте. Сначала я делал так:
Этой осенью я написал собственную CMS на PHP+jQuery, и с тех пользуюсь такой системой:
В результате для изменения меню мне нужно редактировать только один файл menu.php, а изменения отобразятся автоматически во всём сайте. Думаю, это очевидно и является грамотным подходом к сайтостроению.
Но я задался вопросом — как теперь выделять ссылку в меню, для того, чтоб пользователь ориентировался, на какой странице сайта он находится? Делюсь своим видением решения данного вопроса.
Принцип такой: получаем текст из адресной строки, отсекаем название сайта или же часть пути до названия страницы, далее находим в меню ссылку, адрес которой соответствует полученному значению, и выполняем действия с этой ссылкой. Но я пошёл ещё дальше и решил не только выделять нужную ссылку в меню, но и добавлять текст после неё (который также получаю из адресной строки и преобразовываю). Приятного чтения!
Качаем библиотеку jQuery [1] и подключаем её к веб-странице между тэгами head. Также подключаем файл, в котором мы напишем скрипт.
<script type="text/javascript" src="jquery.1.8.3.js"></script>
<script type="text/javascript" src="menu.location.js"></script>
В нашем файле menu.location.js пишем
$(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'); };
});
К примеру, структура адресной строки выглядит так:
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» мы получили " — мужские джинсы", и теперь можем добавлять полученный текст после текущей ссылки в меню.
Я объеденил несколько функций предыдущего сприпта в одну строку (т.к. здесь уже не нужно подробно расписывать эту часть).
$(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, надеюсь кого-нибудь натолкнёт на ещё более интересное решение. Удачи!
Автор: rafaylik
Источник [2]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/24878
Ссылки в тексте:
[1] библиотеку jQuery: http://jquery.com/download/
[2] Источник: http://habrahabr.ru/post/165905/
Нажмите здесь для печати.