В сегодняшнем уроке речь пойдет о плагине, с помощью которого можно создавать очень красивые границы для любых блоков сайта. GlassBox - легкая JavaScript библиотека пользовательского интерфейса, которая использует Prototype и Script.aculo.us (альтернативы jQuery) для некоторых эффектов. GlassBox позволяет с легкостью создавать светящиеся границы, яркие шаблоны и еффекты в стиле "Flash"
Если резюмировать все достоинства, то GlassBox:
- очень легкий в использовании, легко поддается модификациям, поддерживает разные шаблоны
- включает в себя простой Ajax XHR для динамической загрузки данных
- протестирован во всех основных браузерах
- абсолютно бесплатен
Существует много вариантов использования данного плагина. В этом уроке я рассмотрю несколько наиболее удачных, на мой взгляд, примеров.
1) Создание красивых всплывающих сообщений (демо смотрите выше)
В самом начале подключаем необходимые для работы скрипты и стили:
Code
<script src="../javascripts/prototype.js" type="text/javascript"></script>
<script src="../javascripts/scriptaculous/effects.js" type="text/javascript"></script>
<script src="../javascripts/glassbox/glassbox.js" type="text/javascript"></script>
<style type="text/css">
body {
background: url( ../images/bg114.jpg );
font-family:Arial, Helvetica, sans-serif;
}
#myBox_contentBoxBg {
filter: alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#myBox_content,
#myBox_2_content {
padding: 20px;
}
#myBox h3,
#myBox_2 h3 {
font-size: 17px;
margin: 0px;
text-align: center
}
</style>
После стилей создаем еще один скрипт, который настраивает внешний вид и порядок появления. В коде имеются комментарии, которые рассказывают о возможных значениях.
Code
<script type="text/javascript">
path_to_root_dir = "../";
function flashnotice(duration) {
var myBox = new GlassBox();
myBox.init( 'myBox', '500px', '100px', 'hidden', '', true, true );
****** ID, ширина, высота, overflow, скин границы, ресайз, двойное нажатие ******
****** Последние 3 параметра не являются обязательными ******
myBox.lbo( false, 0.50 );
****** Наличие кнопки закрытия, прозрачность ******
myBox.appear(duration);
****** Продолжительность в милисекундах ******
}
function flashnotice_2() {
var myBox_2 = new GlassBox();
myBox_2.init( 'myBox_2', '520px', '100px', 'hidden', '', true, true );
myBox_2.lbo( true, 0.0 );
myBox_2.appear();
}
</script>
Теперь в теле документа мы вставляем ссылки на вызов всплывающих окон и далее вставляем содержимое этих окон.
Code
<a href="javascript:;" onclick="flashnotice(3000)" >flashnotice: appear(3000)</a>
<br/>
<a href="javascript:;" onclick="flashnotice_2()" >flashnotice: appear()</a>
<div id="myBox" style="display:none">
<h3>This message disappears in 3 seconds.</h3>
</div>
<div id="myBox_2" style="display:none">
<h3>This message don't disappear automatically.</h3>
</div>
Вызов подобных окон происходит также с помощью JavaScript. В первом примере мы передаем продолжительность показа окна через аттрибут onclick (3 секунды).
2) Создание полноценного шаблона для сайта (демо)
Вставка скрипта и стилей в шапку документа:
Code
<script src="../javascripts/glassbox/glassbox.js" type="text/javascript"></script>
<style type="text/css">
...
...
все стили можно посмотреть в исходниках или в демо
...
...
</style>
Поскольку никаких эффектов (кроме прозрачных границ) у нас тут не используется мы не подключаем Prototype и Script.aculo.us.
Далее под стилями идет инициализация каждого блока. Прописывается id, ширина, выоста и overflow (т.е. все обязательные):
Code
<script type="text/javascript">
path_to_root_dir = "../";
window.onload = function(){
var topBox = new GlassBox();
topBox.init( 'topBox', '940px', '110px', 'hidden' );
topBox.ipos();
var leftBox = new GlassBox();
leftBox.init( 'leftBox', '200px', '', 'hidden' );
leftBox.ipos();
var leftBox2 = new GlassBox();
leftBox2.init( 'leftBox2', '200px', '', 'hidden' );
leftBox2.ipos();
var mainBox = new GlassBox();
mainBox.init( 'mainBox', '550px', '', 'hidden' );
mainBox.ipos();
var rightBox = new GlassBox();
rightBox.init( 'rightBox', '200px', '', 'hidden' );
rightBox.ipos();
};
</script>
Вставляем разметку в тело документа. Прописываем правильные id:
Code
<div id="wrapper">
<div id="topBox">
<h1>top box content</h1>
</div>
<div class="column">
<div id="leftBox">
... содержание блока ...
</div>
<div id="leftBox2">
... содержание блока ...
</div>
</div>
<div id="mainBox" class="column">
... содержание блока ...
</div>
<div id="rightBox" class="column">
... содержание блока ...
</div>
</div>
В исходниках Вы найдете еще примеры использования данного интересного плагина. Для того, чтобы разобраться достаточно открыть исходный код и немного там покопаться.
На сегодня все! Всем спасибо за внимание!
Источник: ruseller.com
