Табы из свойств инфоблока в Битрикс

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

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

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

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

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

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

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

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

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


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

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


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

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

 <!--СКРИПТЫ ВКЛАДОК В СТАТЬЯХ-->  <!-- jQuery Plugin scripts -->
<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>

<!-- Slider Kit launch -->
<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"]?>:&nbsp;
<?if(is_array($arProperty["DISPLAY_VALUE"])):?>
<?=implode("&nbsp;/&nbsp;", $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("&nbsp;/&nbsp;", $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 подключайте либо в общем шаблоне сайта- либо в шаблоне компонента

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

Автор:

Назад в раздел
Выпадающее меню для Битрикс Вывести новости из раздела инфоблока Битрикс