Довольно старая статья, которая заслуживает внимания. Сейчас конечно актуальна версия 1.5, но эта статья для ветеранов, использующих версию 1.0.
Будем создавать интересную вещь «Аккордион» и внедрять ее в CMS Joomla. Для этого понадобится два файла: jquery.js и toggler.js. Эффект будет заключаться в том, что на главной странице мы выводим краткий текст статей. Через jquery будем скрывать содержимое всех статей, кроме первой, а заголовок каждой статьи превратим в ссылку, при нажатии на которую будет показываться или убираться текст статьи.
Архив со скриптами качаем здесь.
Итак начнем. Открываем файл шаблона index.php, и по привычке я пишу туда:
<? $template=$this->baseurl."/templates/".$this->template ; ?> |
храним путь к шаблону в переменной $template
В cекции head подключаем наши скрипты, но перед этим зададим условие на проверку главной страницы, и если она открыта, то подключаем все, что нам пригодится:
Вот сюда вставим ява скрипты |
1. Подключаем скрипты
<script src="<?php echo $template?>/js/jquery.js" type="text/javascript"></script> <script src="<?php echo $template?>/js/toggler.js" type="text/javascript"></script> |
2. И перед самым закрытием head пишем весь фокус:
<script type="text/javascript"> $(document).ready(function() {tables =$("div.copen:not(:has(h4[class=contentnews]))"); tables1 = $("div.copen:has(h4[class=contentnews])"); tables1.each(function(q) {this.id = "mytable_" + q;}); tables.each(function(q){ this.id = "mytable" + q; var zag = $("#mytable_" + q).text(); if(q == 0) {$("#mytable"+q).wrap("<div class='toggler-c opened' title='"+zag+"'></div>");} else {$("#mytable"+q).wrap("<div class='toggler-c' title='"+zag+"'></div>");} }); $(".contentnews").each(function(i){ this.id = "myhead" + i; $("#myhead"+i).append("<div class='toggler'></div>"); $("#myhead"+i).remove(); }); $('div.toggler-c').toggleElements( { fxAnimation:'easeOutBounce', fxSpeed:'slow', className:'toggler' } ); }); </script> |
Пункты 1 и 2 нужно разместить в самый первый кусок кода, где идет проверка на главную страницу.
Основная часть сделана, осталось прописать стили:
.toggler { margin:0px; cursor:pointer; text-decoration: none; display:block; height:25px; padding:5px 5px 5px 20px; } .toggler-closed { height:25px; background: #F8F8F8 url('../images/togglerc.gif') center right no-repeat; border:1px solid #CCC; padding:5px 0px 0px 20px; display:block; } .toggler-closed:hover { height:25px; background: #eeeeee url('../images/togglerd.gif') center right no-repeat; border:1px solid #666; padding:5px 0px 0px 20px; display:block; } .toggler-opened { height:25px; background: #333 url('../images/togglero.gif') center right no-repeat; border:1px solid #333; color: #FFF; padding:5px 0px 0px 20px; text-align:left; display:block; } .toggler-opened:hover { padding-left:20px; height:25px; background: #000 url('../images/togglerp.gif') center right no-repeat; padding:5px 0px 0px 20px; color: #FFF; display:block; } .droppable-active { border:1px dotted green; } .droppable-hover { border-bottom:1px dotted red; } |
Аккордеон для Joomla 1.0: 0 комментариев