Як працюватимуть таби в інфоблоці новин
Отже в результаті ми отримаємо приблизно такий зовнішній вигляд вкладок/табів, без графічних наворотів і оформлені повністю на css-3, проте ні що не завадить дооформити їх на свій смак-прикрасити і обвісити плюшками і вензелями.
Робимо таби із властивостей інфоблоку
Приступаємо: Для початку створимо властивості в потрібному інфоблоці, щоб не ускладнювати виберемо Тип-HTML/текст, нічого надприродного з ним не виробляємо, просто створюємо і зберігаємо. PS: У табах виведеться будь-який тип якості.
Качаємо архів з необхідними js файлами розпаковуємо і закидаємо в папку шаблону сайту PS: В принципі можна і в шаблон компанії новину але в папку з шаблоном сайту практичніше, так як ці бібліотеки можуть знадобитися і в іншому місці сайту.
Підключаємо бібліотеки та скрипт в основному шаблоні сайту додавши код
В принципі, скрипт можна заховати у зовнішній файл та покласти в папку js шаблону сайту.
Далі повертаємось до наших новин та копіюємо шаблон компонента, до папки основного шаблону сайту. Відкриваємо для редагування шаблон news.detail - шаблон детальної новини та знаходимо шматок коду, що відповідає за виведення властивостей інфоблоку, виглядає за замовчуванням так:
І замінюємо на такий (мої підказки за кодом можна видалити, написав їх, щоб було зрозуміло, що ми творимо.):
/* Навігація за вкладками */ .tabs-standard .sliderkit-nav .tabs-standard .sliderkit-nav-clip .tabs-standard .sliderkit-nav-clip li
.tabs-standard .sliderkit-nav-clip li, .tabs-standard .sliderkit-nav-clip li a
.tabs-standard .sliderkit-nav-clip li color:#346699;text-transform:uppercase; text-decoration:none;>
.tabs-standard .sliderkit-nav-clip li.sliderkit-selected 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
/* Панелі вкладок */ .tabs-standard .sliderkit-panels border:1px solid #ccc;background:#fff; border-radius:4px;>
Ось і все, вкладки в новинах Бітрікс з властивостей інфоблоку готові. Успіхів