Прошу помощи с вертикальными табами

#1 20 августа 2014 в 14:15
Доброго времени суток. Набросал для наглядности здесь вот вертикальные табы jsbin.com/ticevuduceya/1/. Для редактирования страница jsbin.com/ticevuduceya/1/edit

Как видно, в коде подключены 2 скрипта, которые отвечают за табы. В одном из них нашел такую вот функцию:

  1. ;(function ($) {
  2. $.fn.tabify = function () {
  3. return this.each(function () {
  4. var tabs = $(this);
  5. $('.tab-content', tabs).hide();
  6. $('ul.tab-nav li:first', tabs).addClass('current');
  7. $('div:first', tabs).show();
  8. var tabLinks = $('ul.tab-nav li', tabs);
  9. $(tabLinks).click(function () {
  10. $(this).addClass('current').siblings().removeClass('current');
  11. $('.tab-content', tabs).hide();
  12. var activeTab = $(this).find('a').attr('href');
  13. $(activeTab).show();
  14. return false;
  15. });
  16. });
  17. };
  18. })(jQuery);
Во втором:

  1. tabs: function() {
  2. $(".module.module-tab").each(function(){
  3. $height = $(".tab-nav", this).outerHeight();
  4. if($height > 200) {
  5. $(".tab-content", this).css('min-height', $height);
  6. }
  7. });
  8. $(".module.module-tab").tabify();
  9. },
  10.  
  11. tabsDeepLink: function() {
  12. if($(window.location.hash).length > 0){
  13. $('a[href=' + window.location.hash + ']').click();
  14. $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
  15. }
  16. },
Как я понимаю, табы эти работают исходя из якоря в ссылке. А если в качестве якоря используется ссылка как в случае с лентой, то как быть? Что подправить необходимо или дописать, чтобы последняя третья вкладка работала? Подскажите, пожалуйста, кто разбирается с jQuery. Пробовал изменять по тайтлу
  1. var activeTab = $(this).find('a').attr('title');
не работает. Крутил, вертел, все безрезультатно. Возможно надо было изменять функцию tabsDeepLink так же, но как — не соображу. С квери мало знаком. Целую ночь возился, крутил, вертел, ничего не получилось.


Заранее благодарю.
#2 20 августа 2014 в 15:22
Почему вы вставляется /actions/my_friends? 4 строка в данном куске? если этот кусок отвечает за привязку вкладки к диву, который вы описываете ниже, вам надо в диве уже выводить вашу ленту, но не в ссылке.
  1.  
  2. <ul class="tab-nav">
  3. <li><a href="#tab-tab-0">{$LANG.PROFILE}</a></li>
  4. <li><a href="#tab-tab-1">Vertical Two</a></li>
  5. <li><a href="/actions/my_friends" title="upr_feed" class="title"><span>{$LANG.FEED}</span></a></li>
  6. </ul>
  7.  
  8.  
  9.  
#3 20 августа 2014 в 15:48
balooo, а что вставлять тогда необходимо? Смотрю по дефолту, для отображения вкладок используется следующий код:

  1. <ul id="tabs">
  2. <li><a href="#upr_profile"><span>{$LANG.PROFILE}</span></a></li>
  3. {if $myprofile && $cfg.sw_feed}
  4. <li><a href="/actions/my_friends" title="upr_feed"><span>{$LANG.FEED}</span></a></li>
  5. {/if}
  6. {if $cfg.sw_clubs}
  7. <li><a href="/clubs/by_user_{$usr.id}" title="upr_clubs"><span>{$LANG.CLUBS}</span></a></li>
  8. {/if}
  9. {if $cfg.sw_awards}
  10. <li><a href="#upr_awards"><span>{$LANG.AWARDS}</span></a></li>
  11. {/if}
  12. {foreach key=id item=plugin from=$plugins}
  13. <li><a href="{if $plugin.ajax_link}{$plugin.ajax_link}{else}#upr_{$plugin.name}{/if}" title="{$plugin.name}"><span>{$plugin.title}</span></a></li>
  14. {/foreach}
  15. </ul>
Для отображения каждой вкладки следующий:

  1. <div id="upr_profile"></div>
  2. {if $myprofile && $cfg.sw_feed}
  3. <div id="upr_feed">
  4.  
  5. </div>
  6. {/if}
  7.  
  8. {if $cfg.sw_clubs}
  9. <div id="upr_clubs">
  10.  
  11. </div>
  12. {/if}
Как еще можно к ним обращаться?
#4 20 августа 2014 в 18:28
Сделал в общем вот так вот…:

  1.  
  2. <div id="tab" class="module module-tab tab-0 ui vertical rounded default ">
  3.  
  4.  
  5. <ul class="tab-nav">
  6. <li href="#upr_profile" name="upr_profile">{$LANG.PROFILE}</li>
  7. {if $myprofile && $cfg.sw_feed}<li rel="/actions/my_friends" name="upr_feed">{$LANG.FEED}</li>{/if}
  8. {if $cfg.sw_clubs}
  9. <li rel="/clubs/by_user_{$usr.id}" name="tab-clubs">{$LANG.CLUBS}</li>
  10. {/if}
  11. {if $cfg.sw_awards}
  12. <li href="#upr_awards" name="upr_awards">{$LANG.AWARDS}</li>
  13. {/if}
  14. {foreach key=id item=plugin from=$plugins}
  15. <li rel="" name="{if $plugin.ajax_link}{$plugin.ajax_link}{else}#upr_{$plugin.name}{/if}">{$plugin.title}</li>
  16. {/foreach}
  17. </ul>
  18.  
  19. <div id="upr_profile" class="tab-content">
  20. <div class="usr_block_info">
  21. upr_profile
  22. </div>
  23. </div>
  24.  
  25. {if $myprofile && $cfg.sw_feed}
  26. <div id="upr_feed" class="tab-content">
  27.  
  28. </div>
  29.  
  30. {/if}
  31. {if $cfg.sw_clubs}
  32. <div id="tab-clubs" class="tab-content">
  33.  
  34. </div>
  35. {/if}
  36. {if $cfg.sw_awards}
  37. <div id="upr_awards" class="tab-content">
  38. <div class="awards_list_link">
  39. <a href="/users/awardslist.html">{$LANG.HOW_GET_AWARD}</a>
  40. </div>
  41. {if $usr.awards}
  42. {foreach key=tid item=aw from=$usr.awards}
  43. <div class="usr_award_block">
  44. <table style="width:100%; margin-bottom:2px;" cellspacing="2">
  45. <tr>
  46. <td class="usr_com_title"><strong>{$aw.title}</strong>
  47. {if $is_admin}
  48. [<a href="/users/delaward{$aw.id}.html">{$LANG.DELETE}</a>]
  49. {/if}
  50. </td>
  51. </tr>
  52. <tr>
  53. <td class="usr_com_body">
  54. <table border="0" cellpadding="5" cellspacing="0">
  55. <tr>
  56. <td valign="top"><img src="/images/users/awards/{$aw.imageurl}" border="0" alt="{$aw.title|escape:'html'}"/></td>
  57. <td valign="top">{$aw.description}
  58. <div class="usr_award_date">{$aw.pubdate}</div></td>
  59. </tr>
  60. </table>
  61. </td>
  62. </tr>
  63. </table>
  64. </div>
  65. {/foreach}
  66. {/if}
  67. </div>
  68. {/if}
  69.  
  70. {foreach key=id item=plugin from=$plugins}
  71. <div id="upr_{$plugin.name}">{$plugin.html}</div>
  72. {/foreach}
  73.  
  74. </div>
  75.  
Нашел нечто подобное в другой теме. Так же добавил в плагин скрипта несколько строк:

  1. ;(function ($) {
  2. $.fn.tabify = function () {
  3. return this.each(function () {
  4. var tabs = $(this);
  5. $('.tab-content', tabs).hide();
  6. $('ul.tab-nav li:first', tabs).addClass('current');
  7. $('div:first', tabs).show();
  8. var tabLinks = $('ul.tab-nav li', tabs);
  9. $(tabLinks).click(function () {
  10. $(this).addClass('current').siblings().removeClass('current');
  11. urlrel = $(this).attr("rel"); // ДОБАВЛЕНА
  12. todir = $(this).attr("name"); // ДОБАВЛЕНА
  13. $('.tab-content', tabs).show();
  14. var activeTab = $(this).find('li').attr('href'); //ИЗМЕНЕНА
  15. $(activeTab).show(); // ИЗМЕНЕНА
  16.  
  17. if (urlrel) { // Добавлено
  18.  
  19. $('#' + todir).html('Подождите. Загружаю данные...'); / Добавлено
  20. $('#' + todir).load(urlrel, {});/ Добавлено
  21. }/ Добавлено
  22. return false;
  23. });
  24. });
  25. };
  26. })(jQuery);
Изначально отображает все ок. Но при нажатии, скажем, на награды, открывает все 4 блока, только 1 блок и последний отображается, внутренние два — просто чистые блоки. Когда нажимать на ленту или клубы, то в них появляется необходимый контент. Собственно, еще нужна небольшая правка, чтобы все работало корректно…
#5 20 августа 2014 в 20:17
Залил на демку на хостинг…

Группе, к которой вы принадлежите, запрещено просматривать этот скрытый текст
#6 21 августа 2014 в 12:49
Вопрос решен. Тему не крою, т.к. может еще будут вопросы по другим вкладкам со временем.

UPDATE

На вкладке Клубы кнопка "Создать новый клуб" не работает. Выдает ошибку
  1. Uncaught ReferenceError: clubs is not defined
От чего может выскакивать данная ошибка?

UPDATE 2

Посоветовали добавить код
  1. {literal}
  2. <script type="text/javascript" src="/components/clubs/js/clubs.js"></script>
  3. {/literal}
Заработало. Но здесь же вопрос, почему этот скрипт не подключается, ведь все практически дефолтовское? (предположение, что через табы не подгружается подключение скрипта, возможно ли такое? и если да, то как подправить можно, чтобы подгружало?)
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.