Создаём «Accordion» на Joomla своими руками
Для того чтобы сделать собственный сайт привлекательным в глазах посетителей, нам приходится создавать парой сложные, но в тоже время интересные элементы дизайна. К тому же они иногда имеют весьма практичный смысл, к примеру, экономят места. Конечно, многие из нас предпочитают сторонние шаблоны для Joomla, так как они уже содержать красивый внешний вид. Но сегодня, мы не станем искать лёгких путей. В этой статье мы рассмотрим три способа создания Аккордеона.
Accordion - это один из элементов визуального оформления, его задача скрыть контент, а после нажатия на заголовок пункта открыть его. На самом деле способов создание аккордеона огромное множество, но мы разделили их на три основных. Первый основан на современной таблице стилей - CSS3. Второй предполагает подключение JavaScript. Ну а третьим способом станут стандартные средства Joomla. У каждого из них будет плавная анимация, а первые два можно установить на любой сайт, при этом неважно какой движок вы используете.
1 способ - CSS3
Для того чтобы понять как всё работает, мы начнём с самого простого варианта. Здесь нам понадобиться создать всего два файла HTML и CSS, а после положить их в одну папку вместе.
1. На рабочем столе создайте папку MySite.
2. Откройте Notepad++ и нажмите Ctrl+Alt+S. Введите название index, а тип файла выберите HTML.
Сохраните этот файл в нашу папку MySite.
3. После сохранения файл index.html будет открыт в редакторе, туда необходимо вставить вот этот код:
HTML код:
<!DOCTYPE html> <html> <head> <title>Accordion CSS3</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <!------------ Аккордеон на CSS3 ------------> <div> <section> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <label for="ac-1">О нас</label> <article> <p>Наша компания занимается разработкой...</p> </article> </div> <div> <input id="ac-2" name="accordion-1" type="checkbox" /> <label for="ac-2">Коллектив</label> <article> <p>У нас самые лучшие программисты...</p> </article> </div> <div> <input id="ac-3" name="accordion-1" type="checkbox" /> <label for="ac-3">Контакты</label> <article> <p>Вы можете связаться с нами по телефонам...</p> </article> </div> </section> </div> <!------------ Аккордеон на CSS3 ------------> </body> </html>
4. После того как у нас полностью готов первый файл, нам необходимо прописать стили для визуального оформления вкладок и текста внутри. Вновь при помощи Notepad++ создаём «style» с типом CSS как показано на картинке ниже:
Положите его в туже папку.
5. Вставляем в style.css вот этот код:
CSS код:
.ac-container{ width: 600px; margin: 50px auto 30px auto; text-align: left; background: #eee; } .ac-container label{ padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 17px; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); } .ac-container label:hover{ background: #fff; } .ac-container input:checked + label, .ac-container input:checked + label:hover{ background: #D0D8E8; color: #3d7489; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); } .ac-container input{ display: none; } .ac-container article{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; height: 0px; position: relative; z-index: 10; -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container article p{ color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } .ac-container input:checked ~ article{ -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; transition: height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); } .ac-container input:checked ~ article.ac-small{ height: 140px; } .ac-container input:checked ~ article.ac-medium{ height: 180px; } .ac-container input:checked ~ article.ac-large{ height: 230px; }
6. Теперь заходим в MySite, где два файла и открываем index.html в браузере. Вот что должно получиться:
Стили, которые мы использовали для создания анимации в выпадающих вкладках, работают только на современных браузерах. Это связано с тем, что мы используем CSS3. Посмотреть ДЕМО (http://websitek.ru/demo/Accordion-CSS3/).
2 способ - JavaScript
Второй способ заключается в создании тех же файлов, но с подключением дополнительных скриптов. Один будет автоматически загружаться браузером с сервера Google во время открытия страницы, а второй будет прописан в самом файле, он станет отвечать за действия мышкой. В нём я подписал значения, которые можно изменить.
1. На рабочем столе создайте вторую папку с именем MySite2.
2. В ней при помощи всё той же программы Notepad++ создаём два файла index.html и style.css. Всё как мы делали до этого.
3. В index.html вставляем вот этот код:
HTML код:
<!DOCTYPE html> <html> <head> <title>Accordion jQuery</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <!------------ Аккордеон на jQuery ------------> <div> <div>О нас</div> <div> <p>Наша компания занимается разработкой...</p> </div> <div>Коллектив</div> <div> <p>У нас самые лучшие программисты...</p> </div> <div>Контакты</div> <div> <p>Вы можете связаться с нами по телефонам...</p> </div> </div> <!-- Подключаем скрипты --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".accordion .accord-header").click(function() { if($(this).next("div").is(":visible")){ $(this).next("div").slideUp(700); // Скорость "ЗАКРЫТИЯ" (если нажал на ТУЖЕ вкладку) } else { $(".accordion .accord-content").slideUp(700); // Скорость "ЗАКРЫТИЯ" (если нажал на ДРУГУЮ вкладку) $(this).next("div").slideToggle(700); // Скорость "ОТКРЫТИЯ" (100-быстро, 2000-медленно) } }); }); </script> <!------------ Аккордеон на jQuery ------------> </body> </html>
4. А в style.css вот это:
CSS код:
.accordion{ width: 600px; margin: 50px auto 30px auto; text-align: left; background: #eee; } .accord-header{ padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 17px; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); } .accord-header:hover{ background: #fff; } .accord-content { display: none; } .accord-content p{ color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); }
5. Заходим в нашу папку MySite2 и открываем index.html в браузере. Должно получиться так:
Посмотреть ДЕМО (http://websitek.ru/demo/Accordion-jQuery/).
Как вы видите, визуально, они мало чем отличаются друг от друга, но работают по-разному принципу. Первый использует таблицу стилей CSS3 и требует современные браузеры, а второй обходится несложным скриптом, благодаря которому можно настроить скорость анимации. Какой способ использоваться на сайте, решать вам. Каждый из них обладает очевидными достоинствами.
3 способ - Bootstrap Joomla
Настало время поговорить о последнем варианте создания аккордеона. Он основан на Bootstrap Framework. Это своего рода библиотека, которая устанавливается в шаблон и облегчает создание элементов на сайте. Нам достаточно написать небольшие команды на PHP для того чтобы получить желаемое. Устанавливать сам Bootstrap не станем, мы воспользуемся стандартным шаблоном «protostar» из Joomla, в нём уже есть всё, что нам надо. Данный способ работает, начиная от Joomla 3.2 и выше.
Рассматривать таблицу стилей в этом примере не станем.
Для того чтобы создать «Accordion» нам понадобиться вот этот код:
PHP код:
<?php echo JHtml::_('bootstrap.startAccordion', 'slide-example', array('active' => 'slide1')); ?> <?php echo JHtml::_('bootstrap.addSlide', 'slide-example', 'О нас', 'slide1'); ?> <p>Наша компания занимается разработкой...</p> <?php echo JHtml::_('bootstrap.endSlide'); ?> <?php echo JHtml::_('bootstrap.addSlide', 'slide-example', 'Коллектив', 'slide2'); ?> <p>У нас самые лучшие программисты...</p> <?php echo JHtml::_('bootstrap.endSlide'); ?> <?php echo JHtml::_('bootstrap.addSlide', 'slide-example', 'Контакты', 'slide3'); ?> <p>Вы можете связаться с нами по телефонам...</p> <?php echo JHtml::_('bootstrap.endSlide'); ?> <?php echo JHtml::_('bootstrap.endAccordion'); ?>
Вставьте его в файл index.php между тегами <body></body> нашего шаблона. Аккордеон получился весьма простой, а при редактировании придётся каждый раз лесть в php и править вручную. Такой способ подходит разве что для сайта-визитки. Вот что получилось:
Признаться честно, таким положением дел я лично не доволен, поэтому предлагаю создать Accordion, внутри которого будут располагаться позиции под модули. Это даст нам возможность быстро редактировать контент внутри вкладок посредством панели управления. К тому же, сможем установить туда любой тип модуля, а это практически безграничные возможности.
1. Скачиваем на компьютер с сервера два файла index.php и templateDetails.xml. Оба открываем в Notepad++.
2. Для начала в templateDetails.xml прописываем это:
XML код:
<position>Accordion1</position> <position>Accordion2</position> <position>Accordion3</position>
Так как показано на следующей картинке:
3. Теперь переходим к редактированию index.php. Я выбрал место перед подвалом нашего сайта. Вставляем этот код:
PHP код:
<?php if ($this->countModules('Accordion1 or Accordion2 or Accordion3')) : ?> <?php echo JHtml::_('bootstrap.startAccordion', 'slide-example', array('active' => 'slide1')); ?> <?php echo JHtml::_('bootstrap.addSlide', 'slide-example', 'О нас', 'slide1'); ?> <p><jdoc:include type="modules" name="Accordion1" style="xhtml" /></p> <?php echo JHtml::_('bootstrap.endSlide'); ?> <?php echo JHtml::_('bootstrap.addSlide', 'slide-example', 'Коллектив', 'slide2'); ?> <p><jdoc:include type="modules" name="Accordion2" style="xhtml" /></p> <?php echo JHtml::_('bootstrap.endSlide'); ?> <?php echo JHtml::_('bootstrap.addSlide', 'slide-example', 'Контакты', 'slide3'); ?> <p><jdoc:include type="modules" name="Accordion3" style="xhtml" /></p> <?php echo JHtml::_('bootstrap.endSlide'); ?> <?php echo JHtml::_('bootstrap.endAccordion'); ?> <?php endif; ?>
Делаем это внизу файла, вот тут:
4. После всех этих действий, бросаем наши файлы обратно на сервер, откуда мы их скачивали. Если сейчас открыть сайт, то нечего не произойдёт. Это нормально, аккордеон покажется только при условии заполнения хотя бы одной вкладки. А для того чтобы заполнить их потребуется создать модули.
5. Бежим «Панель управлений-->Расширения-->Менеджер модулей». Вверху нажимаем «Создать». Я выбрал «HTML-код». А после вводим название, скрываем заголовок, пишем текст в редакторе и справа выбираем позицию Accordion1 [Accordion1]. Нажимаем «Сохранить и закрыть».
6. Аналогично пункту 5 необходимо создать ещё два модуля на ваше усмотрение. В каждом из них обязательно отключить заголовок и выбрать позицию Accordion2 [Accordion2] для второй вкладки, а так же Accordion3 [Accordion3] соответственно для третьей.
Остаётся открыть наш сайт и посмотреть на результат.
В заключении
Все представленные варианты в статье работают по разным принципам. Поэтому, если вам не подошел один способ, вы всегда сможете использовать другой.
Соседние материалы | ||||
7 вещей, о которых нужно знать перед запуском сайта на Joomla | Как добавить собственную позицию для модулей в Joomla |
Комментарии