Создать вкладки (tabs) из свойств элемента инфоблока
Как создать вкладки из свойств элементов инфоблока компонента «Новости» в Битрикс?
Решение:
Для начала необходимо скачать файл со скриптом для работы вкладок https://github.com/jellekralt/Responsive-Tabs, установить jQuery. Разместить компонент «Новости» на странице сайта и скопировать его в свой шаблон для дальнейшего редактирования.
В шаблоне компонента, вывести созданные вами свойства инфоблока, которые будут названиями этих вкладок:
Решение:
Для начала необходимо скачать файл со скриптом для работы вкладок https://github.com/jellekralt/Responsive-Tabs, установить jQuery. Разместить компонент «Новости» на странице сайта и скопировать его в свой шаблон для дальнейшего редактирования.
В шаблоне компонента, вывести созданные вами свойства инфоблока, которые будут названиями этих вкладок:
<ul> <?foreach($arResult["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?> <?if($pid == "analytics" && "!PROPERTY_ANALYTICS"):?> <li> <a href="#tab-1"><?=$arProperty["NAME"];?></a> </li> <?elseif ($pid == "design" && "!PROPERTY_DESIGN"):?> <li> <a href="#tab-2"><?=$arProperty["NAME"];?></a> </li> <?elseif ($pid == "programming" && "!PROPERTY_PROGRAMMING"):?> <li><a href="#tab-3"><?=$arProperty["NAME"];?></a> </li> <?elseif ($pid == "testing" && "!PROPERTY_TESTING"):?> <li><a href="#tab-4"><?=$arProperty["NAME"];?></a> </li> <?elseif ($pid == "testing" && "!PROPERTY_TESTING"):?><li> <a href="#tab-4"><?=$arProperty["NAME"];?></a> </li> <?elseif ($pid == "support" && "!PROPERTY_SUPPORT"):?><li> <a href="#tab-4"><?=$arProperty["NAME"];?></a></li> <?endif;?> <?endforeach;?> </ul>Ниже добавить вывод значений из этих же свойств:
<?foreach($arResult["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?> <?if($pid == "analytics" && "!PROPERTY_ANALYTICS"):?> <div id="tab-1"> <?=$arProperty["DISPLAY_VALUE"];?> </div> <?elseif ($pid == "design" && "!PROPERTY_DESIGN"):?> <div id="tab-2"> <?=$arProperty["DISPLAY_VALUE"];?> </div> <?elseif ($pid == "programming" && "!PROPERTY_PROGRAMMING"):?> <div id="tab-3"> <?=$arProperty["DISPLAY_VALUE"];?> </div> <?elseif ($pid == "testing" && "!PROPERTY_TESTING"):?> <div id="tab-4"> <?=$arProperty["DISPLAY_VALUE"];?> </div> <?elseif ($pid == "support" && "!PROPERTY_SUPPORT"):?> <div id="tab-4"> <?=$arProperty["DISPLAY_VALUE"];?> </div> <?endif;?> <?endforeach;?>И подключить скрипт с названием блока (у меня #portfolio-tabs), в котором лежат данные:
$('#portfolio-tabs').responsiveTabs({ startCollapsed: 'accordion' });
18.05.2017

Есть вопросы?
Если у вас возникли вопросы по настройке какого-либо функционала CMS «Битрикс» или нужна техническая поддержка вашего сайта, то пишите мне:
- skype: wit_and_wis
- hellomelanina.ru
- и еще Viber, WhatsApp....
Рекомендую почитать :
- Получить название свойства из типа Справочник
- Выводим название элемента из свойства в компоненте "Новости" Решение: У каждого элемента инфоблока создано свойство типа «Справочник» («METKA_...
- Вывод текущего года на PHP
- Как вывести текущий год или период от ... года до ...? Решение: Часто, при создании сайтов в footer выводится "текущий год" или "год создания...
- Сортировка товаров в каталоге Битрикса на Ajax
- Как сортировать товары каталога по цене, названию, новинкам без перезагрузки страницы? Решение: У комплексного компонента bitrix:catalog в наст...
- Уведомление о cookies на сайт
- Добавляем уведомление о cookies от Яндекса на сайт Решение: Подключаем библиотеку js-cookie для работы с cookie: <script type="text/jav...
- Отзывы к товарам в Битрикс
- Как самостоятельно добавить отзывы к товарам каталога используя готовый модуль и API Битрикс. Решение: Самый простой способ добавить отзывы к ...
- ReferenceError: Can't find variable: JCCatalogElement
- Исправление ошибки в Safari "В карточке товара JCCatalogElement не найден". Решение: Данная проблема может возникнуть в файле /bitrix...