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 :: Версия для печати :: Изменить таб-меню
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Изменить таб-меню

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

1. dropoff - 29 Февраля, 2012 - 15:58:38 - перейти к сообщению
Всем привет.
Есть такой скрипт таб-меню _http://unwrongest.com/projects/tabify/
Собственно работает отлично.
Но есть проблема.

Само меню
CODE (html):
скопировать код в буфер обмена
  1. <ul id="menu">
  2.     <li class="active"><a href="#contentHome">Home</a></li>
  3.     <li><a href="#contentGuestbook">Guestbook</a></li>
  4.     <li><a href="#contentLinks">Links</a></li>
  5. </ul>
  6. <div class="content" id="contentHome">Content for Home</div>
  7. <div class="content" id="contentGuestbook">My guestbook</div>
  8. <div class="content" id="contentLinks">Links</div>&#8203;


CODE (javascript):
скопировать код в буфер обмена
  1. // Tabs
  2. (function($){
  3.      $.fn.extend({
  4.          tabify: function( callback ) {
  5.                         function getHref(el){
  6.                                 hash = $(el).find('a').attr('href');
  7.                                 hash = hash.substring(0,hash.length-4);
  8.                                 return hash;
  9.                         }
  10.                         function setActive(el){
  11.                                 $(el).addClass('active');
  12.                                 $(getHref(el)).show();
  13.                                 $(el).siblings('li').each(function(){
  14.                                         $(this).removeClass('active');
  15.                                         $(getHref(this)).hide();
  16.                                 });
  17.                         }
  18.                         return this.each(function() {
  19.                                 var self = this;
  20.                                 var     callbackArguments       =       {'ul':$(self)};
  21.                                 $(this).find('li a').each(function(){
  22.                                         $(this).attr('href',$(this).attr('href') + '-tab');
  23.                                 });
  24.                                 function handleHash(){
  25.                                         if(location.hash && $(self).find('a[href=' + location.hash + ']').length > 0){
  26.                                                 setActive($(self).find('a[href=' + location.hash + ']').parent());
  27.                                         }
  28.                                 }
  29.                                 if(location.hash){
  30.                                         handleHash();
  31.                                 }
  32.                                 setInterval(handleHash,100);
  33.                                 $(this).find('li').each(function(){
  34.                                         if($(this).hasClass('active')){
  35.                                                 $(getHref(this)).show();
  36.                                         } else {
  37.                                                 $(getHref(this)).hide();
  38.                                         }
  39.                                 });
  40.                                 if(callback){
  41.                                         callback(callbackArguments);
  42.                                 }
  43.             });
  44.         }
  45.     });
  46. })(jQuery);
  47.  
  48. $(document).ready(function () {
  49.         $('#pi-tabs').tabify();
  50. });


Но столкнулся с проблемой, не могу понять как переделать.
Мне нужно ссылки сделать не
CODE (html):
скопировать код в буфер обмена
  1. <a href="#contentHome">Home</a>

а
CODE (html):
скопировать код в буфер обмена
  1. <a href="http://site.ru/product.php?id=50#contentHome">Home</a>


Но такой вариант сейчас не работает.
Что тут можно сделать?
2. Panoptik - 29 Февраля, 2012 - 16:21:24 - перейти к сообщению
CODE (javascript):
скопировать код в буфер обмена
  1. function getHref(el){
  2.      hash = $(el).find('a').attr('href');
  3.      var anchor = hash.split('#');
  4.      hash = '#'+anchor[1];
  5.      hash = hash.substring(0,hash.length-4);
  6.      return hash;
  7. }
как то так надо
3. SAD - 29 Февраля, 2012 - 16:52:15 - перейти к сообщению
hash = '#'+anchor[1];
4. Panoptik - 29 Февраля, 2012 - 17:41:37 - перейти к сообщению
SAD пишет:
hash = '#'+anchor[1];

да, верно. спасибо. исправил
5. dropoff - 29 Февраля, 2012 - 20:19:01 - перейти к сообщению
Неа. Что-то не работает.
Табы не переключает
(Добавление)
Точнее не работает, если прописываю ссылку в в href
6. dropoff - 01 Марта, 2012 - 16:50:56 - перейти к сообщению
Ребят, что еще тут можно сделать? Не работает правочка от Panoptik.
7. Panoptik - 01 Марта, 2012 - 17:14:24 - перейти к сообщению
я вот не пойму зачем нужна ссылка в href если эта ссылка не предусматривает переход, а является объектом действия javascript?
8. dropoff - 01 Марта, 2012 - 17:57:52 - перейти к сообщению
Вся штука в том, что без ссылки не получается сделать переход по вкладкам.
Я пока не понял почему, движок видимо виноват.

Если делаю так
CODE (html):
скопировать код в буфер обмена
  1. <a href="#contentHome">Home</a>

То ссылка при наведении ведет на site.ru/#contentHome

хотя я на странице товара и должно быть site.ru/product.php?id=50#contentHome
По этому и хочу ссылку туда вставить.
9. IllusionMH - 01 Марта, 2012 - 20:51:25 - перейти к сообщению
dropoff, так это должны быть ссылки, или объект с вкладками?
Предназначения у них разные. Просто ссылки используются как fallback(подскажите правильный перевод) на случай неработающего JS(в зависимости от скрипта вкладок).

Что именно требуется получить при нажатии на таб(ссылку)?
10. dropoff - 01 Марта, 2012 - 21:17:14 - перейти к сообщению
Нет.

Пример
CODE (html):
скопировать код в буфер обмена
  1. <ul id="menu">
  2.     <li class="active"><a href="#desc">Описание</a></li>
  3.     <li><a href="#reviews">Отзывы</a></li>
  4.     <li><a href="#options">Характеристики</a></li>
  5. </ul>
  6. <div class="content" id="desc">Тут описание товара</div>
  7. <div class="content" id="reviews">Отзывы о товаре</div>
  8. <div class="content" id="options">Характеристики товара</div>


В ссылках меню у нас сейчас #desc, #reviews и #options
Если смотреть уже в работе, то при наведении на любой пункт меню у нас должна формироваться ссылка типа
site.ru/product.php?id=50#desc
site.ru/product.php?id=50#reviews
site.ru/product.php?id=50#options
Т.е. все, что после решетке добавляется к УРЛу страницы, правильно?

А у меня не так. У меня ссылки в этих меню получаются такие
site.ru/#desc
site.ru/#reviews
site.ru/#options
И при клике, меня перекидывает на главную сайта, а не открывает вкладку.

А такие таб-меню нужны еще для того, чтобы при желании можно было сразу перейти к нужно вкладке
Например я где-то указываю в списках товаров ссылку site.ru/product.php?id=50#reviews и меня сразу переносить к открытой вкладке отзывов в карточке товара.

По этому и хотел прописать сразу туда ссылки, ибо двиг видать что-то мутит и все, что содержит решетки "#" нужно прописывать полностью с текущим адресом страницы. Иначе перекидывает на главную, как описал выше.
11. Panoptik - 01 Марта, 2012 - 21:45:25 - перейти к сообщению
было бы лучше если бы вы показали кусок html кода, который формируется в php, а не готовый пример, который вы гипотетически пытаетесь обуздать...
12. dropoff - 01 Марта, 2012 - 21:59:40 - перейти к сообщению
Причем тут PHP?
Во-первых шаблонизатор Smarty
Во-вторых я выше привел пример того, какой код у меня в шаблоне.

Т.е. если я не указываю ссылки в этих меню, а оставляю просто #desc.... то меня перекидывает на главную сайта, а не открывает вкладку.
Если же я указываю ссылки на товар перед #desc...., то тогда вкладки то же не работают.

Я же прошу помощи в поправке скрипта, чтобы он работал не так
CODE (html):
скопировать код в буфер обмена
  1. <ul id="menu">
  2.     <li class="active"><a href="#desc">Описание</a></li>
  3.     <li><a href="#reviews">Отзывы</a></li>
  4.     <li><a href="#options">Характеристики</a></li>
  5. </ul>


А с ссылками в вкладках
CODE (html):
скопировать код в буфер обмена
  1. <ul id="menu">
  2.     <li class="active"><a href="http://site.ru/product.php?id=50#desc">Описание</a></li>
  3.     <li><a href="http://site.ru/product.php?id=50#reviews">Отзывы</a></li>
  4.     <li><a href="http://site.ru/product.php?id=50#options">Характеристики</a></li>
  5. </ul>
13. Panoptik - 01 Марта, 2012 - 22:14:04 - перейти к сообщению
ну хорошо. давайте спокойно. что у вас не получилось с тем самым первым решением. вы сказали что не работает. а что именно и как не работает? вы можете определить причину или ошибку? если ошибка javascript поставьте в файрфокс firebug и/или web developer плагин. они показывают синтаксические ошибки.

как разберемся с этим может и дойдем до решения вопроса
14. dropoff - 01 Марта, 2012 - 22:20:08 - перейти к сообщению
Я спокоен) Простите, если показалось, что резко ответил.

Ошибок нет, смотрю их в google chrome
Просто как вкладки не работали, так и не работают.
15. Panoptik - 01 Марта, 2012 - 22:23:44 - перейти к сообщению
вот вариантик решения. ссылкам которые должны переключать табы мы ставим какойнибудь класс например
CODE (html):
скопировать код в буфер обмена
  1.     <ul id="menu">
  2.         <li class="active"><a class="tab" href="site.ru#desc">Описание</a></li>
  3.         <li><a class="tab" href="site.ru#reviews">Отзывы</a></li>
  4.         <li><a class="tab" href="site.ru#options">Характеристики</a></li>
  5.     </ul>

и есть наши дивы (блоки с информацией)
CODE (html):
скопировать код в буфер обмена
  1. <div class="content" id="desc">Тут описание товара</div>
  2. <div class="content" id="reviews">Отзывы о товаре</div>
  3. <div class="content" id="options">Характеристики товара</div>

теперь напишем простенький обработчик нажатия на ссылку
код на jquery
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(function(){
  3.   $('.tab').click(function(){
  4.     //выгребаем содержимое ссылки и делим его на части с разделителем "#"
  5.     var href = $(this).attr('href').split('#');
  6.     //формируем id блока с контентом используя ту вторую половину (якорь)
  7.     var id = '#'+href[1];
  8.     //прячем все блоки с контентом
  9.     $('.content').css('display','none');
  10.     //отображаем нужный блок
  11.     $(id).css('display','block');
  12.     //снимаем со всех элементов li класс active
  13.     $('.tab').parent('li').removeClass('active');
  14.     //устанавливаем класс на текущий таб
  15.     $(this).parent('li').addClass('active');
  16.     //запрещаем переход по ссылке
  17.     return false;
  18.   });
  19. });
  20.  

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

 

Powered by ExBB FM 1.0 RC1