Июль 28th, 2012 
Archi Описание
Недавно обнаружили весьма интересную javascript библиотеку Glassbox.
С ее помощью можно создавать прозрачные рамки, цветные полупрозрачные слои и различные визуальные эффекты, такие как плавное появление и исчезновение слоев.
Эта библиотека весьма компактна и включает в себя библиотеки Prototype и Script.aculo.us.
К основным плюсам библиотеки можно отнести:
* Легкость использования;
* Кроссбраузерность (Работает в IE6+ , FF2, Opera 9, Safari 3);
* Возможность использования XMLHttpRequest для динамической подгрузки содержимого;
* Продукт является Open source — с открытым исходным кодом, что позволяет подробно изучить библиотеку.
Использование
Для начала скачиваем архив с библиотекой и подключаем ее в заголовок:
<script src="glassbox/glassbox.js" type="text/javascript"></script>Далее создаем блок для контента, который хотим сделать прозрачным, и помещаем его в тег body:
<div id="myGlassboxContent"> <!-- Контент --> </div>Затем создаем новый объект и передаем ему параметры id, width (ширина), height(высота) и overflow (переполнение), затем позиционируем, устанавливая отступы слева и сверху используя метод apos (Подробнее можно посмотреть в документации на английском):
<script type="text/javascript"> var myGlassBox = new GlassBox(); myGlassBox.init( 'myGlassboxContent', '400px', '300px', 'auto' ); myGlassBox.apos( '290px', '35px' ); </script>
Примеры
Вот самый простой пример
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <title>GlassBox</title> <script type="text/javascript" src="../javascripts/glassbox/glassbox.js"></script> <style type="text/css"> body { background-image: url( ../images/bg.jpg); } #myBox #content{ padding:2px; font-family: verdana, arial, helvetica; font-size: 12px; } </style> <script type="text/javascript"> window.onload = function(){ path_to_root_dir = "../"; var myBox = new GlassBox(); myBox.init( 'myBox', '135px', '60px', 'hidden' ); myBox.apos( '170px', '150px' ); }; </script> </head> <body> <div id="myBox">Hello, World!</div> </body> </html>
Ссылки
Сайт разработчиков:
Cкачать библиотеку можно тут:
Документация по библиотеке:
Источник: internet-technologies.ru
Опубликовано в рубрике 
Метки: