0
Открывающиеся закрывающиеся перетаскиваемые блоки
Перетаскиваемые блоки бывают очень полезны и не менее интересны, хотя их редко применяют на практике. Применений таким блокам можно найти огромное количество, например форма обратной связи, информация, для которой нет места на странице и т.д. и т.п.
Для создания открывающихся закрывающихся перетаскиваемых блоков нам понадобится библиотека MotoTools. Её необходимо подключить к странице, для этого добавляем между <head> и </head> следующий код:
Код:
<script type="text/javascript" src="mootools.svn.js"></script>Сразу после строки, которой подключали MotoTools добавляем JavaScript:
JS-код:
<script type="text/javascript">
window.addEvent('domready', function(){
$$('#draggables div').each(function(drag){
new Drag.Move(drag);
});
$$('#draggables span a').each(function(o){
$(o).addEvents({'click' : function(event){
$(o.id+'_w').setStyle('display', 'none');
}
})
});
$$('#links a').each(function(o){
$(o).addEvents({'click' : function(event){
$(o.id+'_w').setStyle('display', 'block');}
})
});
});
</script>Туда же, в “голову” страницы добавляем немного стилей.
CSS-код:
.window {
border:solid 6px #343434;
background:#FFF;
width:200px;
height:150px;
display:none;
}
.msg {
float:center;
font-weight:normal;
font-size:11px;
}И конечно же нам понадобится HTML, без него никуда.
HTML-код:
<div id="links">
<a href="#" id="block1">Клик для показа блока №1</a>
<a href="#" id="block2">Клик для показа блока №2</a>
</div>
<div id="draggables">
<div id="block1_w" class="window">
<span class="msg"><a href="#" id="block1">закрыть</a></span>
<p>Текст блока №1</p>
</div>
<div id="block2_w" class="window">
<span class="msg"><a href="#" id="block2">закрыть</a></span>
<p>Текст блока №2</p>
</div>
</div>Всё, блоки готовы к использованию.
Пример блоков можно посмотреть здесь.
Оставьте своё мнение, и о нём узнают миллионы!
Уважаемые пользователи! Для того, чтобы комментировать записи Вы должны ввести своё имя, e-mail и решить простое уравнение. Это сделано для того, чтобы обезопасить блог от спама и спам-ботов.
При оставлении комментария, пожалуйста, воздержитесь от написания ссылок на сторонние ресурсы. Все комментарии фильтруются как плагинами так и вручную. Не тратьте своё и моё время.
Спасибо за понимание!
При оставлении комментария, пожалуйста, воздержитесь от написания ссылок на сторонние ресурсы. Все комментарии фильтруются как плагинами так и вручную. Не тратьте своё и моё время.
Спасибо за понимание!