Класс NewsTicker - это основной класс клиентской части кода, руктор класса принимает один аргумент- элемент HTML, должен быть добавлен в ленту новостей:
function NewsTicker(oAppendTo) { : var oThis = this; I - this.timer = null; this.feeds = [];
В нескольких первых строках кода инициализируются свой са NewsTicker. Сначала в переменную oThis записывается ссы даваемый объект. Свойство timer инициализируется значе потом это свойство будет играть важную роль в управлении, ем полосы (функция setTimeoutQ возвращает уникальный катор таймера). И наконец, инициализируется свойство feeds сив, в котором будут храниться объекты NewsTickerFeeds.
Следующие два свойства представляют основные элементы в
this.tickerContainer = document.createElement("div"); this.ticker = document.createElement("nobr");
this.tickerContainer.className = "newsTickerContainer"; this.ticker.className = "newsTicker";
Свойства tickerContainer и ticker содержат ссылки на вновь сс элементы и соответственно. Элемент tickerCo как и следует из его названия, выступает в роли контейнера тальных элементов виджета, а элемент ticker будет предста~ щую строку с заголовками новостей. Тег выбран по той не, что он не позволяет вносить переводы строк в текст, в случае у нас не получилась бы бегущая строка, т. к. текст бы вался в область просмотра. Ниже приводится код HTML, к лучается в результате работы конструктора:
Вспомните: одно из требований, предъявляемых к пользовательскому интерфейсу, гласит, что бегущая строка должна останавливать движе¬ние, когда указатель мыши оказывается над ней. Для соблюдения это¬го требования необходимо предусмотреть обработчики событий onmou-seover и onmouseout в элементе tickerContainer:
this;tickerContainer.onmouseover;function ;():{ V .-. clearTimeout(oThis. timer);
вос¬станавливает эффект движения бегущей строки.
Следующий шаг - добавление элемента ticker в tickerContainer и до¬бавление всего виджета в родительский элемент HTML:
this.tickerContainer.appendChild(this.ticker);
var oToAppend = (oAppendTo)?oAppendTo:document.body; oToAppend,appendChild(this.tickerContainer);
В первой строке этого фрагмента в элемент tickerContainer добавляется элемент ticker, что приводит к созданию кода HTML, который мы уже видели в этом разделе. Следующая строка реализует дополнительное удобство для разработчика. Если аргумент конструктора oAppendTo задан, то виджет помещается в указанный элемент. Если нет, то код HTML виджета размещается в элементе document, body, и мы получаем аргумент со значением по умолчанию. Таким образом, для того чтобы вставить виджет прямо в документ, достаточно вызвать конструктор без входного аргумента.
this, t icke г. style, left* this.tickQ;
В последних строках конструктора инициализируется бегущая строка:
this.tickerContainer.offsetWidth + "px"
В первой строке левый край строки позиционируется по правому краю элемента tickerContainer (строка бежит справа налево).
Броузеры Internet Explorer и Firefox позволяют установить различные отображения разметки, которые задаются на странице значением В режиме, известном под названием «стандартный», надо добавлять "рх" в любой код, который отвечает за позиционирование элемента, тивном случае броузер не будет позиционировать элемент.
В последней строке конструктора вызывается метод tick(), з щий движение бегущей строки. Полный код конструктора в так:
function NewsTicker(oAppendTo) { var oThis = this; this.timer = null; this.feeds = [];
this.tickerContainer = document.createElement("div"); this.ticker = document.createElement("nobr");
this.tickerContainer.className = "newsTickerContainer"; this.ticker.className = "newsTicker";
this.tickerContainer.onmouseover = function () { clearTimeout(oThis.timer);
};
this.tickerContainer.onmouseout = function () { oThis.tick();
};
this.tickerContainer.appendChild(this.ticker);
var oToAppend = (oAppendTo)?oAppendTo:document.body; oToAppend.appendChild(this.tickerContainer);
this.ticker.style.left = this.tickerContainer.offsetWidth + "px"; this.tick();
}