0 Пользователей и 1 Гость просматривают эту тему.
  • 173 Ответов
  • 42902 Просмотров
*

ScratchUA

  • Осваиваюсь на форуме
  • 37
  • 26
И снова здравствуйте. Недавно встала задача вывести элементы материалов во вкладках, получить достаточную гибкость в шаблонах, и при этом не делать "злых" хаков на уровне ядра ZOO. Задача успешно решена и я хочу поделиться своим опытом с вами, предлагая данное пошаговое руководство.

Задача была такова: сохранить как стандартный вывод элементов материалов без вкладок, так и создать специальную позицию вывода для вывода элементов материалов во вкладках. Для примера взято приложение Blog, в котором вкладки необходимо вывести в полном материале.

1. Открываем файл media/zoo/applications/blog/templates/default/renderer/item/positions.xml и добавляем в нужную позицию вывода строку

Код: xml
<position name="tabbedcontent">Tabbed Content</position>

Я добавил вывод содержания во вкладках сразу после позиции Content и в итоге файл positions.xml стал выглядеть следующим образом:

Код: xml
<?xml version="1.0" encoding="utf-8"?>
<renderer>
<positions layout="full">
<position name="top">Top</position>
<position name="title">Title</position>
<position name="subtitle">Subtitle</position>
<position name="meta">Meta</position>
<position name="media">Media</position>
<position name="content">Content</position>
<position name="tabbedcontent">Tabbed Content</position>
<position name="taxonomy">Taxonomy</position>
<position name="bottom">Bottom</position>
<position name="related">Related</position>
<position name="author">Author</position>
</positions>
<positions layout="teaser">
<position name="title">Title</position>
<position name="subtitle">Subtitle</position>
<position name="meta">Meta</position>
<position name="media">Media</position>
<position name="content">Content</position>
<position name="links">Links</position>
</positions>
<positions layout="feed">
<position name="description">Description</position>
</positions>
</renderer>

Как результат проделанных манипуляций в конфигурации приложения Blog в разметке Full появится наша добавленная позиция для вывода



2. Теперь добавим обработчик позиции в файл разметки полного материала full.php

Открываем файл media/zoo/applications/blog/templates/default/renderer/item/full.php

Находим блок обработчика вывода позиции Content:

Код: php
	<?php if ($this->checkPosition('content')) : ?>
<div class="pos-content">
<?php echo $this->renderPosition('content', array('style' => 'block')); ?>
</div>
<?php endif; ?>

И сразу поле него добавляем обработчик вывода позиции Tabbed Content:

Код: php
	<?php if ($this->checkPosition('tabbedcontent')) : ?>
<div class="pos-content">
        <?php
        jimport('joomla.html.pane');
        $pane =& JPane::getInstance('tabs', array('startOffset'=>0));
        $pane_id = mt_rand();  // New unique ID for pane
        echo $pane->startPane( 'pane-'.$pane_id );
        echo $this->renderPosition('tabbedcontent', array('style' => 'tabbedblock'));
        echo $pane->endPane();
        ?>
</div>
<?php endif; ?>

В данном обработчике добавляется импорт стандартного класса Joomla JPane, создается экземпляр класса и добавлено открытие и закрытие панели вкладок.

3. Создаем новый файл tabbedblock.php, в него вставляем следующий код:

Код: php
<?php

// no direct access
defined('_JEXEC') or die('Restricted access');

// Get JPane instance
$pane =& JPane::getInstance('tabs', array('startOffset'=>0));

// create label
$label = '';
if (isset($params['showlabel']) && $params['showlabel']) {
$label .= ($params['altlabel'])? $params['altlabel'] : $element->getConfig()->get('name');
}

// create class attribute
$class = 'element element-'.$element->getElementType().' '.($params['first'] ? ' first' : '').($params['last'] ? ' last' : '');

$panel_id = mt_rand(); // New unique ID for panel
echo $pane->startPanel( $label, 'panel-'.$panel_id ); // Starting new tab with Label from ZOO element as tab header and unique ID
echo $element->render($params); // Rendering element
echo $pane->endPanel(); // Closing tab
?>

Сохраняем данный файл в кодировке UTF-8 и помещаем в папку:
components/com_zoo/renderer/element/

Немного поясню код.  Сначала мы получаем ссылку на уже созданный экземпляр объекта. Далее мы используем генератор случайных чисел для того, чтобы получить уникальный ID для вкладки. Собственно, это было также сделано и при открытия самой панели в файле full.php в п.2.
В примерах реализации вкладок для ZOO, которые гуляют по сети, никто особо не озадачивался идентификаторами создаваемых объектов, а просто списали код примера создания вкладок из API Joomla с одним стандартным идентификатором панели "pane". Это чревато конфликтами с другими приложениями, а также, если в будущем возникнет необходимость добавлять по несколько панелей вкладок и обращаться к ним -это вызовет неприятные последствия в виде дублей идентификаторов. Если отнестись очень критически к самому себе, то перед проверкой создания идентификатора объекта, стоило бы проверять наличие объекта с таким именем, однако я верю в генератор случайных чисел PHP и в данном случае не заморачивался с этим :)
Ну и далее, открываем вкладку, рендерим элемент и закрываем вкладку.

4. Потестируем вывод. В конфигурации приложения Blog добавим 3 поля Textarea и добавим их в разметку Full, не забыв при этом включить отображение метки элемента, которое у нас служит для вывода текста заголовка вкладки.



Далее создаем новый материал типа Article (либо редактируем уже существующий) и вводим любой текст в поля Вкладка 1, Вкладка 2, Вкладка 3.
Смотрим полный вид данного материала и в результате должно получиться что-то, похожее на это:



Можете пощелкать и убедиться, что вкладки переключаются и работают. Если не работает, внимательно проверьте все написанное выше шаг за шагом. Если все сделано правильно, то не исключено, что у вас конфликтуют Java-скрипты и надо разрешать конфликты.

5. Ну и собственно, финальный штрих - привести вкладки к тому виду, в котором мы их привыкли видеть...

Для этого открываем CSS файл приложения Blog: media/zoo/applications/blog/templates/default/assets/css/item.css, добавляем следующие стили для вкладок и сохраняем файл:

Код: css
dl.tabs {
   float: left;
   margin: 10px 0 -1px 0;
   z-index: 50;
}
dl.tabs dt {
   float: left;
   padding: 4px 10px;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-top: 1px solid #ccc;
   margin-left: 3px;
   background: #f0f0f0;
   color: #666;
}
dl.tabs dt.open {
   background: #F9F9F9;
   border-bottom: 1px solid #F9F9F9;
   z-index: 100;
   color: #000;
}
div.current {
   clear: both;
   border: 1px solid #ccc;
   padding: 10px 10px;
}
div.current dd {
   padding: 0;
   margin: 0;
}

Если мы обновим страничку, то мы увидим, что все стало на свои места - вкладки отображаются как мы привыкли их видеть, примерно так, как на картинке ниже. Любители красот, блеска и шика могут поизгаляться в CSS, чтобы было совсем красиво и соответствовало шаблону сайта ;)



В примере были показаны текстовые элементы, но все отлично работает со всем типами контента, включая картинки, галереи, видео и т.д.

И в заключение.

Перепечатка этого руководства в персональные SEO-гуаноблоги не разрешается (даже с указанием авторства), но можно (и даже нужно) размещать это руководство на любых публичных форумах по Joomla 8)

Всем пока, ушел ковырять "зуку" дальше :)
« Последнее редактирование: 25.07.2010, 18:26:34 от 4webspot »
*

delames

  • Осваиваюсь на форуме
  • 141
  • 10
  • Решаю программные вопросы за $ - Обращайтесь!
Описка походу.

echo $this->renderPosition('tabbedcontent', array('style' => 'tabbedcontent'));

Название файла должно соответствовать 'style'
*

ScratchUA

  • Осваиваюсь на форуме
  • 37
  • 26
Описка походу.
...
Название файла должно соответствовать 'style'

Ой да, спасибо огромное! Поправил в тексте имя самого файла с tabbedcontent.php на tabbedblock.php, как в действительности и есть :)

"3. Создаем новый файл tabbedblock.php, в него вставляем следующий код:"
*

derr84

  • Новичок
  • 7
  • 0
Пригодилось, спасибо!
*

delames

  • Осваиваюсь на форуме
  • 141
  • 10
  • Решаю программные вопросы за $ - Обращайтесь!
Ой да, спасибо огромное! Поправил в тексте имя самого файла с tabbedcontent.php на tabbedblock.php, как в действительности и есть :)

Не за что..
В действительности очень полезная вещь.. Всем рекомендую.
*

TAV

  • Захожу иногда
  • 18
  • 1
СПАСИБО ОГРОМНОЕ!  *DRINK*

Больше месяца шарился по инету в поисках этого решения.
*

Ed111111

  • Захожу иногда
  • 14
  • 0
Парни, а кто-нибудь пробовал оформить эти табы, как в YOOcarousel наппример в стиле Basic или Button?
*

deepdust

  • Новичок
  • 3
  • 0
Так, а в чом проблема-то была, коллеги? решение пркольное, чтобы прямо в зуу прописывать содержание табов. А ведь можно просто поставить поле - модуль Joomla и уже в него внедрить обычнй модуль с табами - хоть и от самого yoo, например, карусель ту же
*

delames

  • Осваиваюсь на форуме
  • 141
  • 10
  • Решаю программные вопросы за $ - Обращайтесь!
Так, а в чом проблема-то была, коллеги? решение пркольное, чтобы прямо в зуу прописывать содержание табов. А ведь можно просто поставить поле - модуль Joomla и уже в него внедрить обычнй модуль с табами - хоть и от самого yoo, например, карусель ту же

Это решения самое грамотное, так как поволяет на уровне компонента добавлять в табы все что нужно..

И я бы на вашем месте не злоупотреблял модулями от Ю.
*

CTPAHHuK

  • Администратор
  • 74
  • 37
респект за решение !  Плюсанул в карму :)
*

goga63

  • Осваиваюсь на форуме
  • 41
  • 1
Спасибо за классную доработку zoo.

Жаль только что плагин видео (AllVideos) в ней не работает   :(
или можно что-то придумать ?
*

ScratchUA

  • Осваиваюсь на форуме
  • 37
  • 26
Жаль только что плагин видео (AllVideos) в ней не работает   :(
или можно что-то придумать ?
Для элемента Textarea, в котором прописан код плагина, включено ли Load plugins (Загрузить плагины)?
*

goga63

  • Осваиваюсь на форуме
  • 41
  • 1
Конечно выключен был !
Спасибо огромное !
Сейчас все работает.
*

drserg

  • Осваиваюсь на форуме
  • 38
  • 1
а как сделать что бы в 1ой вкладке можно было всунуть 2-3 елемента?
так получается что елемент влезет каждый на отдельную влкадку....
*

drserg

  • Осваиваюсь на форуме
  • 38
  • 1
Все, вопрос отпадает, просто добавил вручную вкладку с нужным мне позишн)
*

MazdaY

  • Осваиваюсь на форуме
  • 56
  • 1
а как ПС индексирует вкладки, не было ли замечено проблем?
*

ScratchUA

  • Осваиваюсь на форуме
  • 37
  • 26
а как ПС индексирует вкладки, не было ли замечено проблем?
Не замечено вроде. Да и какие могут возникать проблемы, если все содержание вкладок находится в коде страницы? То есть роботу "кликать" не надо, чтобы проиндексировать содержимое - он получает содержание страницы целиком. Можете убедиться сами, просмотрев код страницы :)
*

serzh-n

  • Захожу иногда
  • 12
  • 0
Все, вопрос отпадает, просто добавил вручную вкладку с нужным мне позишн)
Если не сложно можно по подробней, как в одну вкладку добавить несколько элиментов.  спс.
*

MAXSET

  • Новичок
  • 5
  • 0
Если не сложно поясните что я сделал не так. Как и говорилось выше я все сделал согласно пуктам [quote
И снова здравствуйте. Недавно встала задача вывести элементы материалов во вкладках, получить достаточную гибкость в шаблонах, и при этом не делать "злых" хаков на уровне ядра ZOO. Задача успешно решена и я хочу поделиться своим опытом с вами, предлагая данное пошаговое руководство.

Задача была такова: сохранить как стандартный вывод элементов материалов без вкладок, так и создать специальную позицию вывода для вывода элементов материалов во вкладках. Для примера взято приложение Blog, в котором вкладки необходимо вывести в полном материале.

1. Открываем файл media/zoo/applications/blog/templates/default/renderer/item/positions.xml и добавляем в нужную позицию вывода строку

Код: xml
<position name="tabbedcontent">Tabbed Content</position>

Я добавил вывод содержания во вкладках сразу после позиции Content и в итоге файл positions.xml стал выглядеть следующим образом:

Код: xml
<?xml version="1.0" encoding="utf-8"?>
<renderer>
<positions layout="full">
<position name="top">Top</position>
<position name="title">Title</position>
<position name="subtitle">Subtitle</position>
<position name="meta">Meta</position>
<position name="media">Media</position>
<position name="content">Content</position>
<position name="tabbedcontent">Tabbed Content</position>
<position name="taxonomy">Taxonomy</position>
<position name="bottom">Bottom</position>
<position name="related">Related</position>
<position name="author">Author</position>
</positions>
<positions layout="teaser">
<position name="title">Title</position>
<position name="subtitle">Subtitle</position>
<position name="meta">Meta</position>
<position name="media">Media</position>
<position name="content">Content</position>
<position name="links">Links</position>
</positions>
<positions layout="feed">
<position name="description">Description</position>
</positions>
</renderer>

Как результат проделанных манипуляций в конфигурации приложения Blog в разметке Full появится наша добавленная позиция для вывода



2. Теперь добавим обработчик позиции в файл разметки полного материала full.php

Открываем файл media/zoo/applications/blog/templates/default/renderer/item/full.php

Находим блок обработчика вывода позиции Content:

Код: php
	<?php if ($this->checkPosition('content')) : ?>
<div class="pos-content">
<?php echo $this->renderPosition('content', array('style' => 'block')); ?>
</div>
<?php endif; ?>

И сразу поле него добавляем обработчик вывода позиции Tabbed Content:

Код: php
	<?php if ($this->checkPosition('tabbedcontent')) : ?>
<div class="pos-content">
        <?php
        jimport('joomla.html.pane');
        $pane =& JPane::getInstance('tabs', array('startOffset'=>0));
        $pane_id = mt_rand();  // New unique ID for pane
        echo $pane->startPane( 'pane-'.$pane_id );
        echo $this->renderPosition('tabbedcontent', array('style' => 'tabbedblock'));
        echo $pane->endPane();
        ?>
</div>
<?php endif; ?>

В данном обработчике добавляется импорт стандартного класса Joomla JPane, создается экземпляр класса и добавлено открытие и закрытие панели вкладок.

3. Создаем новый файл tabbedblock.php, в него вставляем следующий код:

Код: php
<?php

// no direct access
defined('_JEXEC') or die('Restricted access');

// Get JPane instance
$pane =& JPane::getInstance('tabs', array('startOffset'=>0));

// create label
$label = '';
if (isset($params['showlabel']) && $params['showlabel']) {
$label .= ($params['altlabel'])? $params['altlabel'] : $element->getConfig()->get('name');
}

// create class attribute
$class = 'element element-'.$element->getElementType().' '.($params['first'] ? ' first' : '').($params['last'] ? ' last' : '');

$panel_id = mt_rand(); // New unique ID for panel
echo $pane->startPanel( $label, 'panel-'.$panel_id ); // Starting new tab with Label from ZOO element as tab header and unique ID
echo $element->render($params); // Rendering element
echo $pane->endPanel(); // Closing tab
?>

Сохраняем данный файл в кодировке UTF-8 и помещаем в папку:
components/com_zoo/renderer/element/

Немного поясню код.  Сначала мы получаем ссылку на уже созданный экземпляр объекта. Далее мы используем генератор случайных чисел для того, чтобы получить уникальный ID для вкладки. Собственно, это было также сделано и при открытия самой панели в файле full.php в п.2.
В примерах реализации вкладок для ZOO, которые гуляют по сети, никто особо не озадачивался идентификаторами создаваемых объектов, а просто списали код примера создания вкладок из API Joomla с одним стандартным идентификатором панели "pane". Это чревато конфликтами с другими приложениями, а также, если в будущем возникнет необходимость добавлять по несколько панелей вкладок и обращаться к ним -это вызовет неприятные последствия в виде дублей идентификаторов. Если отнестись очень критически к самому себе, то перед проверкой создания идентификатора объекта, стоило бы проверять наличие объекта с таким именем, однако я верю в генератор случайных чисел PHP и в данном случае не заморачивался с этим :)
Ну и далее, открываем вкладку, рендерим элемент и закрываем вкладку.

4. Потестируем вывод. В конфигурации приложения Blog добавим 3 поля Textarea и добавим их в разметку Full, не забыв при этом включить отображение метки элемента, которое у нас служит для вывода текста заголовка вкладки.



Далее создаем новый материал типа Article (либо редактируем уже существующий) и вводим любой текст в поля Вкладка 1, Вкладка 2, Вкладка 3.
Смотрим полный вид данного материала и в результате должно получиться что-то, похожее на это:



Можете пощелкать и убедиться, что вкладки переключаются и работают. Если не работает, внимательно проверьте все написанное выше шаг за шагом. Если все сделано правильно, то не исключено, что у вас конфликтуют Java-скрипты и надо разрешать конфликты.

5. Ну и собственно, финальный штрих - привести вкладки к тому виду, в котором мы их привыкли видеть...

Для этого открываем CSS файл приложения Blog: media/zoo/applications/blog/templates/default/assets/css/item.css, добавляем следующие стили для вкладок и сохраняем файл:

Код: css
dl.tabs {
   float: left;
   margin: 10px 0 -1px 0;
   z-index: 50;
}
dl.tabs dt {
   float: left;
   padding: 4px 10px;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-top: 1px solid #ccc;
   margin-left: 3px;
   background: #f0f0f0;
   color: #666;
}
dl.tabs dt.open {
   background: #F9F9F9;
   border-bottom: 1px solid #F9F9F9;
   z-index: 100;
   color: #000;
}
div.current {
   clear: both;
   border: 1px solid #ccc;
   padding: 10px 10px;
}
div.current dd {
   padding: 0;
   margin: 0;
}

Если мы обновим страничку, то мы увидим, что все стало на свои места - вкладки отображаются как мы привыкли их видеть, примерно так, как на картинке ниже. Любители красот, блеска и шика могут поизгаляться в CSS, чтобы было совсем красиво и соответствовало шаблону сайта ;)



В примере были показаны текстовые элементы, но все отлично работает со всем типами контента, включая картинки, галереи, видео и т.д.

И в заключение.

Перепечатка этого руководства в персональные SEO-гуаноблоги не разрешается (даже с указанием авторства), но можно (и даже нужно) размещать это руководство на любых публичных форумах по Joomla 8)

Всем пока, ушел ковырять "зуку" дальше :)
"3. Создаем новый файл tabbedblock.php, в него вставляем следующий код:"

[/quote]


Но у меня не появилось добавление вкладок в настройках каталога. Только поле.Не пойму в чем дело поясните.
*

MAXSET

  • Новичок
  • 5
  • 0
разобрался. Спасибо
*

serzh-n

  • Захожу иногда
  • 12
  • 0
Доброго времени суток.
Может кто поможет.
- Как в одну вкладку добавить несколько элиментов?
- Кто нибудь пробывал добавить комментарии как отдельную вкладку?
спс. за помощь.
*

wolf_kiev

  • Захожу иногда
  • 16
  • 0
Cпасибо :) всё работает. Очень пригодилось, плюсик поставил ;)
*

TAV

  • Захожу иногда
  • 18
  • 1
- Кто нибудь пробывал добавить комментарии как отдельную вкладку?
спс. за помощь.
+1
*

drserg

  • Осваиваюсь на форуме
  • 38
  • 1
вот к примеру как получилось у меня: http://bestmovieshack.com/sdasd/боевик-1/avatar-1/index.html
там и реализовал вставку в вкладку нескольких елементов.
*

Greendumb

  • Захожу иногда
  • 20
  • 0
Цитировать
- Как в одну вкладку добавить несколько элементов?
и мне объясните пожалуйста!


Ну, Господа! Очень нужно! Подскажите решение!
« Последнее редактирование: 03.11.2010, 09:46:28 от Greendumb »
*

MetaSpirit

  • Живу я здесь
  • 1379
  • 106
  • R.A.S.Lab[.org]
вот к примеру как получилось у меня: http://bestmovieshack.com/sdasd/боевик-1/avatar-1/index.html
там и реализовал вставку в вкладку нескольких елементов.
Подскажите, пожалуйста, Ваше решение для вставки в одну вкладку нескольких элементов.
R.A.S.Lab[.org]: ZOOvirtue - корзина для ZOO, Яндекс.Карты для ZOO, ItemPanes - табы для ZOO, ZOOlendar - календарь для ZOO  и др.
Создание расширений для YOOtheme ZOO на заказ. Становитесь в очередь.
*

Greendumb

  • Захожу иногда
  • 20
  • 0
Мда, игнор полный (
*

kpk17

  • Давно я тут
  • 259
  • 2
неполучается добавить текст во вкладки.... вкладки щелкают, но там один и тот же текст.
подскажите пожалуйста как быть?
может дело в версии 2.2.3?
« Последнее редактирование: 21.11.2010, 22:22:04 от kpk17 »
*

omsk_mail

  • Осваиваюсь на форуме
  • 92
  • 0
  • Нет смысла быть скромным,если ты лучший
Подскажите пожалуйста как добавить (выделено красным)

Это правится и добавляется в файле full каталог продукции?
Нет смысла быть скромным,если ты лучший
*

omsk_mail

  • Осваиваюсь на форуме
  • 92
  • 0
  • Нет смысла быть скромным,если ты лучший
спасибо! разобрался
Нет смысла быть скромным,если ты лучший
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Размещение галереи из Widgetkit по центру в материале

Автор Insane

Ответов: 7
Просмотров: 5354
Последний ответ 19.09.2016, 12:28:10
от rudkovskiy
Вывести содержимое itema в материале Joomla

Автор intuitive

Ответов: 0
Просмотров: 320
Последний ответ 18.12.2014, 16:56:38
от intuitive
Не работают вкладки zoo каталога в Опере.

Автор desss

Ответов: 3
Просмотров: 815
Последний ответ 30.06.2012, 07:56:38
от desss
Как создать второй Related Items?

Автор jer

Ответов: 0
Просмотров: 321
Последний ответ 05.04.2012, 20:28:15
от jer
[Решено] Gallery widgetkit 1.0.1 в материале картинка не в Lightbox`e

Автор ANton9999

Ответов: 2
Просмотров: 1072
Последний ответ 29.03.2012, 23:31:02
от viteg