|    | 
СИ-БИ техника | КВ техника | УКВ техника | Радиоизмерения | Защита от TVI | Источники питания | Софт | Расчеты | return_links(); ?>
Справочники
Главная arrow Программирование arrow Java arrow Управление внешним видом элементов страницы  

Управление внешним видом элементов страницы

Оглавление
Управление внешним видом элементов страницы
Страница 2
Страница 3
Страница 4
Страница 4 из 4

Пример

Пример Web-страницы с абзацем, имеющим мерцающую рамку:

<HTML> <HEAD>

<TITLE>Мерцающая рамка</TITLE> <SCRIPT TYPE="text/javascript"> var isBlinked = false; function borderBlink() { var pObject = document.all["p"]; if (isBlinked) { pObject.style.borderLeftColor = "#0000FF"; pObject.style.borderTopColor = "#0000FF"; pObject.style.borderRightColor = "#0000FF"; pObject.style.borderBottomColor = "#0000FF"; } else {

pObject.style.borderLeftColor = "#FF0000"; pObject.style.borderTopColor = "#FF0000"; pObject.style.borderRightColor = "#FF0000"; pObject.style.borderBottomColor = "#FF0000"; } isBlinked = !isBlinked; } </SCRIPT> </HEAD> <BODY>

<P ID="p" STYLE="border: thin solid #0000FF">y меня мерцающая рамка!</Р>

<SCRIPT TYPE="text/javascript">

window.setlnterval("borderBlink()", 2000); </SCRIPT> </BODY> </HTML>

Здесь, чтобы обозначить состояние, в котором находится мерцающая рамка абзаца, мы также использовали переменную isBlinked, хранящую логическое значение. И по возможности будем делать впредь.

Народ предупреждает!

Свойства объекта style, задающие цвет, возвращают различные значения в зависимости от программы Web-обозревателя. В случае Internet Explorer и Opera возвращается значение вида #rrggbb, a Firefox вернет значение rgb(RR, GG, BB), где rr, gg и BB — доля, соответственно, красной, зеленой и синей составляющей в цвете. И здесь пресловутая несовместимость Web-обозревателей!..

Решение 2

Использование универсального объекта AnimatedEiement (листинг 5.1). Его конструктор имеет следующий формат вызова:

AnimatedEiement(<Элемент страницы>, <Интервал>, [<Массив выражений>]);

Первым параметром в конструктор передается экземпляр объекта, соответствующий элементу страницы, к которому мы хотим применить анимационный эффект. Второй параметр задает интервал времени в секундах (секунды нам все-таки привычнее). Тут все нам уже знакомо еще по методу setinterval объекта window.

А теперь— внимание! Третий параметр конструктора представляет собой массив строк, каждая из которых содержит выражение JavaScript. Все эти выражения будут выполняться после истечения интервала: сначала — выражение, содержащееся в первой строке-элементе массива, потом — во второй строке, далее — в третьей, в четвертой и, наконец, в последней; затем снова будет выполнено выражение в первой строке, и круг замкнется. Таких выражений в массиве может быть задано сколько угодно, но присутствовать должны хотя бы два.

Объект AnimatedElement имеет два метода, которые можно использовать в сценариях:

start — запуск анимационного эффекта;

stop — остановка анимационного эффекта.

Оба метода не принимают параметров и не возвращают результата.

Остальные методы и свойства этого объекта использовать не рекомендуется, т. к. объект может повести себя непредсказуемо. Если же понадобится изменить анимационный эффект, лучше всего уничтожить экземпляр объекта, создающего этот эффект, и создать его заново, с другими параметрами.

Народ предупреждает!

Перед уничтожением экземпляра объекта AnimatedEiement следует вызвать метод stop этого объекта.

Листинг 5.1. Объект AnimatedElement,

создающий простейший анимационный эффект для элемента страницы

// Счетчик созданных к данному времени экземпляров объекта

// AnimatedEiement

var jsps_AE_counter = 0;

// Список всех созданных к данному времени экземпляров объекта

// AnimatedElement

var jsps_AE_list = new Array();

/./ Функция-конструктор

function AnimatedElement(pElement, plnterval, pSt) {

this.element = pElement;

this.interval = plnterval * 1000;

this.actions = new Array();

for (var i = 0; i < pSt.length; i++) this.actions[i] = pSt[i];

this.start = mjspsAEStart;

this.stop = mjspsAEStop;

this.timer = null;

this.actionNumber = 0;

// Номер данного экземпляра объекта в списке jsps_AE_list

this.myNumber = jsps_AE_counter;

// Заносим данный экземпляр объекта в список jsps_AE_list

jsps_AE_.list [jsps_AE_counter] = this;

// Увеличиваем счетчик экземпляров этого объекта на единицу,

// подготавливая его для создания нового экземпляра

jsps_AE_counter++;

this.start(); }

// Функция, реализующая метод start. Заметим, что мы передаем в функцию // jspsAEDoAction, выполняющую очередное из заданных выражений, номер // данного экземпляра объекта AnimatedElement. Это нужно, чтобы данная // функция смогла получить к нему доступ function mjspsAEStart()

{

this.timer = window.setlnterval("jspsAEDoAction(" +

'bthis.myNumber.toString() + ")", this.interval); }

// Функция, реализующая метод stop function mjspsAEStop() {

if (this.timer)

window.clearlnterval(this.timer); this.timer = null; }

// Функция, выполняющая очередное из заданных выражений. Для доступа

// к данному экземпляру объекта AnimatedElement она использует

// список jsps_AE_list и передаваемый ей единственным параметром номер

// экземпляра этого объекта

function jspsAEDoAction(myNumber)

{ var my = jsps_AE_list[myNumber]; eval(my.actions[my.actionNumber]); if (my.actionNumber >= my.actions.length - 1)

my.actionNumber = 0 else

my.actionNumber++; }

Хорошая идея!

Поместите объявление этого объекта в файл сценариев animatedelement.js. Впоследствии, чтобы использовать его, достаточно будет просто подключить к Web-странице этот файл сценариев с помощью тега:

<SCRIPT SRC="animatedelement.js"></SCRIPT>

Пример

Переделанный пример Web-страницы с абзацем, имеющим мерцающую рамку:

<HTML> <HEAD>

<TITLE>Анимационный эффект</TITLE> <SCRIPT SRC="animatedelement.js"><SCRIPT>

<!-- Предполагается, что объявление объекта AnimatedElement было помещено в файл сценариев animatedelement.js --> <SCRIPT TYPE="text/javascript"> function btnOnClick() { var btnTriggerObject = document.all["btnTrigger"]; if (btnTriggerObject.value == "Мерцать!") { anobject.start();

btnTriggerObject.value = "He мерцать!"; } else { anObject.stop();

btnTriggerObject.value = "Мерцать!"; } }

</SCRIPT> </HEAD> <BODY>

<P ID="p" STYLE="border: thin solid #0000FF">y меня мерцающая рамка!</Р>

<FORM>

<INPUT TYPE="button" ID="btnTrigger" VALUE="He мерцать!"ONCLICK="btnOnClick();"> </FORM> <SCRIPT TYPE="text/javascript">

var pObject = document.all["p"];

function doMyAction(colorString) {

pObject.style.borderLeftColor = colorString;

pObject.style.borderTopColor = colorString;

pObject.style.borderRightColor = colorString;

pObject.style.borderBottomColor = colorString; }

var anObject = new AnimatedElement(pObject, 2, new Array("doMyAction('#FF0000');", "doMyAction('#00FF00');", "doMyAction('#0000FF');")); </SCRIPT> </BODY> </HTML>


« Пред. - След.


CitRadio.com - Электроника и компьютеры

0.1464