Расширенные возможности работы с вкладками

Расширенные возможности работы с вкладками

Просмотр созданных личных кабинетов преподавателей показывает, что при использовании такого удобного инструмента как вкладки со стандартным кодом приводит к большим размерам страницы по вертикали, что не совсем удобно при просмотре – приходится просматривать не нужный материал для поиска информации. Инструмент Вкладка с расширенным кодом позволяет организовать страницу в компактной форме, используя вложенные вкладки.

Использование вложенных вкладок (на примере кабинета ) выглядит следующим образом.

Вид страницы после открытия кабинета

Как видно, вся объемная информация при входе в кабинет отображается всего двумя вкладками (откройте существующий кабинет и сравните).

При выборе направления 240100 открываются вложенные вкладки:

На рисунке открыты:

вкладка Направление 240100 – первый (главный) уровень;

Бакалавры – второй уровень;

Методические материалы – третий уровень.

Внутри каждой вкладки может находиться текст, ссылки и другая информация.

Количество главных и вложенных вкладок может быть любым.

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

Оформляется представленный образец следующим кодом:

{tab-ex= | green | active}

{tab-ex=Направление 240100}

{tab-ex_sub1=Бакалавры}

{tab-ex_sub1_sub1=Методические материалы}

ИЭФ-32 План лекций и лабораторных работ по дисциплине "Химия и физика ВМС"

Список учебников и методических материалов для изучения курса "Химия и физика ВМС"

{tab-ex_sub1_sub1=Результаты тестирования}

Результаты тестирования бакалавров группы ИЭФ-32

{/tabs}

{tab-ex_sub1=Магистры}

{tab-ex_sub1_sub1=Методические материалы}

{tab-ex_sub1_sub1=Результаты тестирования}

{tab-ex_sub1_sub1=Лекции}

{/tabs}

{tab-ex_sub1=Заочники}

Ваш текст

{/tabs}

{tab-ex=Специальность 240502}

[TEXT]

{/tabs}

Рассмотрим основные элементы кода.

{tab-ex= | green | active} – как уже отмечалось, активная (active) пустая вкладка зеленого цвета (green); можно установить другой цвет: red – красный, blue – голубой, orange – оранжевый, grey – серый. Эти цвета можно установить для любой вкладки, например, {tab-ex_sub1=Бакалавры | red}.

Код вкладки Направление 240100 с вложенными вкладками:

{tab-ex=Направление 240100}

{tab-ex_sub1=Бакалавры}

{tab-ex_sub1_sub1=Методические материалы}

ИЭФ-32 План лекций и лабораторных работ по дисциплине "Химия и физика ВМС"

Список учебников и методических материалов для изучения курса "Химия и физика ВМС"

{tab-ex_sub1_sub1=Результаты тестирования}

Результаты тестирования бакалавров группы ИЭФ-32

{/tabs}

Вложенные вкладки второго уровня оформляются тэгом

{tab-ex_sub1=Заголовок}

третьего уровня тэгом {tab-ex_sub1_sub1=Заголовок} и т. д.

Как проще всего сделать вкладки?

Выделите весь представленный выше код от {tab-ex= | green | active} до {/tabs}.

Скопируйте его в буфер обмена (Ctrl-C).

Установите курсор в нужное место на странице и вставьте код из буфера обмена (Ctrl – V).

Замените заголовки вкладок на свои. В каждую вкладку поместите информацию (текст, ссылки и т. п.).

Не нужные вкладки удалите, удалив их тэги.

Если нужно добавить новую главную вкладку, выделите код, например, {tab-ex=Направление 240100}, поставьте курсор в нужное место, например, после строки [TEXT] главной вкладки Специальность 240502 и замените заголовок, например, на НИРС.

В результате мы получим:

Если нужно добавить вложенную вкладку, например, Лекции внутрь вкладки Бакалавры:

· Копируем тэг {tab-ex_sub1_sub1=Результаты тестирования} после текста Результаты тестирования бакалавров группы ИЭФ-32.

· Заменяем заголовок на Лекции.

· Сохраняем.

В результате получим:

Переделать уже готовый кабинет в принципе не так сложно: просто удалите установленные тэги вкладок и расставьте новые в нужные места, проставьте заголовки.

Совет:

1. Заголовки вкладок делайте короткими, иначе при большом числе вкладок они не войдут в одну строку и будут располагаться на двух строках (или более), что не очень красиво.

2. Не злоупотребляйте расцветкой заголовков и текста – будет рябить в глазах читателя.

3. Не применяйте крупных шрифтов в тексте – это все-таки не реклама!