Делаем вкладки (Tabs) для Modx - mootools + Ditto

Когда то, очень давно, понадобились вкладки. Погуглил и нашёл решение: http://wiki.modxcms.com/index.php/Tabbed_content
Оригинал предлагает в качестве контента вкладок использовать чанки ... переделал на tv, попробовал, не понравилось.
 

Порылся ещё . Результат http://www.barelyfitz.com/projects/tabber/
Отличная библиотечка . Переделал на использование tv . На выходе получил то, что можно посмотреть на страничке с примером гостевой книги
 

Но не без ложки дёгтя, точнее двух.
Во первых много ручной работы - если вкладок разное количество на разных страницах, во вторых редактору сайта трудно объяснить как всё это наполнять - выбивается из общей идеологии.
 

Когда возился с FAQ на базе Ditto пришла идея сделать вкладки поженив Ditto и mootools.
(вместо mootools можно использовать и jquery и prototype - дело вкуса)

Итак приступим.
1) Создаём произвольный документ  и делаем его контейнером.
2) Создаём в нём дочерние документы - здесь будет хранится содержимое вкладок.
3) Создаём чанк {{ditto_tabs}} со следующим содержимым 

  1.  
  2. <div name="blocktabs1" class="blocktabs">
  3.     <ul name="tabs" class="tabs">
  4.         [!Ditto? &id=`tabs` &display=`all` &parents=`[*id*]` &showPublishedOnly=`1` &tpl=`tabs_tpl` &sortDir=`ASC` !]
  5.     </ul>
  6.     <div name="tabs_content" class="tabcontent">
  7.         [!Ditto? &id=`tabs_content` &display=`all` &parents=`[*id*]`  &showPublishedOnly=`1` &tpl=`tabs_content_tpl` &sortDir=`ASC` !]
  8.     </div>
  9. </div>
  10.  

4) Создаём чанк {{tabs_tpl}} - шаблон для вкладок 
  1.  
  2. <li name="tab[+id+]" id="tabitem[+id+]" class="tabitem" >[+pagetitle+]</li>
  3.  
5) Создаём чанк {{tabs_content_tpl}} - шаблон содержимого вкладок 
  1.  
  2. <div id="tab[+id+]" style="display:none;">
  3. <h3>[+longtitle+]</h3>
  4. <div class="tcontent">[+content+]</div>
  5. </div>
  6.  
6)Добавляем стили 
  1.  
  2. .blocktabs{ display:block; padding:0px; margin:0px; }
  3. .tabs{ display:block; padding:0px; margin:0px; padding-left:20px; }
  4.  
  5. .tabitem{
  6. display:inline;
  7. padding:5px;
  8. padding-bottom:0px;
  9. margin:3px;
  10. border: solid 1px blue;
  11. border-bottom: 0px;
  12. background: #aaaaaa;
  13. cursor: pointer;
  14. }
  15.  
  16. .tabcontent{background: #eeeeff;}
  17.  
7) Добавляем в header вызов скрипта 
  1.  
  2. <script type="text/javascript" src="/assets/js/mootools.js" ></script>
  3. <script type="text/javascript" src="/assets/js/mootools-more.js" ></script>
  4.  
  5. <script type="text/javascript" charset="utf-8" >
  6.  
  7. function deactivatetab(tab){
  8.     $(tab).setStyle('padding-bottom','0px');
  9.     $(tab).setStyle('background-color','#aaaaaa');
  10.  
  11.     var tabname = $(tab).get('name');
  12.     var tabobj = $(document.body).getElementById(tabname);
  13. //    $(tabobj).setStyle('display', 'none');   /* если не используем Fx просто прячем блок */  
  14. //  Эффекты можно отключить или изменить - просто комментируем две следующие строки
  15.    var myfx = new Fx.Slide(tabobj);      
  16.     myfx.hide();
  17. }
  18.  
  19. function activatetab(tab){
  20.     $(tab).setStyle('padding-bottom','1px');
  21.     $(tab).setStyle('background-color','#eeeeff');
  22.     var mytab = $(tab).get('name');
  23.     $(mytab).setStyle('display', 'block');
  24. //  Эффекты можно отключить или изменить - просто комментируем две следующие строки	
  25.     var myfx = new Fx.Slide(mytab); 
  26.     myfx.slideIn();
  27. }
  28.  
  29. function tabclick(tabobj){
  30. //читаем имя текущего блока вкладок
  31. var parent = tabobj.getParent('div[name^=blocktabs]');
  32. // узнаём активную ранее вкладку
  33. var obj = $(parent).get('name');
  34. var oldtabid = Cookie.read(obj);
  35.  
  36. var oldobj = $(parent).getElementById(oldtabid);
  37.     deactivatetab(oldobj);
  38.     activatetab(tabobj);
  39.     Cookie.write(obj, $(tabobj).get('id') );
  40. }
  41.  
  42. function tabinit(){
  43. //ищем все блоки вкладок 
  44.    var blockname = $(document.body).getElements('div[name^=blocktabs]');
  45. //ищем все вкладки внутри блоков
  46.   blockname.each(function(bel){
  47.     var tabs = $(bel).getElements('li[name^=tab]');
  48. //добавляем обработку клика для каждой вкладки
  49.        tabs.each(function(el){ el.addEvent('click', function(e){
  50.         e.stop();  
  51.         tabclick(el);
  52.        });
  53.   });
  54.  
  55. //читаем куки для блока вкладок
  56.     var TabCookie = Cookie.read($(bel).get('name'));
  57.     if(TabCookie == null){
  58. // если не установлены указываем активную первую вкладку
  59.     TabCookie = $(tabs[0]).get('id');
  60.     Cookie.write($(bel).get('name'), $(tabs[0]).get('id') );
  61.     }
  62. // делаем вкладку активной 
  63.     tobj = $(bel).getElementById(TabCookie);
  64.     activatetab(tobj);
  65. });
  66. }
  67.  
  68. window.addEvent('domready', tabinit);
  69. </script>
  70.  

Это всё.
Вставляем {{ditto_tabs}} в том месте где хотелось бы увидеть вкладки.
Cookie нужны для того, чтобы запомнить активную . Это нужно, например, если в одной из вкладок форма для отправки сообщений. При отправки данных формы, страница обновится и посетитель не увидит результат, который может быть не успешным.

Код скрипта корявый , но так уж вышло .

Пример:

  • Первая вкладка
  • Tab 2
  • Культ карго
  • Модель общества

Последнее изменение документа: 22 Сентябрь 2009
Den[is]
Posts: 2
Comment
Re: Делаем вкладки (Tabs) для Modx - mootools + Ditto
Reply #3 on : Чтв Апрель 15, 2010, 11:19:11
Лагает в IE + при быстром переключении вкладок, содержимое старых остается.
admin
Posts: 1
Comment
Re: Делаем вкладки (Tabs) для Modx - mootools + Ditto
Reply #2 on : Пнд Апрель 05, 2010, 14:20:32
Да вроде все знают уже ))
http://mootools.net/
Игорь
Posts: 2
Comment
Re: Делаем вкладки (Tabs) для Modx - mootools + Ditto
Reply #1 on : Пнд Апрель 05, 2010, 13:52:41
прикольно сделано ) только вопрос: откуда брать mootools-more.js?

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.