Горыныч Проф. 2.0, версия Light - система автоматического распознавания русской речи и голосового управления компьютером. Забудьте о клавиатуре и мышке! Теперь вы можете управлять компьютером с помощью голоса, например диктовать текст текстовому редактору, запускать программы и т.д.
Подробнее...

реклама у нас

***

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

a.m. FAUST

Да, сами по себе JavaScript и CSS -  мощные инструменты при разработке страниц, но еще круче результаты они демонстрируют в паре. Именно вопросам совместной работы двух этих языков и посвящена наша статья.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: http://www.mycomp.com.ua/ 
  


Copyright © "Internet Zone"info@izcity.com 
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/.
При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас. Подробнее условия использования материалов смотрите здесь.