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

    [Ответить]

    Demetr - Июль 5th, 2011 в 08:03

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

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

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

    [Ответить]

  • Max — 05.07.2011 в 02:17 #

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

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

    [Ответить]

  • 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 - Июль 5th, 2011 в 15:08

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

    [Ответить]

  • Max — 05.07.2011 в 15:29 #

    Спасибо!

    [Ответить]

    Demetr - Июль 5th, 2011 в 15:59

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

    [Ответить]

    Max - Июль 5th, 2011 в 16:17

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

    [Ответить]

  • Max — 05.07.2011 в 17:57 #

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

    [Ответить]

    Demetr - Июль 5th, 2011 в 19:56

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

    [Ответить]

    Max - Июль 6th, 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 - Июль 6th, 2011 в 10:22

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

  • Max — 06.07.2011 в 15:14 #

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

    [Ответить]

    Demetr - Июль 6th, 2011 в 15:39

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

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

    [Ответить]

  • Max — 06.07.2011 в 16:22 #

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

    http://spacepromo.ru/customsearchform.php

    [Ответить]

    Demetr - Июль 6th, 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 - Июль 12th, 2011 в 22:49

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

    [Ответить]

  • Max — 12.07.2011 в 23:22 #

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

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

    [Ответить]

    Demetr - Июль 13th, 2011 в 09:08

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

    [Ответить]

  • Max — 13.07.2011 в 15:36 #

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

    [Ответить]

    Demetr - Июль 14th, 2011 в 07:47

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

    [Ответить]

  • Ole_zha — 31.07.2013 в 14:58 #

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

    [Ответить]

    Demetr - Июль 31st, 2013 в 15:07

    Не знаю.

    [Ответить]

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

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

    [Ответить]

    Demetr - Сентябрь 25th, 2013 в 13:23

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

    [Ответить]

    Алексей - Сентябрь 25th, 2013 в 23:56

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

    [Ответить]

    Алексей - Сентябрь 25th, 2013 в 23:59

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