PCL's Floating Window 1.0.0

Для очередного проекта мне понадобился скрипт для создания плавающего окна, которое можно перетаскивать по экрану мышкой. Готовые скрипты или не имели нужного мне функционала, или же были слишком громоздкие, а таскать за собой чужеродные фреймворки ради одной функции - слишком дорогое удовольствие. В результате нескольких часов работы появился скрипт PCL's Floating Window.

Описание и возможности PCL's Floating Window:

• Кроссбраузерность. Скрипт протестирован и гарантированно работает в браузерах Internet Explorer 6.x-8.x и IE-based (Avant Browser, TheWorld, Maxthon и других), Gecko-based (Firefox, Mozilla, Netscape 8.x-9.x, K-Meleon и других), Opera 7.5-9.x, WebKit-based (Safari, Google Chrome, Iron и других). Поддерживаются различные типы DOCTYPE web-страниц.
  
  
• Простое добавление скрипта на страницу, настройка и подключение к нужным плавающим элементам. Функции центрирования плавающих элементов в пределах видимой области экрана, их скрытия и отображения.
  
  
• Поддержка неограниченного количества перетаскиваемых элементов, как блочных, так и строковых. Строковые элементы при перетаскивании преобразуются в блочные.
  
  
• Корректное позиционирование нескольких плавающих элементов относительно друг друга, активный элемент всегда располагается поверх остальных. Корректное отображение взаимного перекрытия нескольких элементов.
  
  
• Скрипт абсолютно бесплатный, единственным условием его использования является сохранение в исходном коде скрипта информации об авторе и ссылки на этот сайт. Категорически запрещается распространять скрипт PCL's Floating Window за деньги или иное вознаграждение, как отдельно, так и в качестве составной части других дистрибутивов!

Если в каком-нибудь из заявленных браузеров скрипт будет работать некорректно, то просьба сообщить в комментариях точную версию браузера и настройки подключения скрипта.

Установка скрипта. Скачайте прилагаемый архив, распакуйте файл pcl_floatingwindow.js и поместите в каталог с вашими скриптами. В заголовок head или самое начало странички пропишите код для подключения скрипта:Если скрипт размещен не в каталоге с html-страницами, то надо будет указать полный путь до него. Для инициализации скрипта добавьте на страницу следующий код:После инициализации можно использовать функции управления окнами:

• PCL_CenterWindow (id) - центрирование элемента с идентификатором id;
• PCL_SetZIndex (id) - установка элемента с идентификатором id поверх всех остальных;
• PCL_CloseWindow (id) - скрытие элемента путем присвоения ему атрибута visibility: hidden;
• PCL_ShowWindow (id) - показ элемента путем присвоения ему атрибута visibility: visible;

Их можно комбинировать, например, установить плавающее окно по центру экрана и поставить его поверх всех других плавающих окон.В плавающем элементе надо определить участок, который будет отвечать за перетаскивание. Это может быть заголовок окна, картинка целиком, ячейка таблицы, участок текста или что-то в этом роде. На него надо повесить два обработчика. Вот пример с таблицей:На клик установлен обработчик PCL_SetZIndex, устанавливающий плавающий элемент поверх остальных, на нажатие клавиши мыши PCL_StartDrag, на отпускание PCL_StopDrag. Очень рекомендуется для всех элементов, которые будут преобразованы в плавающие, сразу же прописать их ширину. Это избавит от проблем с изменением размеров при преобразовании строчных элементов в блоковые.

В приложении сам скрипт и html-страница с различными примерами его использования: две перетаскиваемые картинки, имитации окон, созданных через div'ы, и таблица, перетаскиваемая за заголовок. При клике на любой элемент он активируется, перемещаясь наверх. Смотрите, изучайте, делайте свое по аналогии.

Комментарии

Добавить комментарий

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.