Вкладки для Платформы LP

Мультитабс (вкладки) для Платформы LP можно настроить после приобретения исходных кодов по ссылке Скрипты для PlatformaLP.

Мультитабс — это скрипт для Платформы LP при помощи которого можно создавать табы (вкладки) любой уровни вложенности. Отличительной особенностью скрипта является то, что вся работа ведется в самом редакторе штатными средствами. Нет необходимости лезть в исходный код и править что-либо. Но в то же время скрипт позволяет тонко настроить CSS-стили для вкладок.

Еще одной интересной особенностью обладает этот скрипт: кнопки переключения табов могут дублироваться и находиться в любом месте в рамках группы вкладок. Мультитабс несмотря на свою простоту является мощным инструментом для создания самых разных комбинаций.

Что можно сделать при помощи этого скрипта:

• менять изображение и характеристики товара при клике по миниатюрам (например, iPhone черный, белый, серый и т.д.);
• можно добавить для карточки товара чекбокс (галочка), которая включает/отключает дополнительную услугу (например, галочка «Страхование +500 руб.»);
• добавлять разделы «Отзывы», «Характеристики» и другие в карточках товаров;
• создать рубрику Вопрос-ответ;
• составить пошаговый навигатор (например, презентация или вопрос-ответ с кнопкой «Далее»);
• применить для составления веток с решениями вопросов в зависимости от ситуаций (см. пример на рисунке ниже);
• и многое другое…

Пример схемы с ветвлениями. Использование Мультитабс для составления веток с уточняющими вопросами. Т.е. пошаговое решение.

Файлы body.txt и head.txt откройте в текстовом редакторе Блокнот.

Многоуровневые вкладки можно копировать, добавлять друг в друга, форматировать стили, а главное, делать это при помощи конструктора без каких-либо HTML-виджетов.

Вот пример самой простой вкладки:

Синий — это родительский блок.
Зеленый — блок кнопок переключения.
Красный — вкладки, которые содержат некоторый контент.

А вот так он выглядит на опубликованной странице

Ниже вы найдете еще примеры. А теперь давайте приступим к настройке скрипта.

Настройка

Исходный код

Скопируйте в BODY исходный код из файла body.txt

Теперь скопируйте в HEAD исходный код из файла head.txt (не обязательно).

Здесь вы можете менять стили активных кнопок и других элементов переключения между вкладками.

Редактор

Добавьте элемент Блок в конструкторе и пропишите для него class=ptabs. Это будет у нас родительский блок (синий — прим., рамка не обязательна, но она упрощает восприятие при сборке вкладок).

Добавьте новый Блок (красный) внутрь родительского (синего). Это будет ваша первая вкладка. Пропишите для него class=»alltabs tab1″, где tab1 соответствует номеру вкладки (tab2, tab3, … tabN).

Теперь можете добавлять любые элементы внутрь нашей вкладки. Аналогично добавьте все остальные вкладки.

Сейчас добавьте Кнопки для переключения между табами. Для каждой кнопки необходимо прописать id и class. Задайте class=btab, а id=tab1 для первой кнопки, tab2 — для второй, tab3 — для третьей и т.д. Идентификаторы (id) вкладок могут начинаться сначала (tab1, tab2, …).

В параметрах кнопок переключите «Действие кнопки» в положение «Ничего не делать».

Еще раз отмечу — кнопки переключения табов могут находиться в любом месте родительского Блока (синего).

Они могут повторяться внутри самих вкладок.

Могут находиться в родительском Блоке (синем) и служить едиными переключателями между вкладками.

Или вы можете сделать пошаговый опросник.

Все зависит только от ваших фантазий.

Примеры

В архиве вы найдете 2 файла с готовыми примерами example1.txt и example2.txt.

example1.txt — простейший пример для демонстрации структуры вкладок.
example2.txt — образец сложной карточки товара с велосипедами.

Добавьте новую секцию в редакторе. Зажмите SHIFT и кликните по значку «Стиль». Скопируйте исходный код из файла example1.txt или example2.txt в открытое модальное окно заменив содержимый код (json строку). После этого сохраните его.

В результате получите готовую секцию с примерами.

Update

Обновление от 15 мая 2017

Как настроить?

В конструкторе добавляете HTML-код и прописываете в него ваши элементы.

Главное правильно указать селекторы class=”btab” и id=”tab + {номер_вкладки}”.

Выпадающий список
Допустим нужен выпадающий список. Тогда наш исходный код будет следующим:

Скрипт сам разберется с типом элемента будь это кнопка, выпадающий список, блок div или еще что-то. Главное, чтобы для этих элементов были применимы события onclick и onchange (для select).

Маркированный список
Следующий пример демонстрирует маркированный список:

Обновление от 26 мая 2017

Обновление от 6 октября 2018