Выпадающий блок с помощью mootools на примере поиска

25 Май, 2010

Почти все свои посты я пишу исходя из своей работы. С чем сталкиваюсь, то и пытаюсь рассказать своим читателям. Вот мой очередной пост о том как сделать выпадающий блок div с помощью mootools на примере формы расшириного поиска. Этот скрипт я недавно писал\дописывал для одного сайта. Итак приступим:

Для начала необходимо добавить файл библиотеки mootools и стили для блока search:

1
2
3
4

Незабываем что библиотеки вставляются между тегами <head></head>

Теперь в index.html пишем нужную нам страктуру формы поиска:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<div id="search">
<div id="more"><a href="#" >Расширеный поиск</a></div>
<p style="padding-left: 30px;"><div align="left" id="fl" style="width:400px;display:block;clear:both;height:0px" ><br /></p>
<p style="padding-left: 30px;">Город
<select name="town">
<option value="0">Любой</option>
<option value='1'>Алмата</option>
<option value='2'>Астана</option>
<option value='3'>Караганда</option>
</select><br />
Форма обучения
<select name="type">
<option value="0">Любая</option>
<option value='1'>Очная</option>
<option value='2'>Очно-заочная</option>
<option value='3'>Заочная</option>
<option value='4'>Экстернат</option>
</select><br />
Тип учебного заведения
<select name="cat">
<option value="0">Любой</option>
<option value='1'>Университет</option>
<option value='6'>Академия</option>
<option value='8'>Школы</option>
<option value='7'>Институт</option>
</select><br /></p>
<p style="padding-left: 30px;">Организационноправовая форма
<select name="pravo">
<option value="0">Любая</option>
<option value='1'>Государственный вуз</option>
<option value='2'>Негосударственны вуз</option>
</select> <br /></p>
<p style="padding-left: 30px;">Специальность
<select name="spec">
<option value="0">Любая</option>
<option value='1'>Прикладная математика</option>
<option value='2'>Биология</option>
<option value='3'>Астрономия</option>
<option value='4'>Экономические</option>
</select>
<div><a href="#" >Искать</a></div>
</form></p>
<p style="padding-left: 30px;"></div></p>

Теперь в любом месте нашего html вставляем скрипт фреймворка:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<p style="padding-left: 30px;"><script language="javascript"></p>
<p style="padding-left: 30px;">//Назначаем какое событие должно произойти на ссылке
$('more').addEvent('click',function(){</p>
<p style="padding-left: 30px;">//выбираем элемент из стиля с которым будет происходить действие
if($('fl').getStyle('height')=='0px'){</p>
<p style="padding-left: 30px;">//назначаем переменную
var myFx = new Fx.Tween($('fl'));</p>
<p style="padding-left: 30px;">//Если при клике по ссылке высота в стиле fl=0, то она становится 160px
myFx.start('height', '0', '160px');
}else{
var myFx = new Fx.Tween($('fl'));</p>
<p style="padding-left: 30px;">//Если при клике по ссылке высота в стиле fl=160, то она становится 0px
myFx.start('height', '160px', '0');
}</p>
<p style="padding-left: 30px;">//проделываем те же действия с блоком "search"
if($('search').getStyle('height')=='20px'){
var myFx = new Fx.Tween($('search'));
myFx.start('height', '20px', '200px');
}else{
var myFx = new Fx.Tween($('search'));
myFx.start('height', '200px', '20px');
}
});</p>
<p style="padding-left: 30px;"></script></p>

Вот и все. Готово. Пример можно посмотреть здесь.

Отличный выбор asus k50c (k50c-c220scenww). Ноутбук не из дешевых, но он того стоит!

Теги: mootools, script, фреймворк

На тему «Выпадающий блок с помощью mootools на примере поиска» 5 комментариев:

Какое чудовищное количество кода… Сравните с jQuery:

$(‘search’).click( function() {
if ( $(this).is( ‘:visible’ ) ) {
$(this).slideUp();
} else {
$(this).slideDown();
}
});

Олег Громов | 25 Май 2010 в 02:29

Ответить

И все стили остаются в CSS.

Олег Громов | 25 Май 2010 в 02:29

Ответить

Я согласен. Вы читаете что я пишу в посте? Я делал это по заказу. У человека уже был прикреплен файл mootools и много скриптов написаных на нем. Была задача написать скрипт на mootools а не на jquery. Я jquery тоже знаю, если Вы так не думаете. Кстате в вашем коде есть пару ошибок, работать он будет, но написать можно было и профессиональнее. Через toggle().

Masterix | 25 Май 2010 в 10:51

Ответить

Вы читаете, что вы пишите в посте? Ни слова о том, что использование mootools было обязательным условием. Да и суть не в используемой библиотеке, а в том, что стили не должны мешаться с содержанием, тем более со скриптами!