CFA LogoCFA Logo Computer
Загрузка поиска
Новости Компьютеры Прайс-лист [Новое] Прайс-лист [Б/У] Для ноутбуков Конфигуратор ПК Заказ, Оплата, Доставка Сервис объявления Драйвера Статьи Как нас найти Контакты
Новости
RSS канал новостей
Несмотря на лето и запрет в Украине российских интернет ресурсов Яндекс, Mail.Ru и других, посещаемость ...
Китайская компания Colorful презентовала в эти дни свою новую материнскую плату на базе топового ...
Компания Google опубликовала в эти дни свой ежемесячный отчет о распределении на рынке фирменной ...
Тайваньская компания Gigabyte Technology сегодня официально представила свою башенную систему охлаждения ...
Компания LG Electronics планирует расширить линейку своих флагманских смартфонов LG G6. К выпущенной ...
Самое интересное
Программаторы 25 SPI FLASH Адаптеры Optibay HDD Caddy Драйвера nVidia GeForce Драйвера AMD Radeon HD Игры на DVD Сравнение видеокарт Сравнение процессоров

АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2003 ГОД

Окно на окне, окном погоняет

a.m. FAUST faust@in.lviv.ua

Да, сами по себе JavaScript и CSS (см. цикл статей Никиты Сенченко «Устрой себе легкую жизнь», МК № 31–32, 34–35, 47, 49–52, 10, 12–13 (150–151, 153–154, 166, 168–171, 181, 183–184)) — мощные инструменты при разработке страниц, но еще круче результаты они демонстрируют в паре. Именно вопросам совместной работы двух этих языков и посвящена наша статья.

…и выходит и входит… замечательно выходит...

Ослик ИА

Попадались ли тебе, читатель, страницы на DHTML, отличительной чертой которых являлись дочерние окна? Первый раз я столкнулся с такими штуковинами на сайте Томаса Братли (Thomas Bratli) —http://www.dhtmlcemtral.com (рис. 1). Первое впечатление — круто, хочу себе такие же. Лезть в раздел Downloads я не стал, а решил вытянуть скрипт прямо из страницы. Все-таки полезней шевелить извилинами, а не просто «кликать линки». Первое разочарование принес размер — 30 Кб (это без картинок), мне кажется — многовато, особенно если учесть, что один скрипт — это еще не страница. Второе — написано все это дело под огромное количество браузеров (IE 4, IE 5, IE 6, Netscape, Opera, Opera 5, Mac). Я, например, пользователь ослика ИА (в смысле IE), зачем мне лишние килобайты от Нетшкафа? Не проще ли сделать отдельно для каждого? Ну и третье — неудобство использования. Изучившие исходник меня поймут.

Предлагаю на рассмотрение пример скрипта, выполняющего аналогичные функции, правда, заметно упрощенного (рис. 2). Если понравится, пишите на мыло, доделаю недостающие фичи.

Рис. 1   Рис. 2

Итак, затарились, сели, включили любимую музыку, пристегнули ремни, взле… то есть начинаем…

Начинаем наш скрипт, как обычно, с тэга <script language=”JavaScript”> в голове документа. Первым делом введем переменные, которые надо будет использовать:

Если мои объяснения сейчас кажутся не очень понятными, не отчаивайтесь, дальше разберетесь (Любая книга по программированию).

Теперь перейдем к созданию окна. Вообще, для этого в любом случае придется вводить достаточное количество элементов. Поэтому, чтобы всякие index.html оставались относительно чистыми и красивыми, я предлагаю ввести две функции, первая из них начнет создание окна, а вторая закончит. Между ними можно будет вставить содержимое. Итак, первая:

И вторая функция:

Итак, в моем случае порядок объявления нового окна будет выглядеть так: winBegin(номер окна, ‘заголовок’, ширина, высота, растояния по x от 0, по y от 0, ‘видимость: visible/hidden’); содержимое и winEnd();

Окно мы объявили, теперь научимся его прятать и вновь показывать:

Вообще, менять в IE CSS-свойства чего-либо несложно. Делается это так: ElementID.style.CSSvar = “new value”. Вместо ElementID вставляем ID нужного элемента, а вместо CSSval — какое-либо из свойств CSS. Две эти функции просто меняют значение свойства visibility, используемого в CSS для определение видимости окна. У функций только один параметр —ID того окна, которое предстоит скрыть/показать. showw() в конце вызывает функцию toper(), выводящую нужное окно на передний план (рис. 3):

Рис. 3

Чтобы получить джентльменский набор простого окна, осталось одно, возможно, самое главное: возможность перетащить его куда подальше.

Находимы координаты указателя мыши (первая строчка вызывает функцию iMouse всякий раз, когда происходит движение мышки в пределах окна. Потом присваиваем переменным Xpos и Ypos координаты курсора).

Запускаем движение: на всякий пожарный, обнуляем Timeout tm, находим разницу между положением курсора и верхней левой точкой окна, присваиваем переменной winIDi IDданного окна (я говорил, пригодится переменная :-)), выводим его на передний план, ну и делаем то, из-за чего и поднимали весь сыр-бор — начинаем движение.

Двигаемся. Находим новое положение окна (Xpos — Xsup[i] — Xpos у нас координата указателя мышки, а она имеет завидное свойство меняться), ну и перемещаем окно в новое положение, после чего повторяем все заново через 100 миллисекунд.

Останавливаем всю красоту, прерывая Timeout:

Со скриптом окончили, не забудем закрыть его </script>. Теперь можно открывать <body> и приступать к объявлению окон. Приблизительно так:

Наконец создадим три кнопки, которые будут вновь открывать закрытые окна:

Все! Можно опробовать все это в работе.

Отмазка. Если вы знаете, как все это сделать по-другому, — дерзайте, это действительно возможно. А что вы еще ожидали от языка, в котором добавить к переменной единицу можно тремя способами?

Рекомендуем ещё прочитать:






Данную страницу никто не комментировал. Вы можете стать первым.

Ваше имя:
Ваша почта:

RSS
Комментарий:
Введите символы: *
captcha
Обновить





Хостинг на серверах в Украине, США и Германии. © www.sector.biz.ua 2006-2015 design by Vadim Popov