<h2><span><a href="#" id="toggle">Панель</a></span></h2>
<div id="section">
<div>
<!-- Содержимое панели  -->
</div>
</div>

div.container{
	margin:30px auto;
	width:350px;
}
h2{
	margin:0px;
	padding:0px;
	border:0px;
}
h2{
	color:#FFFFFF;
	font-size:13px;
	display:block;
	background:url(img/h2_bg.gif) top left no-repeat #9A9A9A;
}
h2 span{
	padding:5px 10px;
	background:url(img/h2_span_bg.gif) top right no-repeat;
	display:block;
}
h2 a:link, h2 a:visited{
	color:#FFFFFF;
	text-decoration:none;
	display:block;
}
#section {
	background:url(img/section_bg_left.png) bottom left  no-repeat #EEEEEE;
	font-size:12px;
}
#section div{
	background:url(img/section_bg_right.png) right bottom no-repeat;
	padding:10px;
}

<script type="text/javascript" src="mootools.svn.js"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('section');
	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
});
</script>

Комментарии на “Туториал - открывающаяся панель на MooTools”

1. Андрей:
   4 апреля 2008 в 21:31

   Как сделать то же самое, н очтобы панелька сначала была закрыта? Не получается.

2. admin:
   4 апреля 2008 в 21:51

   Нужно сразу после объявления mySlide добавить: mySlide.hide() ,т.е. так
   var mySlide = new Fx.Slide(’section’);
   mySlide.hide();
   …

3. Денис:
   9 июня 2008 в 21:09

   Спасибо очень полезная инфа в яве не шарю но сразу разобрался как работает. Очень был бы благодарен есл бы вы также разложили по полочка здесь эфект аккордиона. Так как в данном примере работает толко один блок очень хотелось бы знать ка реализовать тоже самое с несколькими блоками.

4. admin:
   10 июня 2008 в 0:09

   Не стоит переделывать это под аккордеон, просто потому, что в Mootools уже есть класс Accordeon, для которого нужно всего несколько строк кода:
   window.addEvent(’domready’, function(){
   var accordion = new Accordion(’h3.menusection’, ‘div.menusection’, {opacity: false}, $(’accordion’));
   });
   Тут аккордеон будет создан в div-е ‘accordion’, в качестве заголовков меню будет h3, а содержимое аккордеона в div-е с классом menusection.

   <div id=”accordion”>
   <h3 class=”toggler menusection”>Menu section 1</h3>
   <div class=”element menusection”>
   …..
   </div>

   …. тут остальные элементы аккордеона

   <h3 class=”toggler menusection”>Menu Section 3</h3>
   <div class=”element menusection”>
   …..
   </div>

   </div>

   Смотрите этот пример здесь.

5. Денис:
   10 июня 2008 в 13:45

   Админ спасибо за консультацию помои пожалуста реализовать такой аккрдион я просто вообще в яве деревянный какой код нужно добавить чтобы это заработало аккордионом готов материально поошрить 338667728 ПОМОГИ ПОЖАЛУСТА ОЧЕНЬ ПРОШУ

   — Какие кредиты ты предлагаешь?
   Выезжающий текст
   — Кому бы ты мог дать кредит?
   Выезжающий текст
   — Будут ли какие то бонусы, подарки для меня?
   Выезжающий текст
   — А есть ли у тебя какие то пробные тесты?
   Выезжающий текст
   — Если бы я хотел найти инвестора для своего сайта?
   Выезжающий текст
   — Знаешь ли ты что такое лимит доверия?
   Выезжающий текст

Оставить комментарий