DEMETR Создание сайтов в Казани

Опубликовано

Аккордеон для Joomla 1.0

Довольно старая статья, которая заслуживает внимания. Сейчас конечно актуальна версия 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 комментариев