Меню
- Главная
- Скрипты
- Шаблоны сайта
- Книги
- Фон для сайта
- Анимированные картинки
- Лохотроны и кидалово в интернете
- Статьи
Партнерские программы:
- Заработок на соцсетях
- разные


Реклама




Информация
Обо всех новых добавлениях на сайт вы можете узнать подписавшись в
_________
Яндекс.Метрика


 
GlassBox.

GlassBox.


Описание

Недавно обнаружили весьма интересную 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>


Ссылки

Сайт разработчиков: http://www.glassbox-js.com

Cкачать библиотеку можно тут: http://www.glassbox-js.com/downloads/glassbox.latest.zip

Документация по библиотеке: http://www.glassbox-js.com/#API

Назад
Автор: Андрей Евтеев
Сайт автора: simpledream.ru
Источник: simpledream.ru