Закладки с правильным адресом URL
Очень хочется, чтобы при использовании закладок в дизайне, они имели специфический адрес URL. И при активировании закладки выводился URL, соответствующий текущему активному содержанию.
Если каждая закладка расположена по абсолютно разным адресам URL, то все просто. В коде HTML используется соответствующий класс для активной закладки, и выводится соответствующее содержание.
Но если закладки являются "одной страницей", где разные панели выводятся и скрываются сразу или с помощью AJAX, задача становится сложнее. Обычный подход использовать персонифицированные ссылки, то есть:
http://example.com/#tab-three
С помощью псевдо-класса CSS3 :target
можно реализовать функциональные закладки без использования JavaScript. Но на текущий момент закладки лучше создавать с помощью JavaScript.
Персонифицированные ссылки имеет несколько проблем:
- При загрузке страницы по ссылке, браузер прокручивает содержание вниз так, чтобы элемент с ID, соответствующим ссылке, оказался в вверху страницы. Такое поведение не желательно. Проблему можно устранить с помощью
preventDefault()
. - Изменение персонифицированной ссылки добавляет пункт в историю браузера. Поэтому при нажатии на кнопку "Назад" произойдет переключение на раздел с соответствующим идентификатором. При использовании ссылок такое поведение тоже не желательно.
Вот что мы будем делать:
- Не будем использовать персонифицированные ссылки, а задействуем URL параметры (без прокручивания вниз).
- Воспользуемся функцией
history.replaceState(),
так что изменение URL не будет действовать на кнопку "Назад".
Наш адрес URL будет выглядеть следующим образом:
http://example.com/?tab=tab-three
Код плагина выглядит следующим образом.
function($) { // Определяем плагин $.organicTabs = function(el, options) { // Оригинальный вариант JavaScript var base = this; // Вариант jQuery base.$el = $(el); // Навигация для текущего селектора, переданная в плагин base.$nav = base.$el.find(".nav"); // Выполняем один раз при вызове плагина base.init = function() { // Загружаем опции base.options = $.extend({},$.organicTabs.defaultOptions, options); // Скрываем то, что нужно скрыть $(".hide").css({ "position": "relative", "top": 0, "left": 0, "display": "none" }); // При нажатии на закладку навигации... base.$nav.delegate("a", "click", function(e) { // Предотвращаем обработку по умолчанию e.preventDefault(); // Вычисляем текущий список по классу CSS var curList = base.$el.find("a.current").attr("href").substring(1), // Список переместится в $newList = $(this), // Вычисляем ID нового списка listID = $newList.attr("href").substring(1), // Устанавливаем высоту внешнего контейнера для текущего внутреннего списка $allListWrap = base.$el.find(".list-wrap"), curListHeight = $allListWrap.height(); $allListWrap.height(curListHeight); if ((listID != curList) && ( base.$el.find(":animated").length == 0)) { // Гасим текущий список base.$el.find("#"+curList).fadeOut(base.options.speed, function() { // Выводим новый список в возвратной функции base.$el.find("#"+listID).fadeIn(base.options.speed); // выравниваем внешний контейнер так, чтобы он прижимался к новому списку var newHeight = base.$el.find("#"+listID).height(); $allListWrap.animate({ height: newHeight }, base.options.speed); // Удаляем выделение - Добавляем закладку base.$el.find(".nav li a").removeClass("current"); $newList.addClass("current"); // Изменяем адресную строку окна - добавляем параметр URL if (window.history && history.pushState) { // ПРИМЕЧАНИЕ: не берем в счет текущие параметры history.replaceState("", "", "?" + base.options.param + "=" + listID); } }); } // Не будет работать как обычная ссылка. // Останавливаем дальнейшую обработку return false; }); }; base.init(); }; $.organicTabs.defaultOptions = { "speed": 300, "param": "tab" }; $.fn.organicTabs = function(options) { return this.each(function() { (new $.organicTabs(this, options)); }); }; })(jQuery);
При вызове плагина можно использовать опции:
$.organicTabs.defaultOptions = { "speed": 300, // Скорость смены закладки в миллисекундах "param": "tab" //Добавляемая строка в адресе URL };
Трюк заключается в том, что нам нужно вытянуть параметр URL, когда загружается страница, и передать его JavaScript для обработки. Придется использовать серверный язык (в примере использовался PHP):
// Обрабатываем активную закладку с помощью параметра URL var tab = $("a[href='#<?php echo $_GET['tab']; ?>']"); if (tab.length) { tab .closest(".nav") .find("a") .removeClass("current") .end() .next(".list-wrap") .find("ul") .hide(); tab.addClass("current"); $("#<?php echo $_GET['tab']; ?>").show();
Данный код получает параметр URL, выделяет текущую закладку и выводит нужное содержание.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/A944wcbz1Ag/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Великие умы обсуждают идеи, средние - обсуждают поступки, а малые - людей Индийская пословица |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.