Форумы портала PHP.SU :: Версия для печати

Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Изменить таб-меню [2]

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Изменить таб-меню

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

16. dropoff - 01 Марта, 2012 - 23:21:23 - перейти к сообщению

Вкладки переключает, но вот если перейти, например, site.ru/product.php?id=50#reviews, то вкладку эту не открывает(

17. IllusionMH - 02 Марта, 2012 - 01:39:55 - перейти к сообщению

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);

18. tuareg - 02 Марта, 2012 - 02:22:14 - перейти к сообщению

А с чего он должен ее открыть?
Чтобы он ее открыл надо сделать как-то так ...

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/ --> плагин для его эмуляции в браузерах его не поддерживающих

19. IllusionMH - 02 Марта, 2012 - 02:57:34 - перейти к сообщению

tuareg, ну скрипт та откроет вкладку.
При загрузке страницы выполняется функция tabify, в ней есть код

CODE (javascript):
скопировать код в буфер обмена

if(location.hash){
  handleHash();
}

P.S. Недавно писал свой велосипед с вкладками

Спасибо за строку

CODE (javascript):
скопировать код в буфер обмена

 $thisA.parent().addClass('active').siblings().removeClass('active')

возможно пригодится при рефакторинге Улыбка

20. tuareg - 02 Марта, 2012 - 03:08:12 - перейти к сообщению

Тут хозяин барин. Улыбка

я на счет использовать плагин или эту ф-ю.
onhashchange все равно придется цеплять. Подключать его к плагину или просто чуток переделать здесь решать ТС.

21. dropoff - 03 Марта, 2012 - 08:04:25 - перейти к сообщению

IllusionMH, да, видел. я убирал как раз это, чтобы -tab не добавляло
Но проблема в том, что не работает если ссылка прописана. так то меню это работает нормально, но как писал ранее, если не прописать полный путь к странице в href атрибут, то меня на главную перекидывает.

tuareg, Ваш вариант не заработал совсем.

22. IllusionMH - 03 Марта, 2012 - 15:19:34 - перейти к сообщению

dropoff, смотрите что вы там изменили, ибо копипаст кода из первого сообщения отлично работает на ссылках вида
forum/viewtopic.php?id=1&p=2#contentGuestbook-tab
Ссылку на рабочий пример отправил в лс

23. dropoff - 03 Марта, 2012 - 15:36:48 - перейти к сообщению

Дак понятно что он работает) Я же не об этом писал.
У меня проблема в том, что нужно указывать ПРЯМУЮ ссылку в табах

Так

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'е таба.

Уже который раз об этом пишу, но меня не слышат видимо Радость

24. IllusionMH - 03 Марта, 2012 - 15:51:43 - перейти к сообщению

Ну любая ссылка не из списка там табов - спокойно работала.
Вот этот код у меня заработал как нужно. Добавил комментарии к измененным строкам

Спойлер (Отобразить)

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();
});