Использование расширений функциональности DHTML

Статья
10/20/2021

Использование расширений функциональности DHTML

Применить расширение функциональности к элементу так же просто, как применить стиль к элементу на странице. В этой статье рассматриваются различные подходы и особенности применения расширений функциональности к стандартным элементам HTML. Кроме того, в ней приводится ряд интересных образцов применения расширений функциональности в Microsoft Internet Explorer 5 и более поздних версиях. После прочтения статьи вы сможете применять расширения функциональности к элементам на собственных страницах, изолировать сценарии от содержимого и добиваться более упорядоченного оформления страниц.

Если вы имеете опыт создания страниц с использованием CSS, большая часть сведений в этой статье должна быть вам знакома. Если вы только начинаете осваивать CSS, в разделе Связанные разделы приведены ссылки на статьи, содержащие дополнительные сведения о CSS.

Реализация расширений функциональности также выходит за рамки данного документа и рассматривается в других статьях, ссылки на которые можно найти в разделе Связанные разделы.

Применение расширения функциональности к элементу
Применение нескольких расширений функциональности к элементу
- Разрешение конфликтов
Доступ к объектной модели расширения функциональности
- Использование свойств
- Вызов методов
- Обработка событий
Связанные разделы

Применение расширения функциональности к элементу

Применить расширение функциональности к элементу в Windows Internet Explorer можно двумя способами.

С помощью метода addBehavior в сценарии.

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

В следующем примере демонстрируется динамическое присоединение расширения функциональности, реализующего эффект подсветки при наведении указателя мыши, ко всем элементам li на странице с помощью метода addBehavior с последующим его отсоединением с помощью метода removeBehavior.

<SCRIPT LANGUAGE="JScript">

var collBehaviorID = new Array();

var collLI = new Array ();

var countLI = 0;

function attachBehavior()

{

       collLI = document.all.tags ("LI");

       countLI = collLI.length;

       for (i=0; i < countLI; i++)

       {

       var iID = collLI[i].addBehavior ("hilite.htc");

       // если расширение функциональности уже было добавлено к элементу,

       // метод addBehavior возвращает значение 0.

              if (iID)

              {

              collBehaviorID[i] = iID;

              }

       }

}

</SCRIPT>

:

Click <A HREF="javascript:attachBehavior()">here</A>

to add a highlighting effect as you hover over each item below.

:

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/components/htc/refs/addBehavior.htm
С помощью нового атрибута CSS behavior.

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

Примечание. При использовании атрибута behavior необходимо знать тип применяемого расширения функциональности: реализованное как двоичный компонент (код Microsoft Visual C++ или другой скомпилированный код), как расширение функциональности по умолчанию (встроенное в Internet Explorer) или как компонент сценария (компонент HTML или сценарий). От типа расширения функциональности зависит синтаксис, используемый для применения расширения функциональности к элементу с помощью CSS. Дополнительные сведения о синтаксисе, необходимом для применения атрибута behavior к элементу, см. на странице справки по атрибуту behavior.

Атрибут behavior, который предлагается в качестве атрибута CSS, может применяться к элементу так же, как и любой другой атрибут CSS.
- Путем определения встроенного стиля.
  
  <UL>
  <LI STYLE="behavior:url(hilite.htc)">HTML Authoring
  <LI STYLE="behavior:url(hilite.htc)">Dynamic HTML</LI>
  </UL>
  
  Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/hiliteA.htm
- Путем определения внедренного стиля с использованием элемента HTML в качестве селектора. В следующем примере поведение всех экземпляров элемента li будет определяться содержимым файла hilite.htc.
  
  <HEAD>
  
  <STYLE>
  
  LI { behavior:url(hilite.htc) }
  
  </STYLE>
  
  </HEAD>
  
  <BODY>
  
  <UL>
  
  <LI>HTML Authoring</LI>
  
  <LI>Dynamic HTML</LI>
  
  </UL>
  
  </BODY>
  
  Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/hiliteB.htm
- Путем определения внедренного стиля с использованием имени класса в качестве селектора. Обратите внимание, что селектор начинается с точки (.). Это является требованием синтаксиса при использовании имен классов в качестве селекторов. В следующем примере поведение всех элементов, которым присвоено имя класса HILITE, будет определяться содержимым файла hilite.htc.
  
  <HEAD>
  
  <STYLE>
  
  .HILITE { behavior:url(hilite.htc) }
  
  </STYLE>
  
  </HEAD>
  
  <BODY>
  
  <UL>
  
  <LI CLASS="HILITE">HTML Authoring</LI>
  
  <LI CLASS="HILITE">Dynamic HTML</LI>
  
  </UL>
  
  </BODY>
  
  Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/hiliteC.htm
- Путем задания подчиненного объекта стиля для элемента с помощью сценария, как в следующем примере.
  
  <HEAD>
  
  <SCRIPT>
  
  function window.onload()
  
  {
  
  L1.style.behavior = "url(hilite.htc)";
  
  L2.style.behavior = "url(hilite.htc)";
  
  }
  
  </SCRIPT>
  
  </HEAD>
  
  <BODY>
  
  <UL>
  
  <LI ID=L1>HTML Authoring</LI>
  
  <LI ID=L2>Dynamic HTML</LI>
  
  </UL>
  
  </BODY>
  
  Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/hiliteD.htm
Способ определения атрибута behavior зависит в первую очередь от числа элементов, к которым необходимо применить расширение функциональности. Определение расширения функциональности с помощью встроенного стиля или сценария наиболее целесообразно, если его требуется применить к определенному набору элементов. Если расширение функциональности требуется применить к набору элементов глобально, лучше определить внедренный стиль.

Примечание. Расширение функциональности, присоединенное к элементу посредством CSS с использованием определенного в документе правила стиля, автоматически отсоединяется от элемента при его удалении из дерева документа. При удалении элемента также разрываются все его связи с другими элементами в дереве документа, такими как правила таблицы стилей, которые определяют расширения функциональности. Расширение функциональности, присоединенное к элементу с помощью встроенного стиля или метода addBehavior, напротив, не отсоединяется от элемента автоматически при его удалении из иерархии документа. При применении расширений функциональности этими двумя способами зависимости от документа-контейнера отсутствуют. Поэтому расширение функциональности применяется к элементу даже после удаления элемента из дерева документа. Чтобы явным образом отсоединить подобное расширение функциональности от элемента, можно вызвать метод removeBehavior.

Применение нескольких расширений функциональности к элементу

Чтобы применить несколько расширений функциональности к элементу, можно указать в качестве значения атрибута behavior список URL-адресов, разделенных пробелами, как показано в следующем примере. Этот пример демонстрирует применение двух расширений функциональности к элементу, реализующих сочетание эффектов.

<UL>
<LI STYLE="behavior:url(collapsing.htc) url(hilite.htc)">HTML</LI>
<UL>
<LI>IE 4.0 authoring tips</LI>
:
</UL>
</UL>

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/components/htc/toc/toc.htm

Примечание. Для применения дополнительных расширений функциональности к элементу можно вызвать метод addBehavior.

Разрешение конфликтов

Если к элементу применяется несколько расширений функциональности, конфликты разрешаются в соответствии с очередностью применения расширений функциональности. Это означает, что в приведенном выше примере первым применяется расширение функциональности collapsing.htc, а затем — hilite.htc. Каждое расширение функциональности имеет приоритет над предыдущим. В этом примере не возникает конфликт назначения стилей. Поэтому стили, определяемые каждым из расширений функциональности, применяются к элементу ожидаемым образом. Если же оба расширения функциональности задавали бы цвет элемента, приоритет имело бы расширение функциональности hiliting, так как оно применяется к элементу последним. Это же правило применяется при разрешении конфликтов имен, например имен свойств, методов или событий, предоставляемых несколькими расширениями функциональности.

Следует иметь в виду, что, несмотря на возможность использования нескольких расширений функциональности, свойство behavior элемента может переопределяться точно так же, как и свойство color, если к элементу применяется несколько стилей. В следующем примере атрибут behavior определен как для класса Collapsing, так и для встроенного стиля, применяемого к элементу li. При разрешении конфликтов стилей в HTML-документе имеют приоритет правила каскадирования и наследования CSS. В этом случае встроенный стиль имеет приоритет над правилом с селектором CLASS. В соответствии с правилами CSS используется следующий порядок специфичности (от большей к меньшей): (1) встроенный стили; (2) ID; (3) CLASS; (4) элемент HTML. С учетом этого правила встроенный стиль, с помощью которого в примере к элементу применяется расширение функциональности hilite, имеет приоритет над классом Collapsing. Поэтому к элементу li применяется только эффект подсветки; эффект свертывания и развертывания не применяется.

<STYLE>

UL { font-family: verdana, arial, helvetica, sans-serif; font-size:10}

.Collapsing {behavior:url(collapsing.htc) }

</STYLE>

<UL>

<LI CLASS="Collapsing" STYLE="behavior:url(hilite.htc)">HTML Authoring</LI>

</UL>

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/components/htc/refs/multiple.htm

Доступ к объектной модели расширения функциональности

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

Использование свойств

Свойства расширения функциональности могут определяться как встроенные аналогично атрибутам HTML или с помощью сценария.

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

<HEAD>

<style>

.CollapsingAndHiliting {behavior:url(ul.htc),url(hilite.htc)}

</style>

</HEAD>

<BODY>

<UL>

<LI CLASS="CollapsingAndHiliting" CHILD="Topics1">HTML Authoring</LI>

<LI><A HREF="">Internet Explorer 4.0 authoring tips</A></LI>

<LI><A HREF="">Four special effects with Internet Explorer 4.0</A></LI>

</UL>

<LI CLASS="CollapsingAndHiliting" CHILD=Topics2>Dynamic HTML (DHTML)</LI>

<LI><A HREF="">Overview</A></LI>

<LI><A HREF="">Technology comparison</A></LI>

</UL>

<BODY>

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/components/htc/toc/toc.htm

Вызов методов

В следующем примере демонстрируется вызов метода расширения функциональности из страницы-контейнера. В этом примере расширение функциональности реализует эффект летающего текста и предоставляет метод tick().

<HEAD>

<STYLE>

.FLY {behavior:url(fly.htc)}

</STYLE>

</HEAD>

<H1 CLASS=FLY ID=oTitle>I Believe I Can Fly</H1>

</BODY>

Обработка событий

События, инициируемые расширениями функциональности, обрабатываются так же, как и стандартные события DHTML. Дополнительные сведения о различных способах обработки событий в Internet Explorer см. в статье Общие сведения о модели событий.

В следующем примере определяются два обработчика событий, fnSaveInput() и fnLoadInput(), для обработки событий onload и onsave соответственно. К элементу input применяется расширение функциональности saveFavorite. Благодаря этому при добавлении страницы в избранное содержимое элемента input сохраняется.

Дополнительные сведения о сохраняемости в Internet Explorer 5 см. в статье Общие сведения о сохраняемости.

<HEAD>

<STYLE>

.saveFavorite {behavior:url(#default#savefavorite)}

</STYLE>

function fnSaveInput(){

alert("The onsave event fired.");

oPersistInput.setAttribute("sPersistValue",oPersistInput.value);

}

function fnLoadInput(){

oPersistInput.value=oPersistInput.getAttribute("sPersistValue");

}

</SCRIPT>

</HEAD>

<BODY>

<INPUT class=saveFavorite onsave="fnSaveInput()" onload="fnLoadInput()"

type=text id=oPersistInput>

</BODY>

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/persistence/saveFavorite_1.htm

Связанные разделы

Ниже приведены ссылки на дополнительные материалы, посвященные расширениям функциональности DHTML.

Дополнительные ресурсы