Blog. Just Blog

PCL's Floating Window 1.0.0

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Для очередного проекта мне понадобился скрипт для создания плавающего окна, которое можно перетаскивать по экрану мышкой. Готовые скрипты или не имели нужного мне функционала, или же были слишком громоздкие, а таскать за собой чужеродные фреймворки ради одной функции - слишком дорогое удовольствие. В результате нескольких часов работы появился скрипт 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 или самое начало странички пропишите код для подключения скрипта:
  1. <script src="pcl_floatingwindow.js" type="text/javascript"></script>
Если скрипт размещен не в каталоге с html-страницами, то надо будет указать полный путь до него. Для инициализации скрипта добавьте на страницу следующий код:
  1. <script type="text/javascript">PCL_InitFloatWindow();</script>
После инициализации можно использовать функции управления окнами:
  • PCL_CenterWindow (id) - центрирование элемента с идентификатором id;
  • PCL_SetZIndex (id) - установка элемента с идентификатором id поверх всех остальных;
  • PCL_CloseWindow (id) - скрытие элемента путем присвоения ему атрибута visibility: hidden;
  • PCL_ShowWindow (id) - показ элемента путем присвоения ему атрибута visibility: visible;
Их можно комбинировать, например, установить плавающее окно по центру экрана и поставить его поверх всех других плавающих окон.
  1. <script type="text/javascript">
  2. PCL_InitFloatWindow();
  3. // Отцентровать первое плавающее окно
  4. PCL_CenterWindow ('my_window');
  5. PCL_SetZIndex ('my_window');
  6. // Скрыть второе плавающее окно, чтобы потом показать по какому-нибудь событию
  7. PCL_CloseWindow ('second_window');
  8. </script>
В плавающем элементе надо определить участок, который будет отвечать за перетаскивание. Это может быть заголовок окна, картинка целиком, ячейка таблицы, участок текста или что-то в этом роде. На него надо повесить два обработчика. Вот пример с таблицей:
  1. <!-- При клике на таблицу установить ее поверх всех остальных окон -->
  2. <table id="my_window" onclick="PCL_SetZIndex('my_window');"
  3.   style="width:300px; position: absolute;">
  4.   <!-- Обработчик перетаскивания устанавливается на шапку таблицы -->
  5.   <tr onmousedown="PCL_StartDrag('my_window'); return false;"
  6.       onmouseup="PCL_StopDrag(); return false;">
  7.     <th style="width:20px;">N</th><th>Name</th>
  8.   </tr>
  9.   <tr>
  10.     <td align="center">1</td><td>Иванов Петр Степанович</td>
  11.   </tr>
  12.   <tr>
  13.     <td align="center">2</td><td>Забугорный Борис Васильевич</td>
  14.   </tr>
  15. </table>
На клик установлен обработчик PCL_SetZIndex, устанавливающий плавающий элемент поверх остальных, на нажатие клавиши мыши PCL_StartDrag, на отпускание PCL_StopDrag. Очень рекомендуется для всех элементов, которые будут преобразованы в плавающие, сразу же прописать их ширину. Это избавит от проблем с изменением размеров при преобразовании строчных элементов в блоковые.

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

PCL's Floating Window 1.0.0PCL's Floating Window 1.0.0

PCLs.Floating.Window.1.0.0.zip (56,972 bytes)


Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 3820 | Комментариев: 7

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
nexter (11.01.2011 в 03:49):
Очень познавательно. Спасибо.
MaxIkar (06.08.2009 в 10:23):
64-ядерный процессор,
если уж так хочется аналога настольной системы, зацени это: http://www.eyeos.org/
64-ядерный процессор (05.08.2009 в 19:25):
ManHunter, Прсто в своё время мечтал сделать ПОЛНУЮ копию винды и большинства игр и программ, используя только языки веб-программирования.
ManHunter (05.08.2009 в 19:23):
Да все можно сделать, была бы необходимость. Пока такой необходимости нет.
64-ядерный процессор (05.08.2009 в 19:22):
Отличная работа!
P.S. Если бы сделать в браузере пнель как в винде и что бы там отображались заголовки окон - было бы круто. Так же очень было бы нехило, если бы у окон были все форточки - закрыть, развернуть/восстановить и свернуть(как раз в панель задач).
ManHunter (05.08.2009 в 18:00):
Боюсь, что с мелкомягкими я не сойдусь в вопросах шароварности программ.
azerty (05.08.2009 в 13:37):
нет слов. тебе бы в microsoft'е работать...

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.39 сек. / MySQL: 2 (0.0059 сек.) / Память: 4.5 Mb
Наверх