Программный код, генерирующий этот текст в формате HTML,; но громоздок, т. к. все элементы HTML создаются посредством i DOM. Метод drawResultBox() принимает один аргумент - объект f
snWebSearch.drawResultBox = function (е) { % var divSearchBox=- document.createElementC'div"); var divHeading = document.createElementC'div"); var divResultsPane = document.createElementC'div"); var aCloseLink = document.createElementC'a");
В этих строках с помощью метода createElement() создаются элементы HTML. Создав их, можно приступить к изменению свойств элементов. Первые два элемента - aCloseLink и divHeading:
aCloseLink.href = "#"; ^ aCloseLink.className = ;"ajaxWebSearchCloseLink;i;-\ у aCloseLink.onclick = this.close; * aCloseLink.appendChild(document.createTextNode("X"));
divHeading.className = "ajaxWebSearchHeading"; '' divHeading.appendChild(document.createTextNode("MSN Search Results")); divHeading.appendChild(aCloseLink);
Первые четыре строки завершают создание гиперссылки, щелчок по которой приводит к закрытию окна. Метод close() назначается в каче¬стве обработчика события onclick для гиперссылки. Следующая груп¬па строк завершает создание элемента заголовка окна с текстом и гиперссылкой закрытия окна.
Данное окно отображается на странице еще до того, как сами резуль¬таты будут получены от серверной части приложения. Чтобы показать пользователю, что приложение выполняет свое задание, можно было бы вывести сообщение о том, что идет загрузка данных (рис. 8.4). Для этого надо создать и добавить к divResultsPane еще один элемент:
var divLoading = document.createElementC'div");
divLoading.appendChild(document.:createTextNode("Loading Search Feed"));
divResultsPane.className = "ajaxWebSearchResults"; divResultsPane.appendChild(divLoading);
Этот фрагмент кода создает сообщение о загрузке данных, до его в элемент divResultsPane и определяет ему имя класса CSS.
Создав элементы, надо добавить их в элемент divSearchBox:
divSearchBox.className = "ajaxWebSearchBox"; divSearchBox.appendChild(divHeading); divSearchBox.appendChild(divResultsPane);
document.body.appendChild(divSearchBox);
В этом фрагменте элементы divHeading и divResultsPane вста в окно с результатами поиска, а само окно вставляется в страницу.
На заключительном этапе метод drawResultBoxQ позиционирует < и возвращает divSearchBox в вызывающую функцию:
msnWebSearch.drawResultBox = function (е) {
var divSearchBox= document.createElement("div"); var divHeading = document.createElement("div"); var divResultsPane = document.createElement("div"); var aCloseLink = document.createElementf'a");
aCloseLink.href = "#";
aCloseLink.className = "ajaxWebSearchCloseLink"; aCloseLink.onclick = this.close; aCloseLink.appendChild(document.createTextNode("X"));
divHeading.className = "ajaxWebSearchHeading"; divHeading.appendChild(document.createTextNode("MSN Search Results" divHeading.appendChild(aCloseLink);
var divLoading = document.createElement("div"); divLoading.appendChild(document.createTextNode("Loading Search Fe
divResultsPane.className = "ajaxWebSearchResults"; divResultsPane.appendChild(divLoading);
divSearchBox.className = "ajaxWebSearchBox"; divSearchBox.appendChild(divHeading); divSearchBox.appendChild(divResultsPane);
document.body.appendChild(divSearchBox);
this.position(e, divSearchBox);
return divSearchBox;
Элемент divSearchBox, подготовленный объектом msnWebSearch, быть возвращен вызывающей программе для выполнения по щих действий. Метод position(), как и следует из его названия,! ционирует окна. Он принимает два аргумента: объект event, ко передается методу drawResultBox, и сам позиционируемый элеме SearchBox:Первые две строки вычисляют координаты верхнего левого угла окна е результатами поиска. Для этого необходимы координаты х и у указа¬теля мыши, значения которых хранятся в свойствах clientX и clientY.
Однако для правильного позиционирования окна этих координат не¬достаточно, т. к. в свойствах clientX и clientY содержатся координаты указателя мыши относительно клиентской области в окне броузера, не фактические координаты в странице. Корректные координаты вы¬числяются на основании значений свойств scrollLef t и scrollTop корне-лого элемента документа. После вычисления координат можно устано¬вить положение окна в той точке, где пользователь щелкнул мышью.