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

12219  |  15

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

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

Итак в итоге мы получим примерно вот такой внешний вид вкладок/табов, без графических наворотов и оформленные полностью на 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 подключайте либо в общем шаблоне сайта- либо в шаблоне компонента

Расскажи друзьям-то:
Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей
Зарегистрироваться Войти Напомнить пароль
Или войти через социальную сеть:
Гость сайта
Здравствуйте, можно ли вместо новостей вывести табы: новинки, распродажа?
Михаил Базаров
Цитата
Гость сайта пишет:
Здравствуйте, можно ли вместо новостей вывести табы: новинки, распродажа?
Все что угодно можно вывести, главное грамотно сверстать. А область применения данного способа ни как не ограничена
Ильсур
Здравствуйте!
Попробовал сделать табы как вы описали полностью. на catalog.element но что то не так пошло. они ка бы отображаются но описание каждого вылезло вмести

Добавлено позже ---------

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

при наведении на вкладку отображается [link title]
Ильсур
Здравствуйте!
Подскажите как быть с

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


при наведении на вкладку отображается [link title]
Михаил Базаров
Цитата
Ильсур пишет:
Здравствуйте!
Подскажите как быть с
Код
 <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]
Равиль
Как отключить перелистывание слайдов прокруткой колесиком мышки?
Равиль
Цитата
Равиль пишет:
Как отключить перелистывание слайдов прокруткой колесиком мышки?
Сам разобрался, просто отключил jquery-1.3.1.min.js
Денис
Заметил небольшой косяк. Если заполнить таб 1 и 3 а второй оставить пустым, то 3 третий таб появляется, но текста в нем нет. НО если потом заполнить второй таб, то в третьем текст автоматически появляется. Косяк табов не большой.
Алекс
Помогите разобраться с выводом первый вариант сделал быстро но выводятся дубли, то есть добавляем 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?>


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

Спасибо.
Valeri
Здравствуйте, извините что пишу не совсем по теме.... Я столкнулась с проблемой уже реализованных табов...
Открываются одновременно 1 и 2 таб, нужно чтобы открывался 1, а битрикс назначает active второму((((( но не на всех стрницах, на некоторых все отрывается ка надо...

http://itmages.ru/image/view/2663465/263d9621

http://itmages.ru/image/view/2663467/4413fde2
может ктонибудь знает как решить эту проблему?
гость
Здравствуйте подскажите пожалуйста почему у меня при выборе вкладок открывается не соответствующая вкладка, а переходит на страницу назад к списку новостей?
вот код

<!-- Начало табов из свойств -->
<div class="sliderkit tabs-standard">
<div class="sliderkit-nav">
<div class="sliderkit-nav-clip">
</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>
<!-- Конец табов из свойств -->
Михаил Базаров
Цитата
гость написал:
Здравствуйте подскажите пожалуйста почему у меня при выборе вкладок открывается не соответствующая вкладка, а переходит на страницу назад к списку новостей?
вот код

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

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


....

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

В общем, ищите ошибки в js - чаще всего из за них не работает
спасибо большое получилось
гость
Здравствуйте Михаил!

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

© 2011—2016 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.
Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

Информация размещенная на сайте, не является публичной офертой. Политика конфеденциальности
x
Как к Вам обращаться? *
Ваша электронная почта: *
Доп. материалы (логотип, тех. задание):
 
Обзор
Текст сообщения: