Да, сами по себе JavaScript и CSS - мощные инструменты при разработке страниц, но еще круче результаты они демонстрируют в паре. Именно вопросам совместной работы двух этих языков и посвящена наша статья.
Попадались ли тебе, читатель, страницы на DHTML, отличительной чертой которых являлись дочерние окна? Первый раз я столкнулся с такими штуковинами на сайте Томаса Братли (Thomas Bratli) — http://www.dhtmlcemtral.com/. Первое впечатление — круто, хочу себе такие же. Лезть в раздел Downloads я не стал, а решил вытянуть скрипт прямо из страницы. Все-таки полезней шевелить извилинами, а не просто «кликать линки». Первое разочарование принес размер — 30 Кб (это без картинок), мне кажется — многовато, особенно если учесть, что один скрипт — это еще не страница. Второе — написано все это дело под огромное количество браузеров (IE 4, IE 5, IE 6, Netscape, Opera, Opera 5, Mac). Я, например, пользователь ослика ИА (в смысле IE), зачем мне лишние килобайты от Нетшкафа? Не проще ли сделать отдельно для каждого? Ну и третье — неудобство использования. Изучившие исходник меня поймут.
Предлагаю на рассмотрение пример скрипта, выполняющего аналогичные функции, правда, заметно упрощенного. Если понравится, пишите на мыло, доделаю недостающие фичи.
Итак, затарились, сели, включили любимую музыку, пристегнули ремни, взле… то есть начинаем…
Начинаем наш скрипт, как обычно, с тэга <script language=”JavaScript”> в голове документа. Первым делом введем переменные, которые надо будет использовать:
var tm; // — этой переменной будем присваивать значение встроенной функции setTimeout()
var wind=new Array // — это будет идентификатор окна. Очень пригодится. Поскольку окон будет много, то и wind — массив.
//Следующие шесть переменных понадобятся при передвижении наших окон.
var Xsup=new Array
var Ysup=new Array
var newX=new Array
var newY=new Array
Xpos=0;
Ypos=0;
var winIDi // Это временная переменная. Будет весьма полезна также при передвижении окон.
zI=2 // Последняя переменная. Ее будем использовать для регулировки слоев.
Если мои объяснения сейчас кажутся не очень понятными, не отчаивайтесь, дальше разберетесь (Любая книга по программированию).
Теперь перейдем к созданию окна. Вообще, для этого в любом случае придется вводить достаточное количество элементов. Поэтому, чтобы всякие index.html оставались относительно чистыми и красивыми, я предлагаю ввести две функции, первая из них начнет создание окна, а вторая закончит. Между ними можно будет вставить содержимое. Итак, первая:
Итак, в моем случае порядок объявления нового окна будет выглядеть так: winBegin(номер окна, ‘заголовок’, ширина, высота, растояния по x от 0, по y от 0, ‘видимость: visible/hidden’); содержимое и winEnd();
Окно мы объявили, теперь научимся его прятать и вновь показывать:
function kill(el){
el.style.visibility = "hidden";
}
function showw(el){
el.style.visibility="visible";
toper(el)
}
Вообще, менять в IE CSS-свойства чего-либо несложно. Делается это так: ElementID.style.CSSvar = “new value”. Вместо ElementID вставляем ID нужного элемента, а вместо CSSval — какое-либо из свойств CSS. Две эти функции просто меняют значение свойства visibility, используемого в CSS для определение видимости окна. У функций только один параметр — ID того окна, которое предстоит скрыть/показать. showw() в конце вызывает функцию toper(), выводящую нужное окно на передний план
function toper(winIDi){
zI++
winIDi.style.zIndex = zI;
}
Чтобы получить джентльменский набор простого окна, осталось одно, возможно, самое главное: возможность перетащить его куда подальше.
Находимы координаты указателя мыши (первая строчка вызывает функцию iMouse всякий раз, когда происходит движение мышки в пределах окна. Потом присваиваем переменным Xpos и Ypos координаты курсора).
document.onmousemove = iMouse;
function iMouse(){
Xpos=event.x;
Ypos=event.y;
}
Запускаем движение: на всякий пожарный, обнуляем Timeout tm, находим разницу между положением курсора и верхней левой точкой окна, присваиваем переменной winIDi ID данного окна (я говорил, пригодится переменная :-)), выводим его на передний план, ну и делаем то, из-за чего и поднимали весь сыр-бор — начинаем движение.
function launch(windID,i){
clearTimeout(tm)
Xsup[i]=(event.x-newX[i])
Ysup[i]=(event.y-newY[i])
winIDi=windID;
toper(windID);
move2(i);
}
Двигаемся. Находим новое положение окна (Xpos — Xsup[i] — Xpos у нас координата указателя мышки, а она имеет завидное свойство меняться), ну и перемещаем окно в новое положение, после чего повторяем все заново через 100 миллисекунд.
function move2(i){
newX[i]=Xpos — Xsup[i];
newY[i]=Ypos — Ysup[i];
winIDi.style.left=newX[i];
winIDi.style.top=newY[i];
tm=setTimeout("move2(" + i + ")",100);
}
Останавливаем всю красоту, прерывая Timeout:
function stop(){
clearTimeout(tm)
}
Со скриптом окончили, не забудем закрыть его </script>. Теперь можно открывать <body> и приступать к объявлению окон. Приблизительно так:
Отмазка. Если вы знаете, как все это сделать по-другому, — дерзайте, это действительно возможно. А что вы еще ожидали от языка, в котором добавить к переменной единицу можно тремя способами?
