Думаю все знают что такое табы или вкладки. Расскажу как на их основе вывести свойства инфоблока Битрикс в детальную новость. С практической точки зрения в них можно вывести например: адреса, ссылки на источники материалов, похожие материалы...да в общем все душе, что угодно.
Итак в итоге мы получим примерно вот такой внешний вид вкладок/табов, без графических наворотов и оформленные полностью на css-3, однако ни что не помешает дооформить их на свой вкус- разукрасить и обвесить плюшками и вензелями.
Наполнить их не составит труда, при добавлении элемента инфоблока (новости, статьи , публикации), просто заполняются соответсвующие свойства данного инфоблока, свойства которые остались не заполненными просто не выводятся- то есть не появляется даже пустая вкладка без содержимого.
Приступаем: Для начала создадим свойства в нужном инфоблоке, что бы не усложнять выберем Тип- HTML/текст, ничего сверхестественного с ним не производим, просто создаем и сохраняем. PS: В табах выведется любой тип свойства.
Далее переходим в публичную часть, воводим инфоблок с помощью компонента новостей (кто не знает как рекомендую ознакомиться с этой публикацией) и в настройке детального просмотра маркируем вышесозданные свойства, что бы они вывелись в детальное описание
Качаем архив с необходимыми js файлами распаковываем и закидываем в папку шаблона сайта PS: В принципе можно и в шаблон компанента новостейю но в папку с шаблоном сайта практичнее, так как эти библиотеки могут понадобится и в другом месте сайта.
Подключаем библиотеки и скрипт в основном шаблоне сайта добавив код
В принципе, скрипт можно спрятать во внешний файл и положить в папку js шаблона сайта.
Далее возвращаемся к нашим новостям и копируем шаблон компонента, в папку основного шаблона сайта. Открываем для редактирования шаблон news.detail - шаблон детальной новости и находим кусок кода отвечающий за вывод свойств инфоблока, выглядет по умолчанию так:
И заменяем на такой (мои подсказки по коду можно удалить, написал их, чтобы было понятно что мы творим.):
Сохраняем и открываем для редактирования style.css этого же шаблона детального просмотра новости и дабавляем в него следующие стили. Собственно это и есть оформление табов/вкладок с закруглениями и бордером, именно здесь Вы сможете дооформить их под требования своего дизайна сайта.
.tabs-standard .sliderkit-panel{width:97%;background:#fff;}
Вот в общем-то и все, вкладки в новостях Битрикс из свойств инфоблока готовы. Успехов
Чтобы разделить табы логически, на уровне вывода можно воспользоваться такой конструкцией (все комментарии в коде)
Допускаю что со сложным разобраться сложнее, однако главное как следует вчитаться и проникнуться- тогда без проблем выведете в табы любые свойства Битрикс. К фотографиям указано подключение hightslide, иначе нафиг бы они вообще сдались. Скрипты hightslide подключайте либо в общем шаблоне сайта- либо в шаблоне компонента
![]()
Гость сайта
|
Здравствуйте, можно ли вместо новостей вывести табы: новинки, распродажа?
|
![]()
Михаил Базаров
|
||
|
||
![]()
Ильсур
|
Здравствуйте!
Попробовал сделать табы как вы описали полностью. на catalog.element но что то не так пошло. они ка бы отображаются но описание каждого вылезло вмести Добавлено позже --------- Все получилось вместо шаблона сайта код положил в шаблон компонента |
![]()
Ильсур
|
Здравствуйте!
Подскажите как быть с [*] при наведении на вкладку отображается [link title] |
![]()
Ильсур
|
||
Здравствуйте!
Подскажите как быть с
при наведении на вкладку отображается [link title] |
||
![]()
Михаил Базаров
|
||||||
Если название пункта то
|
||||||
![]()
Равиль
|
Как отключить перелистывание слайдов прокруткой колесиком мышки?
|
![]()
Равиль
|
||
|
||
![]()
Денис
|
Заметил небольшой косяк. Если заполнить таб 1 и 3 а второй оставить пустым, то 3 третий таб появляется, но текста в нем нет. НО если потом заполнить второй таб, то в третьем текст автоматически появляется. Косяк табов не большой.
|
![]()
Алекс
|
||
Помогите разобраться с выводом первый вариант сделал быстро но выводятся дубли, то есть добавляем 3 вкладки получаем 6.
Код из news.detail => template.php отличается от вашего. Версия 15 упр. сайтом. Вот кусок кода.
Статья понравилась ![]() Спасибо. |
||
![]()
Valeri
|
Здравствуйте, извините что пишу не совсем по теме.... Я столкнулась с проблемой уже реализованных табов...
Открываются одновременно 1 и 2 таб, нужно чтобы открывался 1, а битрикс назначает active второму((((( но не на всех стрницах, на некоторых все отрывается ка надо... может ктонибудь знает как решить эту проблему? |
![]()
гость
|
Здравствуйте подскажите пожалуйста почему у меня при выборе вкладок открывается не соответствующая вкладка, а переходит на страницу назад к списку новостей?
вот код <!-- Начало табов из свойств --> <div class="sliderkit tabs-standard"> <div class="sliderkit-nav"> <div class="sliderkit-nav-clip">
</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 - чаще всего из за них не работает |
||
![]()
гость
|
||
|
||
![]()
гость
|
Здравствуйте Михаил!
У меня возникла проблема со скриптом jquery-1.7.min.js. когда я его подключаю, то слайдер начинает работать, но тогда не работают вкладки (Табы) он начинает конфликтовать с другими скриптами, которые отвечают за отображение вкладок (табы). подскажите как можно исправить данную ошибку чтобы работал и слайдер и отображались вкладки (табы)? |
На нем, уже много видеоуроков по 1С-Битрикс. Как одиночные видео так и серии видеоуроков Перейти на канал
Совсем скоро выйдет видеокурс по разработке доски объявлений с мобильным приложением. Подписывайтесь и будьте в курсе: