Создаём «Tabs» на Joomla своими руками

Если по-простому, то Tabs это вкладки. Каждый разработчик сайтов создаёт эти вкладки по разным причинам: удобно для посетителей, экономия места на сайте, часть дизайна. Работа их заключается в том, чтобы показывать контент той вкладки, которая в данный момент является активной. Казалось бы, простой элемент дизайна, но он может принести головную боль тем, кто ни разу не создавал подобное. Ведь для правильной работы Табов необходимо учитывать много нюансов, о которых мы, конечно же, поговорим. Теперь о том, как же создавать их своими руками.

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

Создание вкладок на Joomla

1 способ - Tabs на HTML

Сейчас создадим полностью рабочие вкладки при помощи всего двух файлов, при этом они будут обладать красивой анимацией. Создайте на своём компьютере папку с любым названием, в неё мы положим наши файлы. Открываем программу Notepad++ и сразу нажимаем Ctrl+Alt+S. В открывшемся окне пишем имя «mysite» и выбираем тип файла «Hyper Text Markup Language» (если кто не знает это HTML), после нажимаем Сохранить.

Tabs на HTML

Теперь у нас открыт пустой html файл, в который нужно вставит вот этот код:

HTML код:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Tabs</title>
  5.     <link rel="stylesheet" type="text/css" href="style.css">
  6.     <meta charset="utf-8" />
  7. </head>
  8. <body>
  9.  
  10. <!------------ Вкладки ------------>
  11. <div>
  12.     <ul>
  13.         <li rel="jm-tabs1">Новости</li>
  14.         <li rel="jm-tabs2">Популярное</li>
  15.         <li rel="jm-tabs3">Комментарии</li>
  16.     </ul>
  17.  
  18.     <div>
  19.         <!-- Новости -->
  20.             <div id="jm-tabs1">
  21.                 <ul>
  22.                     Свежие новости на сайте
  23.                 </ul>
  24.             </div>
  25.         <!-- Популярное -->
  26.             <div id="jm-tabs2">
  27.                 <ul>
  28.                     Популярные посты
  29.                 </ul>
  30.             </div>
  31.         <!-- Комментарии -->
  32.             <div id="jm-tabs3">
  33.                 <ul>
  34.                     Последние комментарии
  35.                 </ul>
  36.             </div>
  37.     </div>
  38. </div>
  39. <!-- Подключаем скрипты -->
  40. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  41. <script type="text/javascript">
  42.     $(".jm-tabs-content").hide();
  43.     $(".jm-tabs-content:first").show();
  44.     $(".jm-tabs-menu li").click(function() {
  45.     $(".jm-tabs-content").hide();
  46.     var activeTab = $(this).attr("rel");
  47.     $("#"+activeTab).fadeIn(1000); // скорость анимации
  48.     $(".jm-tabs-menu li").removeClass("active");
  49.     $(this).addClass("active");
  50.     });
  51. </script>
  52. <!------------ Вкладки ------------>
  53.  
  54. </body>
  55. </html>

Сохраняем и создадим следующий файл. Эта будет таблица стилей для нашего html. Не обязательно закрывать первую вкладку, просто нажимаем Ctrl+N (открыть новый документ) и повторяем Ctrl+Alt+S (сохранить как). Пишем в названии «style», а тип «Cascade Style Sheets File» (CSS) и сохраняем в туже папку, что и mysite.html.

Таблица стилей для Вкладок

Пишем туда эти строчки и снова сохраняем:

CSS код:
  1. /*стили для вкладок*/
  2. .jm-tabs-widget {
  3.     position: relative;
  4.     width: 600px;
  5. }
  6. .jm-tabs-widget .jm-tabs-menu {
  7.     height: 40px;
  8.     list-style:none;
  9.     margin: 0;
  10.     padding: 0;
  11. }
  12. .jm-tabs-widget .jm-tabs-menu li {
  13.     background:#457DAB;
  14.     color: #fff;
  15.     cursor: pointer;
  16.     display: block;
  17.     float: left;
  18.     font: 400 14px/40px "open sans",sans-serif;
  19.     height: 40px;
  20.     overflow: hidden;
  21.     position: relative;
  22.     text-align: center;
  23.     transition: all 0.5s ease 0s;
  24.     width: 33.3%;
  25. }
  26. .jm-tabs-widget .jm-tabs-menu li:hover {
  27.     background-color: #2c6290;
  28. }
  29. .jm-tabs-widget .jm-tabs-menu li.active {
  30.     background:#f6f6f6;
  31.     color: #0d4371;
  32. }
  33. .jm-tabs-widget .jm-tabs-contener {
  34.     background: #f6f6f6;
  35.     border-bottom: 3px solid #ddd;
  36.     clear: both;
  37.     float: left;
  38.     width: 100%;
  39. }
  40. .jm-tabs-widget .jm-tabs-content {
  41.     display: none;
  42.     padding: 10px;
  43. }
  44. .jm-tabs-content ul{
  45.     margin: 0;
  46.     padding: 10px;
  47. }
  48. .jm-tabs-content a{
  49.     color: #666;
  50.     font: 500 14px arial;
  51.     text-decoration: none;
  52. }

Остаётся свернуть программу, открыть нашу папку с этими файлами и запустить mysite.html в браузере. Результат рабочих вкладок можно посмотреть здесь. Как вы видите, открылась страница с рабочими Табами. При желании, весь текст и стили можно поменять в созданных файлах, так же доступен выбор скорости анимации.

HTML вкладки на сайте Joomla

Данный способ подходит для любого сайта, при этом, неважно используете ли вы какой либо движок или всё пишите с нуля. Единственное что стоит упомянуть, так это подключённый JQuery. Он расположен на стороннем ресурсе и загружается браузером оттуда. Если вы пытаетесь использовать данный код в своём шаблоне Joomla, а вкладки не переключаются после нажатия, то это конфликт между установленным скриптом и тем, что грузится с другого сервера. Эта единственная проблема, которая может встретиться на пути. Выход здесь один - найти в скриптах одинаковые значения и функции, а потом отредактировать их.

2 способ - Tabs на PHP

Для того чтобы сделать всё правильно без ошибок, мы будем использоваться стандартный шаблон «protostar» от Joomla 3.5. Он выставлен по умолчанию после установки самой Joomla, находится в директории …/templates/protostar. В данном шаблоне подключен «bootstrap.framework», поэтому проделывать первый способ на нём бесполезно, вкладки просто не будут работать из-за конфликта скриптов. Это происходит потому что, Bootstrap уже имеет свой внутренний набор JavaScript, в него так же вход готовые HTML и CSS шаблоны оформления для быстрого создания всевозможных элементов на сайте. Bootstrap - это вроде библиотеки для разработчиков. В «protostar» она предлагает создать только основные элементы без сложных стилей в CSS файле. Теперь вы должны понимать, либо первый способ, либо второй. Использовать оба сразу не возможно, так как у обоих есть одинаковые функции, написанные в JavaScript-ах. Стоит так же сказать, что Bootstrap уже подключён во многих других шаблонах Joomla, это необходимо учитывать. Теперь к делу…

Так как мы уже имеем в нашем шаблоне «protostar» необходимый набор, то создать вкладки будет проще. Открываем файл index.php и в любом месте между тегами <body></body> вставляем вот этот код:

PHP код:
  1. <?php echo JHtml::_('bootstrap.startTabSet', 'myTab', array('active' => '1'));?>
  2.  
  3.     <?php echo JHtml::_('bootstrap.addTab', 'myTab', '1', 'Вкладка 1'); ?>
  4.     <p>Текст для вкладки 1</p>
  5.     <?php echo JHtml::_('bootstrap.endTab');?>
  6.  
  7.     <?php echo JHtml::_('bootstrap.addTab', 'myTab', '2', 'Вкладка 2'); ?>
  8.     <p>Текст для вкладки 2</p>
  9.     <?php echo JHtml::_('bootstrap.endTab');?>
  10.  
  11. <?php echo JHtml::_('bootstrap.endTabSet'); ?>

В качестве демонстрации, я предпочёл разместить наши Табы сразу под логотипом. Вот что получилось:

Tabs на PHP

Стоит учитывать, что этот код будет работать только в том случае, если наша Joomla будет версии 3.1 или выше.

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

Tabs на PHP с позициями под модули

1. Первое что мы сделаем, это добавим две позиции под модули. Открываем файл templateDetails.xml расположенный в папке «protostar» …/templates/protostar/templateDetails.xml.

Tabs на PHP с позициями под модули

После этого нам нужно вставить это:

XML код:
  1. <position>Tabs1</position>
  2. <position>Tabs2</position>

Так как показано на следующем изображении:

Добавление позиций в templateDetails.xml

Теперь загружаем templateDetails.xml обратно на сервер с заменой.

2. Дальше нам потребуется открыть файл template.css, который находится в директории …/templates/protostar/css/template.css.

Добавлений стиля для вкладок

В него добавим всего один не большой элемент, эта рамка для всей области вкладок, только для того чтобы выделить объект. Опускаемся в самый низ файла и вписываем туда это:

CSS код:
  1. .Tabs-JL {
  2.     padding: 5px;
  3.     margin: 10px;
  4.     border: 1px solid #457DAB;
  5. }

Вот как должно получиться:

Редактирование template.css

Возвращаем template.css в туже папку на сервере.

3. Последнее что предстоит сделать, это написать код для отображения наших вкладок. Скачиваем index.php из директории …/templates/protostar/index.php.

Скачиваем index.php

И вновь открываем в Notepad++. Пишем следующее:

PHP код:
  1. <?php if ($this->countModules('Tabs1 or Tabs2')) : ?>
  2. <div>
  3. <?php echo JHtml::_('bootstrap.startTabSet', 'myTab', array('active' => '1'));?>
  4.  
  5.     <?php echo JHtml::_('bootstrap.addTab', 'myTab', '1', 'Вкладка 1'); ?>
  6.     <p><jdoc:include type="modules" name="Tabs1" style="none" /></p>
  7.     <?php echo JHtml::_('bootstrap.endTab');?>
  8.  
  9.     <?php echo JHtml::_('bootstrap.addTab', 'myTab', '2', 'Вкладка 2'); ?>
  10.     <p><jdoc:include type="modules" name="Tabs2" style="none" /></p>
  11.     <?php echo JHtml::_('bootstrap.endTab');?>
  12.  
  13. <?php echo JHtml::_('bootstrap.endTabSet'); ?>
  14. </div>
  15. <?php endif; ?>

В то место, как показано на следующей картинке:

Добавляем табы в index.php на Joomla

И снова необходимо вернуть index.php в туже директорию с заменой. На этом работа с кодом заканчивается, остаётся только заполнить контентом через административную панель. Если сейчас обновить любую страницу сайта, то ничего не измениться. Именно этого мы и добивались.

4. Заходим «Панель управления-->Расширения-->Менеджер модулей». В верхней части нажимаем «Создать». После выбираем тип создаваемого модуля, я взял «Категории».

Выбор позиции для модулей

На картинке выше показано, что выбрана позиция справа Tabs1[Tabs1] и заполнено поле с заголовком. Нажимаем «Сохранить и закрыть».

5. Повторяем пункт 4, только теперь выбираем любой другой тип модуля. А позицию ставим Tabs2[Tabs2].

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

Результат Вкладки на Joomla сайте

В заключении

Bootstrap (фреймворк) имеет явный минус перед первым способом, он нагружает наш сайт дополнительными скриптами, которые могут попросту простаивать без работы. Всё это пагубно влияет на скорость открытия страниц. И не стоит забывать, что в него входит самые современные наработки HTML и CSS, а значит, создаваемые элементы могут не поддерживаться старыми браузерами. Но, несмотря на это, Bootstrap приобрёл огромную популярность среди начинающих разработчиков сайтов.

 
4.5892857142857 1 1 1 1 1 (Оценок: 280)
4.5892857142857 280
Опубликовано: 24-05-2016

Соседние материалы

<Назад Вперёд>

Комментарии  

Андриан Новиков
0 #1 Андриан Новиков 30.05.2016 21:06
Да, мне однажды пришлось столкнуться с проблемой создания таких вкладок. Как ни мудрил, все не так получалось, как хотелось бы. Теперь я понимаю, что реализовать идею создания «Tabs» без такой подробной инструкции не такая уж и легкая задачка!

Вы не зарегистрированы, чтобы оставлять комментарии.