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

Поделиться в соц. сетях

mailru GlassBox
facebook GlassBox
odnoklassniki GlassBox
livejournal GlassBox
googlebuzz GlassBox

Также рекомендуем:

  1. AJAX’овые грабли в Internet Explorer 6 Если передаваемый сервером заголовок с кодировкой не понятен IE, то возникает прекрасная, красноречивая Системная ошибка: -1072896658. IE приводит к нижнему регистру передаваемые custom-заголовки запросов, например X-Requested-With: XMLHttpRequest превращается на сервере в x-requested-with: xmlhttprequest). Нафига? Internet Explorer иногда не кеширует фоновые изображения, полученные через AJAX; повторно загружаемый фон «забывает» посмотреть в кеше. IE некорректно парсит js-код [...]...
  2. PHP и формы Ни для кого не является секретом, что наиболее распространенным способом взаимодействия html-страницы с сайтом является форма. Форма (то есть html-элемент образуемый тегом form) используется и бесплатными почтовыми службами, электронными магазинами и многими другими типами сайтов.. Обработка простых форм посредством PHP не представляет никакого труда. Однако время от времени возникает потребность обработать форму, содержащую несколько однотипных [...]...
  3. Перекрывание селектов в IE6 Даже через абсолютно спозиционированные ДИВ-ы с максимальным zIndex-ом в ИЕ6 «проглядывают» селекты. Задача: подобрать HTML/CSS-способы перекрывания селектов.. Реализация селектов в браузере Internet Explorer 6 такова, что перекрыть их обычными блочными элементами (ДИВ-ы, таблицы) даже при максимальном zIndex-е у последних не получится. Выглядит этот эффект вот так (у ДИВа z-index:10000): Экспериментальным путем было выявлено, что единственный [...]...
  4. Ловушка для спам-бота Многие спам-боты, чтобы скрыть свои реальные имена (названия), которые легко отследить по записи user_agent, изменяют эту запись, меняя её на записи разных браузеров (например: «mozilla/4.0 (compatible; msie 5.5; windows nt 5.0)» и так далее). Также эти боты игнорируют стандарты записей для файла robots.txt (описание стандарта Вы можете прочесть здесь http://www.robotstxt.org/wc/exclusion.html robots.txt standard).. Можно, конечно, пойти [...]...
  5. Отказ в обслуживании в Microsoft Internet Explorer Программа: Microsoft Internet Explorer 6.x Опасность: Средняя Наличие эксплоита: Да . Описание: Уязвимость позволяет удаленному пользователю вызвать отказ в обслуживании. Уязвимость существует в библиотеке mshtml.dll при обработке тега OBJECT. Удаленный пользователь может с помощью специально сформированной Web страницы вызвать отказ в обслуживании браузера. Примеры: http://lcamtuf.coredump.cx/iedie2-1.htmlhttp://lcamtuf.coredump.cx/iedie2-2.htmlhttp://lcamtuf.coredump.cx/iedie2-3.htmlhttp://lcamtuf.coredump.cx/iedie2-4.html URL производителя: www.microsoft.com Решение: Способов устранения уязвимости не существует в [...]...
  6. MySQL – это просто! Сначала ответим на вопрос – что такое MySQL? Это База Данных (БД), в которой структурировано хранятся данные. Следует второй вопрос – зачем отказываться от простых и удобных файлов к сложной БД? Потому что файлы, генерируемые каким либо скриптом на основе файловой БД (гостевые книги, CMS, форумы), постепенно начинают увеличиваться в размере, а так же их [...]...
  7. Софт для вебмастера Как вы знаете, для создания вебстраниц, все вебмастера пользуются программами. А вот какими лучше всего пользоваться мы сейчас и разберем.. 1. Html-редакторы Macromedia HomeSite – весьма популярный html-редактор. Первое что бросается в глаза – это подсветка. Подсветка кода у него просто ужасная, т.к. в ней используются яркие цвета зеленого, синего, красного. Радует то, что цвета [...]...
  8. Как создать 1000 статей за полчаса 1. Качайте SEO Generator2. Пройдите режим обучения программы 3. Работаете со статьей также как с длиным описанием4. Генерируете статью в файлыПодсказка: используйте для отладки фишку: если строка начинаеться с символа #, то эта строка и последующие не будут генериться.Не переусердствуйте с синтаксисом не мучайте программу и свой мозг.Качаете SEO Generator http://www.altalabs.ru/files/SEOGENDEMO.rar. Так-же будет полезна прога [...]...
  9. Создание сайтов с возможностью печати PDF на примере PDF::AP Хотелось бы рассмотреть преимущества формата PDF (Portable Document Format), разработанного компанией Sun Microsystems, а также где и почему стоит использовать формат PDF при создании сайтов.Пожалуй, вам несколько раз встречалась необходимость печати документов прямо из Интернета. Это могут быть счета, квитанции, данные для печати на шаблоне.Возможно, вам также приходилось встречаться с особенностями печати подобных документов, оформленных [...]...
  10. Множественные уязвимости в Mozilla Firefox Программа: Mozilla Firefox до версии 1.5.0.7. Опасность: Критическая Наличие эксплоита: нет Описание: Обнаруженные уязвимости позволяют злоумышленнику выполнить нападение “человек по середине”, межсайтовый скриптинг, спуфинг и потенциально скомпрометировать систему пользователя. 1. Переполнение буфера в обработке JavaScript регулярных выражений позволяет злоумышленнику выполнить произвольный код на целевой системе. 2. Механизм автообновления использует SSL для безопасного общения. Если пользователь [...]...
  11. Яндекс запустил RTFM для программистов Яндексом запущен специальный колдунщик для программистов, аналог RTFM. Сообщение об этом распространили разработчики Яндекса. Новый сервис будет показывать ответ на интересующий вопрос непосредственно в поисковой выдаче, облегчая тем самым работу программистам.. Колдунщик предоставляет описания, которые имеются в официальных справочных материалах или действующих руководствах по программированию. Колдунщик уже знает более чем десятью популярными языками программирования и [...]...
  12. Доступна первая бета-версия браузера Opera 11 Вчера для персональных компьютеров стала доступна бета-версия браузера Opera 11.. Основное отличие Opera 11 от предшествующих версий — появление принципиально новой системы вкладок с функцией группировки. Ранее вкладки с открытыми веб-страницами были расположены друг за другом, а теперь пользователям предоставлена возможность группировать вкладки по веб-сайтам или темам. Возможность группировки появляется, если мышью разместить одну вкладку [...]...
  13. Ucoz web service. Как это было… ПРЕЛЮДИЯ Жил был один молодой парень, который даже не слышал о компьютерах и не мог понять, что это такое. Впервые ему удалось лицезреть его в 10лет. Решив удивить своих друзей и преподавателя, он радостно сказал : я знаю что ЭТО… Осциллограф! Но не было в этом моей вины, вы убедитесь в этом увидев ЭВМ «Электрон».. [...]...
  14. Работа с SQLite Введение SQLite – это реляционная база данных, запросы к которой можно осуществлять при помощи языка запросов SQL. База данных не поддерживает все особенности SQL и уступает в функциональности другим развитым СУБД, но вполне подходит для хранения и извлечения информации.. Отличие SQLite от MySQL и аналогичных СУБД Классические СУБД, такие как MySQL (а так же MS [...]...
  15. Множественные уязвимости в Mozilla Firefox Программа: Mozilla Firefox 1.5.0.1 и более ранние версии.Mozilla Suit версии до 1.7.13 Опасность: Критическая Наличие эксплоита: Нет . Описание: Обнаруженные уязвимости позволяют удаленному пользователю произвести XSS нападение, обойти ограничения безопасности, получить доступ к важным данным и скомпрометировать уязвимую систему. 1. Уязвимость существует из-за ошибки, которая позволяет внедрить JavaScript код в другую, в данный момент загружающуюся, [...]...

Комментарии запрещены.