Using DHTML Behaviors

This document describes technologies available in the Internet Explorer 5 Beta. While we encourage you to evaluate these features and to send us your feedback, please note that these features are subject to change.

Applying behavior to an element is as easy as attaching a style to an element on a page. This article covers the different approaches and considerations to applying behavior to standard HTML elements. In addition, it presents some interesting applications of behaviors in Microsoft® Internet Explorer 5. After reading the article, you'll be able to start applying behaviors to your own pages, isolate script from your content, and take advantage of the resulting cleaner pages.

If you've authored a page using cascading style sheets (CSS), most of the information in this article should be familiar to you. If you are new to CSS, the Related Topics section lists a couple of links to CSS articles that should provide good background information to get you started.

Implementing behaviors is also beyond the scope of this article and is discussed in a few separate articles listed in the Related Topics section.

Applying Behavior to an Element

If you've ever changed the style of an element on a page using CSS, you know exactly how to apply a behavior, using the proposed new CSS behavior attribute.

The following simple steps outline how to apply a behavior to an element:

Determine the implementation of the behavior you want to apply.

Behaviors can be implemented in three different ways. Depending on how it is implemented, the behavior attribute needs to be specified slightly differently.

As an HTML Component (HTC), the path to the HTC is specified.

   Click <A HREF="path.htm" STYLE="behavior:url(hilite.htc)">here</A>.

As a binary component, such as an ActiveX® Control or Java applet, the ID of the OBJECT element that corresponds to the behavior is specified.

   Click <A HREF="path.htm" STYLE="behavior:url(#oHilite)">here</A>.  
   :
   <OBJECT ID=oHilite HEIGHT=0 WIDTH=0 ... >
      <PARAM NAME="Color" VALUE="Red">      
   </OBJECT>

As a default behavior implemented internally by Internet Explorer, the constant identifier #default is specified, followed by the name of the behavior.

   <INPUT STYLE="behavior:url(#default#savefavorite)" TYPE=text ID=oPersistInput>

Apply the behavior to the element, just as you would apply a STYLE.

You can choose from four different ways to specify a behavior for an element.

By defining an inline style.

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

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

By defining an embedded style, using the HTML element as a selector. This example causes all instances of the anchor element, A, to behave as defined in hilite.htc.

   <HEAD>
   <STYLE>
      LI { behavior:url(hilite.htc) }
   </STYLE>   
   </HEAD>

<UL>
  <LI>HTML Authoring
  <LI>Dynamic HTML
</UL>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

By defining an embedded style, using a class name as a selector. Note that the selector begins with a period (.), which is the required syntax for class names as selectors. This will cause every element assigned the class name of HILITE to behave as defined in hilite.htc.

   <HEAD>
   <STYLE>
      .HILITE { behavior:url(hilite.htc) }
   </STYLE>   
   </HEAD>

<UL>
  <LI CLASS="HILITE">HTML Authoring
  <LI CLASS="HILITE">Dynamic HTML
</UL>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

By setting the style sub-object of the element through script.

   <HEAD>
   <SCRIPT>
   function window.onload()
   {
      L1.style.behavior = "url(hilite.htc)";
      L2.style.behavior = "url(hilite.htc)";
   }
   </SCRIPT>
   </HEAD>

<UL>
  <LI ID=L1>HTML Authoring
  <LI ID=L2>Dynamic HTML
</UL>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

How you choose to define the behavior will depend on how many elements you want to apply the behavior to. Defining the behavior inline or through script is best when you want to apply it to a select number of elements. Defining an embedded style is best for applying the behavior to a set of elements globally.

Accessing the Behavior's Object Model

As a component, a DHTML behavior may expose properties, methods, and events that define its object model. When a behavior is applied to an element, the element's properties, methods, and events are extended to include those exposed by the behavior.

Using Properties

Behavior properties can be specified inline on the element, the same way HTML attributes are specified, or through script.

For example, consider a behavior that implements displaying and hiding content. This behavior can be applied to an element, which when clicked, toggles the visibility of the elements underneath it. The behavior could expose a CHILD property to specify the element to be shown or hidden. The following example demonstrates how this behavior can be applied to a table of contents, and how a behavior's property can be specified inline.

<HEAD>
<style>
   .CollapsingAndHiliting {behavior:url(ul.htc),url(hilite.htc)}
</style>
</HEAD>

<UL>
  <LI CLASS="CollapsingAndHiliting" CHILD="Topics1">HTML Authoring</LI>
  <UL ID="Topics1">
      <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>
  <UL ID=Topics2>
      <LI><A HREF="">Overview</A></LI>
      <LI><A HREF="">Technology comparison</A></LI>
  :
  </UL>
</UL>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Calling Methods

The following example demonstrates how a behavior's method can be called from a containing page. The behavior in this example implements the effect of flying across a page and exposes a tick() method.

<HEAD>
<STYLE>
   .FLY  {behavior:url(fly.htc)}
</STYLE>
</HEAD>
     
<BODY onload="window.setInterval (oTitle.tick(), 1000)">
<H1 CLASS=FLY ID=oTitle>I Believe I Can Fly</H1>
:
</BODY>

Handling Events

Events fired by behaviors are handled the same way as standard events in DHTML. For more information on the various ways to handle events in Internet Explorer, refer to the article, Understanding the Event Model.

The following example defines two event handlers, fnSaveInput() and fnLoadInput(), to handle the onload and onsave events respectively. The example applies the saveFavorite behavior to an INPUT element. This causes the contents of the INPUT element to be saved when the page is added as a favorite.

For more information on persistence in Internet Explorer 5, please refer to Persistence Overview.

<HEAD>
<STYLE>
   .saveFavorite {behavior:url(#default#savefavorite);}
</STYLE>
<SCRIPT>
   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>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.