Табы из свойств инфоблока в Битрикс, заметки на сайте camouf.ru

 13586| 15 Автор: ()

Думаю все знают что такое табы или вкладки. Расскажу как на их основе вывести свойства инфоблока Битрикс в детальную новость. С практической точки зрения в них можно вывести например: адреса, ссылки на источники материалов, похожие материалы...да в общем все душе, что угодно.

Как будут работать табы в инфоблоке новостей

Итак в итоге мы получим примерно вот такой внешний вид вкладок/табов, без графических наворотов и оформленные полностью на css-3, однако ни что не помешает дооформить их на свой вкус- разукрасить и обвесить плюшками и вензелями.

Табы в новостях Битрикс

Наполнить их не составит труда, при добавлении элемента инфоблока (новости, статьи , публикации), просто заполняются соответсвующие свойства данного инфоблока, свойства которые остались не заполненными просто не выводятся- то есть не появляется даже пустая вкладка без содержимого.

Табы в новостях Битрикс

Делаем табы из свойств инфоблока

Приступаем: Для начала создадим свойства в нужном инфоблоке, что бы не усложнять выберем Тип- HTML/текст, ничего сверхестественного с ним не производим, просто создаем и сохраняем. PS: В табах выведется любой тип свойства.

Табы в свойствах Битрикс

Далее переходим в публичную часть, воводим инфоблок с помощью компонента новостей (кто не знает как рекомендую ознакомиться с этой публикацией) и в настройке детального просмотра маркируем вышесозданные свойства, что бы они вывелись в детальное описание

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

Качаем архив с необходимыми js файлами распаковываем и закидываем в папку шаблона сайта PS: В принципе можно и в шаблон компанента новостейю но в папку с шаблоном сайта практичнее, так как эти библиотеки могут понадобится и в другом месте сайта.

Подключаем библиотеки и скрипт в основном шаблоне сайта добавив код

<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/external/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/external/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/sliderkit/jquery.sliderkit.1.9.2.pack.js"></script>


<script type="text/javascript">
$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility

// Tabs > Standard
$(".tabs-standard").sliderkit({
auto:false,
tabs:true,
mousewheel:true,
circular:true,
panelfx:"none"
});
// Tabs > No height
$(".tabs-noheight").sliderkit({
auto:false,
tabs:true,
freeheight:true,
circular:true
});
// Tabs > Imbricated
$(".tabs-imbricate").sliderkit({
cssprefix:"customtabs",
auto:false,
tabs:true
});
// Carousel > Demo #2
$(".carousel-demo2").sliderkit({
auto:false,
shownavitems:4,
scroll:1,
mousewheel:true,
circular:true
});
// Pagination
$(".pagination-basic").sliderkit({
auto:false,
tabs:true,
freeheight:true
});

// Button : Make the standard tabs menu slide
var myStandardTabs = $(".tabs-standard").data("sliderkit");
$("#tabs-standard-slide").click(
function(){
// Applies only once
if($(".sliderkit-panels-wrapper",myStandardTabs.domObj).size() == 0){
// Set the transition effect to "sliding"
myStandardTabs.options.panelfx = "sliding";
// The sliding effect requires a wrapper around the panels
myStandardTabs._wrapPanels();
}

// Stops the click
return false;
}
);
});
</script>

В принципе, скрипт можно спрятать во внешний файл и положить в папку js шаблона сайта.

Далее возвращаемся к нашим новостям и копируем шаблон компонента, в папку основного шаблона сайта. Открываем для редактирования шаблон news.detail - шаблон детальной новости и находим кусок кода отвечающий за вывод свойств инфоблока, выглядет по умолчанию так:

<?foreach($arResult["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>

<?=$arProperty["NAME"]?>: 
<?if(is_array($arProperty["DISPLAY_VALUE"])):?>
<?=implode(" / ", $arProperty["DISPLAY_VALUE"]);?>
<?else:?>
<?=$arProperty["DISPLAY_VALUE"];?>
<?endif?>
<br />
<?endforeach;?>

И заменяем на такой (мои подсказки по коду можно удалить, написал их, чтобы было понятно что мы творим.):

<div class="sliderkit tabs-standard">

<div class="sliderkit-nav">
<div class="sliderkit-nav-clip">
<ul>
/*Выводим названия свойств, они будут вкладками*/
<?foreach ($arResult["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
<li><a href="tabs.html#" title="[link title]"><?=$arProperty["NAME"]?></a></li>
<?endforeach;?>
</ul>
</div>
</div>

<div class="sliderkit-panels">
/*Выводим содержимое свойств, это будет телом таба соответсвующего вкладке*/
<?foreach ($arResult["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
<div class="sliderkit-panel">
<div class="sliderkit-news">
<?if(is_array($arProperty["DISPLAY_VALUE"])):?>
<?=implode(" / ", $arProperty["DISPLAY_VALUE"]);?>
<?else:?>
<?=$arProperty["DISPLAY_VALUE"];?>
<?endif?>
</div>
</div>
<?endforeach;?>
</div>
</div>

Сохраняем и открываем для редактирования style.css этого же шаблона детального просмотра новости и дабавляем в него следующие стили. Собственно это и есть оформление табов/вкладок с закруглениями и бордером, именно здесь Вы сможете дооформить их под требования своего дизайна сайта.

/* Обнуления списка вкладок */
.sliderkit .sliderkit-nav-clip{position:relative;overflow:hidden;margin:0 auto;}
.sliderkit .sliderkit-nav-clip ul{position:relative;left:0;top:0;list-style:none;margin:0;padding:0;}
.sliderkit .sliderkit-nav-clip ul li{float:left;}
.sliderkit .sliderkit-nav-clip ul li a{display:block;overflow:hidden;}

.tabs-standard{width:100%;}

/* Навигация по вкладкам */
.tabs-standard .sliderkit-nav{position:relative;width:100%;height:27px;text-align:left;}
.tabs-standard .sliderkit-nav-clip{margin:0;}
.tabs-standard .sliderkit-nav-clip li{height:27px;padding:0px;margin:0 2px 0 0;}

.tabs-standard .sliderkit-nav-clip li,
.tabs-standard .sliderkit-nav-clip li a
{float:left; margin-left:10px; position:relative; z-index:40;}

.tabs-standard .sliderkit-nav-clip li a
{height:18px;margin:0;padding:6px 15px; font-size:13px;
color:#346699;text-transform:uppercase;
text-decoration:none;}

.tabs-standard .sliderkit-nav-clip li.sliderkit-selected
{position:relative; z-index:35;
background:#fff; border:1px solid #ccc; border-bottom:none;
border-top-left-radius:4px;border-top-right-radius:4px;}

.tabs-standard .sliderkit-nav-clip li.sliderkit-selected a
{color:#ff6005;height:17px;}

/* Панели вкладок */
.tabs-standard .sliderkit-panels
{width:97%;overflow:hidden;padding:10px;
border:1px solid #ccc;background:#fff;
border-radius:4px;}

.tabs-standard .sliderkit-panel{width:97%;background:#fff;}

Вот в общем-то и все, вкладки в новостях Битрикс из свойств инфоблока готовы. Успехов

Добавлено. Более сложное но гибкое решение:

Чтобы разделить табы логически, на уровне вывода можно воспользоваться такой конструкцией (все комментарии в коде)

<div class="tabs_it">

<div class="sliderkit tabs-standard">

<div class="sliderkit-nav">
<div class="sliderkit-nav-clip">
<ul>

<? if ($arResult["DISPLAY_PROPERTIES"]['MORE_PHOTO']){?>
<li><a href="tabs.html#" title="[link title]">
<?=$arResult['DISPLAY_PROPERTIES']['MORE_PHOTO']['NAME']?>
</a></li>
<?}?>

<? if ($arResult["DISPLAY_PROPERTIES"]['код_свойства-1']){?>
<li><a href="tabs.html#" title="[link title]">
<?=$arResult['DISPLAY_PROPERTIES']['код_свойства-1']['NAME']?>
</a></li>
<?}?>

<? if ($arResult["DISPLAY_PROPERTIES"]['код_свойства-2']){?>
<li><a href="tabs.html#" title="[link title]">
<?=$arResult['DISPLAY_PROPERTIES']['код_свойства-2']['NAME']?>
</a></li>
<?}?>

<? if ($arResult["DISPLAY_PROPERTIES"]['код_свойства-3']){?>
<li><a href="tabs.html#" title="[link title]">
<?=$arResult['DISPLAY_PROPERTIES']['код_свойства-3']['NAME']?>
</a></li>
<?}?>

</ul>
</div>
</div>

<div class="sliderkit-panels">

<div class="sliderkit-panel">
<div class="sliderkit-news">

<?
$LINE_ELEMENT_COUNT = 2;
if(count($arResult["MORE_PHOTO"])>0):?>
<?foreach($arResult["MORE_PHOTO"] as $PHOTO):?>
<? $file = CFile::ResizeImageGet($PHOTO, array('width'=>220, 'height'=>'150'), BX_RESIZE_IMAGE_EXACT, true); ?>

<div class="photo_tabit"> // Здесь мы вывели фотографии (свойство файл изображение) с кодом MORE_PHOTO не забудте вписать в result_modifier.php

<a href="<?=$PHOTO["SRC"]?>" name="more_photo" class='highslide' onclick="return hs.expand(this)" alt="<?=(strlen($PHOTO["DESCRIPTION"]) > 0 ? $PHOTO["DESCRIPTION"] : $arResult["NAME"])?>">
<img border="0" src="<?=$file["src"]?>" width="<?=$file["width"]?>" height="<?=$file["height"]?>"
alt="<?=(strlen($PHOTO["DESCRIPTION"]) > 0 ? $PHOTO["DESCRIPTION"] : $arResult["NAME"])?>"/>
</a>
</div>
<?endforeach?>
<?endif?>

</div>
</div>

<div class="sliderkit-panel"> // дальше простые свойства типа HTML/текст
<div class="sliderkit-news">
<?echo $arResult['DISPLAY_PROPERTIES']['код_свойства-1']['DISPLAY_VALUE'];?>
</div>
</div>

<div class="sliderkit-panel">
<div class="sliderkit-news">
<?echo $arResult['DISPLAY_PROPERTIES']['код_свойства-2']['DISPLAY_VALUE'];?>
</div>
</div>

<div class="sliderkit-panel">
<div class="sliderkit-news">
<?echo $arResult['DISPLAY_PROPERTIES']['код_свойства-3']['DISPLAY_VALUE'];?>
</div>
</div>

</div>
</div>

</div>

Допускаю что со сложным разобраться сложнее, однако главное как следует вчитаться и проникнуться- тогда без проблем выведете в табы любые свойства Битрикс. К фотографиям указано подключение hightslide, иначе нафиг бы они вообще сдались. Скрипты hightslide подключайте либо в общем шаблоне сайта- либо в шаблоне компонента

Предыдущая запись Следующая запись

Еще в записках: Вывести компонент новостей на страницу в Битрикс Дополнительные картинки в новостях Битрикс, почти фотогалерея. Звездочки в рейтинге Битрикс статей и новостей Как вставить социальные кнопки в детальное описание новости битрикс Как вывести свойства инфоблока по отдельности и немного плюшек не в тему Материалы по теме в новостях Битрикс, с картинкой, названием и текстом анонса.

Все заметки

Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей

Зарегистрироваться Войти

Напомнить пароль

Быстрая регистрация через соц.сеть:

Гость сайта20.02.2014
Здравствуйте, можно ли вместо новостей вывести табы: новинки, распродажа?

Михаил Базаров20.02.2014

Цитата
Гость сайта пишет: Здравствуйте, можно ли вместо новостей вывести табы: новинки, распродажа?

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

Ильсур25.06.2014
Здравствуйте! Попробовал сделать табы как вы описали полностью. на catalog.element но что то не так пошло. они ка бы отображаются но описание каждого вылезло вмести Добавлено позже --------- Все получилось вместо шаблона сайта код положил в шаблон компонента

Ильсур25.06.2014
Здравствуйте! Подскажите как быть с [*]<?=$arProperty["NAME"]?></li> при наведении на вкладку отображается [link title]

Ильсур25.06.2014

Здравствуйте!
Подскажите как быть с

Код
<li><a href="tabs.html#" title="[link title]"><?=$arProperty["NAME"]?></a></li>

при наведении на вкладку отображается [link title]

Михаил Базаров28.06.2014

Цитата

Ильсур пишет:
Здравствуйте!
Подскажите как быть с

Код
<li><a href="tabs.html#" title="[link title]"><?=$arProperty["NAME"]?></a></li>

при наведении на вкладку отображается [link title]

А что вы хотите вместо этого вывести?
Если название пункта то

Код
<li><a href="tabs.html#" title="<?=$arProperty["NAME"]?>"><?=$arProperty["NAME"]?></a></li>

[CODE][/CODE]

Равиль24.07.2014
Как отключить перелистывание слайдов прокруткой колесиком мышки?

Равиль24.07.2014

Цитата
Равиль пишет: Как отключить перелистывание слайдов прокруткой колесиком мышки?

Сам разобрался, просто отключил jquery-1.3.1.min.js

Денис10.08.2014
Заметил небольшой косяк. Если заполнить таб 1 и 3 а второй оставить пустым, то 3 третий таб появляется, но текста в нем нет. НО если потом заполнить второй таб, то в третьем текст автоматически появляется. Косяк табов не большой.

Алекс27.04.2015

Помогите разобраться с выводом первый вариант сделал быстро но выводятся дубли, то есть добавляем 3 вкладки получаем 6.

Код из news.detail => template.php отличается от вашего.
Версия 15 упр. сайтом.
Вот кусок кода.

Код

   <?foreach($arResult["FIELDS"] as $code=>$value):
      if ('PREVIEW_PICTURE' == $code || 'DETAIL_PICTURE' == $code)
      {
         ?><?=GetMessage("IBLOCK_FIELD_".$code)?>:&nbsp;<?
         if (!empty($value) && is_array($value))
         {
            ?><img border="0" src="<?=$value["SRC"]?>" width="<?=$value["WIDTH"]?>" height="<?=$value["HEIGHT"]?>"><?
         }
      }
      else
      {
         ?><?=GetMessage("IBLOCK_FIELD_".$code)?>:&nbsp;<?=$value;?><?
      }
      ?><br />
   <?endforeach;
      foreach($arResult["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
      <?=$arProperty["NAME"]?>:&nbsp;
      <?if(is_array($arProperty["DISPLAY_VALUE"])):?>
         <?=implode("&nbsp;/&nbsp;", $arProperty["DISPLAY_VALUE"]);?>
      <?else:?>
         <?=$arProperty["DISPLAY_VALUE"];?>
      <?endif?>

Статья понравилась

но хотелось бы более подробное описание (инструкцию) по второму варианту. Или объясните откуда брать эти свойства "код_свойства"

Спасибо.

Valeri23.06.2015
Здравствуйте, извините что пишу не совсем по теме.... Я столкнулась с проблемой уже реализованных табов... Открываются одновременно 1 и 2 таб, нужно чтобы открывался 1, а битрикс назначает active второму((((( но не на всех стрницах, на некоторых все отрывается ка надо... http://itmages.ru/image/view/2663465/263d9621 http://itmages.ru/image/view/2663467/4413fde2 может ктонибудь знает как решить эту проблему?

гость12.04.2016
Здравствуйте подскажите пожалуйста почему у меня при выборе вкладок открывается не соответствующая вкладка, а переходит на страницу назад к списку новостей? вот код <!-- Начало табов из свойств --> <div class="sliderkit tabs-standard"> <div class="sliderkit-nav"> <div class="sliderkit-nav-clip"> <?foreach ($arResult["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?> "><?=$arProperty["NAME"]?></li> <?endforeach;?> </div> </div> <div class="sliderkit-panels"> <?foreach ($arResult["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?> <div class="sliderkit-panel"> <div class="sliderkit-news"> <?if(is_array($arProperty["DISPLAY_VALUE"][IMG]):?> <?=implode(" / ", $arProperty["DISPLAY_VALUE"][IMG];?> <?else:?> <?=$arProperty["DISPLAY_VALUE"];?> <?endif?> </div> </div> <?endforeach;?> </div> </div> <!-- Конец табов из свойств -->

Михаил Базаров12.04.2016

Цитата

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


....

Наверное не подключили скрипты, или подключили но не правильно прописали путь к ним. Или все подключили правильно, но скрипты конфликтуют с другими- которые используете на сайте.

В общем, ищите ошибки в js - чаще всего из за них не работает

гость13.04.2016

Цитата

Михаил Базаров пишет:
гость написал:
Здравствуйте подскажите пожалуйста почему у меня при выборе вкладок открывается не соответствующая вкладка, а переходит на страницу назад к списку новостей?
вот код

....

Наверное не подключили скрипты, или подключили но не правильно прописали путь к ним. Или все подключили правильно, но скрипты конфликтуют с другими- которые используете на сайте.

В общем, ищите ошибки в js - чаще всего из за них не работает

спасибо большое получилось

гость25.04.2016
Здравствуйте Михаил! У меня возникла проблема со скриптом jquery-1.7.min.js. когда я его подключаю, то слайдер начинает работать, но тогда не работают вкладки (Табы) он начинает конфликтовать с другими скриптами, которые отвечают за отображение вкладок (табы). подскажите как можно исправить данную ошибку чтобы работал и слайдер и отображались вкладки (табы)?