PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

Изменить таб-меню

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)

Страниц (2): « 1 [2]

Без описания

Поиск в теме | Версия для печати

dropoff	Отправлено: 01 Марта, 2012 - 23:21:23
Посетитель Покинул форум Сообщений всего: 310 Дата рег-ции: Дек. 2010 Помог: 0 раз(а)	Вкладки переключает, но вот если перейти, например, site.ru/product.php?id=50#reviews, то вкладку эту не открывает(

IllusionMH	Отправлено: 02 Марта, 2012 - 01:39:55
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	dropoff, долго писал длинный пост... в итоге случайно перечитал последнее сообщение и осенило нужно чтобы ссылка была вида site.ru/product.php?id=50#reviews-tab (внимательно посмотрите на адресную строку при обычном переключении) там же в исходнике он ко всем ссылкам добавляет -tab в конце CODE (javascript): скопировать код в буфер обмена $(this).attr('href',$(this).attr('href') + '-tab'); а потом убирает последние 4 символа, когда ищет нужный контейнер CODE (javascript): скопировать код в буфер обмена hash = hash.substring(0,hash.length-4); (Отредактировано автором: 02 Марта, 2012 - 01:40:44)

tuareg	Отправлено: 02 Марта, 2012 - 02:22:14
Участник Покинул форум Сообщений всего: 1234 Дата рег-ции: Июнь 2010 Помог: 69 раз(а)	А с чего он должен ее открыть? Чтобы он ее открыл надо сделать как-то так ... CODE (javascript): скопировать код в буфер обмена $(function(){ var hash=window.location.hash \|\| '', //hash //сразу запомним все переменные чтобы потом их не искать $menu=$('#menu'), $content=$('.content'), $aTabs=$('a.tabs'),// все ссылки $thisA,// это будет ссылка $thisTab;// это будет вкладка menu.on('myTab',function(event,id,elem){//заменить на on('myTab',...) jQuery>1.7 $thisA=$(elem); $thisTab=$(id); //прячем все блоки с контентом $content.css('display','none'); //отображаем нужный блок $thisTab.css('display','block'); //устанавливаем класс на текущий таб и снимаем со всех элементов li класс active $thisA.parent().addClass('active').siblings().removeClass('active'); }); $aTabs.click(function(event){ //запрещаем переход по ссылке event.preventDefault(); menu.trigger('myTab',[this.href.hash,this]); }); /если hash есть/ if(hash!==''){ /перебираем все ссылки/ $aTabs.each(function(){ /если хэши совпали вызываем обработчик myTab/ if(this.href.hash===hash){ menu.trigger('myTab',[hash,this]); return false; } }); } }); При клике на ссылку с хэшем будет "засоряться" история т.е при клике вперед/назад будет меняться хэш. Чтобы и это отследить надо смотреть(отлавливать) еще и событие onhashchange. Про него можете почитать http://www[dot]xiper[dot]net/manuals/htm[dot][dot][dot]nhashchange[dot]html -->само событие http://benalman[dot]com/projects/jqu[dot][dot][dot]shchange-plugin/ --> плагин для его эмуляции в браузерах его не поддерживающих (Отредактировано автором: 02 Марта, 2012 - 03:01:24)

IllusionMH	Отправлено: 02 Марта, 2012 - 02:57:34
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	tuareg, ну скрипт та откроет вкладку. При загрузке страницы выполняется функция *tabify, в ней есть код CODE (javascript): скопировать код в буфер обмена if(location.hash){ handleHash(); } P.S. Недавно писал свой велосипед с вкладками Спасибо за строку CODE (javascript*): скопировать код в буфер обмена $thisA.parent().addClass('active').siblings().removeClass('active') возможно пригодится при рефакторинге

tuareg	Отправлено: 02 Марта, 2012 - 03:08:12
Участник Покинул форум Сообщений всего: 1234 Дата рег-ции: Июнь 2010 Помог: 69 раз(а)	Тут хозяин барин. я на счет использовать плагин или эту ф-ю. onhashchange все равно придется цеплять. Подключать его к плагину или просто чуток переделать здесь решать ТС.

dropoff	Отправлено: 03 Марта, 2012 - 08:04:25
Посетитель Покинул форум Сообщений всего: 310 Дата рег-ции: Дек. 2010 Помог: 0 раз(а)	IllusionMH, да, видел. я убирал как раз это, чтобы -tab не добавляло Но проблема в том, что не работает если ссылка прописана. так то меню это работает нормально, но как писал ранее, если не прописать полный путь к странице в href атрибут, то меня на главную перекидывает. tuareg, Ваш вариант не заработал совсем.

IllusionMH	Отправлено: 03 Марта, 2012 - 15:19:34
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	dropoff, смотрите что вы там изменили, ибо копипаст кода из первого сообщения отлично работает на ссылках вида forum/viewtopic.php?id=1&p=2#contentGuestbook-tab Ссылку на рабочий пример отправил в лс

dropoff	Отправлено: 03 Марта, 2012 - 15:36:48
Посетитель Покинул форум Сообщений всего: 310 Дата рег-ции: Дек. 2010 Помог: 0 раз(а)	Дак понятно что он работает) Я же не об этом писал. У меня проблема в том, что нужно указывать ПРЯМУЮ ссылку в табах Так CODE (html): скопировать код в буфер обмена <ul id="menu"> <li class="active"><a href="#contentHome">Home</a></li> <li><a href="#contentGuestbook">Guestbook</a></li> <li><a href="#contentLinks">Links</a></li> </ul> У меня НЕ работает. При клике на любой таб, перекидывает на главную, потому как ссылка там выглядит site.ru/#contentLinks, когда должна быть site.ru/prod.php?id=5#contentLinks Я же хотел сделать так CODE (html): скопировать код в буфер обмена <ul id="menu"> <li class="active"><a href="http://site.ru/prod.php?id=5#contentHome">Home</a></li> <li><a href="http://site.ru/prod.php?id=5#contentGuestbook">Guestbook</a></li> <li><a href="http://site.ru/prod.php?id=5#contentLinks">Links</a></li> </ul> Чтобы УРЛ страницы уже БЫЛ в href'е таба. Уже который раз об этом пишу, но меня не слышат видимо

IllusionMH	Отправлено: 03 Марта, 2012 - 15:51:43
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	Ну любая ссылка не из списка там табов - спокойно работала. Вот этот код у меня заработал как нужно. Добавил комментарии к измененным строкам Спойлер (Отобразить) CODE (javascript): скопировать код в буфер обмена (function($){ $.fn.extend({ tabify: function( callback ) { function getHref(el){ hash = $(el).find('a').attr('href'); hash = hash.substring(hash.indexOf("#"),hash.length-4);//копируем хэш не с начала строки, а с позиции # return hash; } function setActive(el){ $(el).addClass('active'); $(getHref(el)).show(); $(el).siblings('li').each(function(){ $(this).removeClass('active'); $(getHref(this)).hide(); }); } return this.each(function() { var self = this; var callbackArguments = {'ul':$(self)}; $(this).find('li a').each(function(){ $(this).attr('href',$(this).attr('href') + '-tab'); }); function handleHash(){ if(location.hash && $(self).find('a[href$=' + location.hash + ']').length > 0){//в селектор добавлен знак $ что означает искать ссылку заканчивающиюся на хэш, а не равную как раньше setActive($(self).find('a[href$=' + location.hash + ']').parent());//в селектор добавлен знак $ что означает искать ссылку заканчивающиюся на хэш, а не равную как раньше } } if(location.hash){ handleHash(); } setInterval(handleHash,100); $(this).find('li').each(function(){ if($(this).hasClass('active')){ $(getHref(this)).show(); } else { $(getHref(this)).hide(); } }); if(callback){ callback(callbackArguments); } }); } }); })(jQuery); $(document).ready(function () { $('#pi-tabs').tabify(); });

Поиск в теме | Версия для печати

Страниц (2): « 1 [2]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« JavaScript & VBScript »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.