DEMETR Создание сайтов в Казани

Опубликовано

JQuery cookie (вкладки)

JQuery cookie (вкладки)Всем здравствуйте. Иногда приходится работать с cookie, для сохранения каких-либо параметров и манипуляций пользователей. Что такое cookie думаю известно всем, кто решил прочесть эту статью до конца.

Итак, нам необходимо сделать три блока. Каждый блок открываются при нажатии на соответствующую ссылку, остальные при этом закрываются, — некое подобие аккордеона. При обновлении страницы или переходе на другую, необходимо чтобы открыта была та вкладка, по которой мы щелкали в последний раз.

Приступаем. Для начала можно посмотреть пример, чтобы четко понимать что мы будем делать.

Структура html будет следующая, сначала выводим вкладки:

<a href="#" id="mod01" class="click active ">First block</a>
<a href="#" id="mod02" class="click">Second block</a>
<a href="#" id="mod03" class="click">Third block</a>

Затем сами блоки

<div class="block b-r" id="mod01">
     <h1>Fisrt block</h1>
     Text
</div>
 
<div class="block b-r" id="mod02" style="display:none">
     <h1>Second block</h1>
     Text2
</div>
 
<div class="block b-r" id="mod03" style="display:none">
     <h1>Third block</h1>
     Text3
</div>

Обращаем внимание что ссылка и первый блок имеют один id — mod01. Благодаря этому мы и будем связывать их. Теперь подключаем в head скрипты:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquerycookie.js"></script>

И сам код, который будет выполнять всю работу:

<script type="text/javascript">
//Запоминаем выбранный id
	function changetab(id){
		$.cookie("mycookie",id);
	}
 
//Удаляем cookie
	function delCookie(){
		$.cookie("mycookie",null);
		}
 
	 $(document).ready(function() {
// Если куки не пусты, то
		if($.cookie("mycookie")!=null){
		$('span#cookievalue').html($.cookie("jdcookie")); //в спан пишем текущее значение
		$('div.block').hide(); // сначала скрываем все блоки
		$('div#'+$.cookie("mycookie")).show(); // и отображаем тот блок, id которого сохранен в куки
		$('a.click').removeClass('active'); // тоже самое со ссылкой, чтобы подсветить активную ссылку
		$('a#'+$.cookie("mycookie")).addClass('active');
		$('span#current').html($.cookie("mycookie"));
		} else{
			$('span#current').html("пусто");
			}
		$('a.click').click(function(){ // Отрабатываем событие, вызываемое при клике по ссылке
			changetab($(this).attr("id")); // Вызываем функцию, описанную выше, передаем ей id ссылки, по которой щелкнули
			$('div.block').hide(); // скрываем все блоки
			$('div#'+$(this).attr("id")).show(); // Показываем тот блок, id которого = id ссылке, по которой щелкнули
			$('span#current').html($(this).attr("id")); // В спан пишем текущее значение куки.
			$('a.click').removeClass('active'); // И напоследок подсвечиваем активную ссылку
			$('a#'+$(this).attr("id")).addClass('active');
			return false;
			});
		});
</script>

Вот и все, код содержит комментарии, разобраться будет не трудно.

Рубрики КодМетки

JQuery cookie (вкладки): 29 комментариев

  • Max — 05.07.2011 в 02:15 #

    Отличный пример!

    А как вместо ссылок вставить форму? :

    First block
    Second block
    Third block

  • Max — 05.07.2011 в 02:17 #

    Отличный пример!

    А как вместо ссылок вставить форму c выпадающим меню?

  • Demetr — 05.07.2011 в 08:03 #

    На событие onchange вып.списка вешаем вот такую функцию, т.е. при изменении вып.списка с айди myselect будем передавать в функцию changeval значение текущего элемента.
    $(«#myselect»).change(function(){
    changeval($(this).val());
    })

    И сама функция запоминания выбранного значения:
    function changeval(value){
    $.cookie(«mysel»,value);
    }

    Теперь в куках mysel будет хранится ваш выбранный пункт. А дальше сами сделайте проверку.

  • Max — 05.07.2011 в 14:47 #

    Спасибо за ответ! Но не совсем понятно что где заменить(
    Можете показать на основном примере ?

    Форма вот такая:

    <select name=»t»>

    <option value=»mod01″>Fisrt block</option>
    <option value=»mod02″ >Second block</option>
    <option value=»mod03″ >Third block</option>

  • Demetr — 05.07.2011 в 15:08 #

    В течение дня дополню статью.

  • Max — 05.07.2011 в 15:29 #

    Спасибо!

  • Demetr — 05.07.2011 в 15:59 #

    http://stofin.ru/demo/jquery-cookie/select.html
    смотрите исходный код страницы и попробуйте разобраться. Я там комментарии написал.

  • Max — 05.07.2011 в 16:17 #

    СПАСИБО ОГРОМНОЕ! То что надо!

  • Max — 05.07.2011 в 17:57 #

    Подскажите пожалуйста как сделать тоже самое но только для блоков как в изночальном примере только с выпадающим меню!
    Спасибо

  • Demetr — 05.07.2011 в 19:56 #

    Не понял вопроса.

  • Max — 06.07.2011 в 00:34 #

    В Вашем последнем примере нет блоков:

    <div class=»block b-r» id=»1″>
    <h1>Fisrt block</h1>
    The result ………
    </div>

    <div class=»block b-r» id=»2″ style=»display:none»>
    <h1>Second block</h1>
    Given a jQuery ……..
    </div>

    <div class=»block b-r» id=»3″ style=»display:none»>
    <h1>Third block</h1>
    Add spans……
    </div>

    Можете добавить их в пример? Заранее спасибо!

  • Demetr — 06.07.2011 в 10:22 #

    По этой же ссылке http://stofin.ru/demo/jquery-cookie/select.html
    Только посмотрите внимательнее код, вникните. На самом деле это очень просто, если усвоить логику.

  • Max — 06.07.2011 в 15:14 #

    Код я уже более менее понял) Вот только не получается подключить дивы к выпадающему меню… Чтобы например при выборе значения Value #2 в выпадающем меню открывался блок (div) «Second block» и тд. Все тоже самое по функциям как в изночальном примере только вместо ссылок — селекты)

  • Demetr — 06.07.2011 в 15:39 #

    Это еще проще. Кратко:
    1. из селекта передаем значение в value (например mod02)
    2. запоминаем это значение в куках. $.cookie(«mycookie», $(«myselect»).val())

    ну и дальше подправить под себя надо будет.

  • Max — 06.07.2011 в 16:22 #

    Посмотрите пожалуйста код если не сложно, в чем моя ошибка? Не могу добиться отображения блоков!

    http://spacepromo.ru/customsearchform.php

  • Demetr — 06.07.2011 в 17:20 #

    http://stofin.ru/demo/jquery-cookie/select2.html
    это максимум чем могу помочь. Дальше сами.

  • Max — 07.07.2011 в 06:04 #

    Спасибо! Разобрался) Очень сильно помогли!

  • Max — 12.07.2011 в 19:26 #

    Здравствуйте! Все сделал по Вашему примеру, блоки отображаются правильно, вот только после обновления страницы сбрасывается Значение из Селекта! Не подскажите где ошибка? Спасибо!

    Исходник — http://spacepromo.ru/content.html

  • Demetr — 12.07.2011 в 22:49 #

    Попробуйте скопировать полностью код страницы, и вставьте в свою, затем уберите лишнее.

  • Max — 12.07.2011 в 23:22 #

    Дело в том что ваш код работает!

    Я меняю значение в селектах с option value=1 на option value=Music! C value=1 все работает отлично а с value=music браузер почемуто не запоминает положение селекта после перезагрузки(

  • Demetr — 13.07.2011 в 09:08 #

    Да оставьте в value цифры, их все равно, кроме вас никто не увидит, как и id блоков, — какая разница то?

  • Max — 13.07.2011 в 15:36 #

    Дело в том что это форма поиска и из value передается запрос в бд с этими значениями…. Буду очень признателен если найдёте время помочь исправить эту ошибку! Прошу извинить меня за возможно глупые вопросы, но я только начинаю осваивать веб программирование )

  • Demetr — 14.07.2011 в 07:47 #

    Не могу помочь.

  • Ole_zha — 31.07.2013 в 14:58 #

    Можно ли по данному примеру сделать на подобии приветствия на сайте? Цель такова, что пользователь заходит на сайт в первый раз и видит краткий туториал по сайту (что изменилось, что где искать и как это работает и т.д.) но только один раз и больше его не видит. Можно ли это как нибудь связать с ip адресами пользователя и логами на сервере?

  • Demetr — 31.07.2013 в 15:07 #

    Не знаю.

  • Алексей — 24.09.2013 в 23:32 #

    А возможно сделать, что бы все это работало с вложенными вкладками то есть внутри вкладки 2 есть еще например 3 вкладки. и после обновления страницы открывалась последняя «внутренняя» вкладка.

  • Demetr — 25.09.2013 в 13:23 #

    Конечно возможно. Код с комментариями. Готового решения не напишу.

  • Алексей — 25.09.2013 в 23:56 #

    ПОМОГЛИ СПАСИБО. ВООБЩЕ СУПЕР

  • Алексей — 25.09.2013 в 23:59 #

    ах да забыл еще сказать спасибо за быстрый ответ