荔园在线
荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀
[回到开始]
[上一篇][下一篇]
发信人: Jobs (温少), 信区: Visual
标 题: IE 5.5新特性之Element Behaviors
发信站: BBS 荔园晨风站 (Mon Dec 13 21:51:53 1999), 站内信件
IE 5.5新特性 Element Behaviors
--------------------------------------------------------------------------------
This is preliminary documentation and is subject to change.
As of Microsoft® Internet Explorer 5.5, you can use HTML
Components (HTC) to create custom tags, or Element Behaviors.
Element Behaviors allow DHTML Behaviors to be completely bound
to an element. This enables the Element Behavior to be used
like any other element in an HTML document and ensures that the
functionality of the behavior is never removed from the
element.
Script that used to be included in the main HTML file is now
included in the HTC file—completely separating the tag's use
in the HTML file from its implementation in the HTC file.
Before behaviors appeared in Microsoft® Internet Explorer 5,
you had to attach script to each instance of a tag whose
behavior you wanted to change. Behaviors enable you to
automatically attach an action to each use of an existing tag,
and Element Behaviors extend this ability by allowing you to
attach behaviors to custom tags.
Traditionally, programmers write script and designers address
layout issues. Dividing work like this does not work well with
the Web paradigm, because HTML files often feature a mixture of
script and tags, making it difficult to separate each person's
responsibilities. Now, with Element Behaviors, designers can
work on the HTML files while script developers work on the HTC
file.
This overview describes Element Behaviors and provides example
code.
The following topics are discussed in this document.
Creating Custom Tags with Element Behaviors
Creating a Rollover Tag
Accessing Content Contained within Tags
Literal Content
Summary of Element Behaviors Tags
Related Topics
Creating Custom Tags with Element Behaviors
You can encapsulate the tag implementation in the HTC by using
the PUBLIC:COMPONENT tag with the new tagName attribute.
Because Element Behaviors are synchronous, Microsoft® Internet
Explorer ensures the Element Behavior is completely loaded
before its first use. You no longer need to write event
handlers to ensure everything is loaded.
One use of Element Behaviors is to create Component Object
Model (COM)-like components that you can drop into your Web
page, similar to Microsoft® ActiveX® components and the OBJECT
tag. The following example shows how you would create an online
game of checkers. With Internet Explorer 5.5 and Element
Behaviors, the script author creates the HTC that implements a
game—in this case, a game of checkers—and the designer uses
the newly created tag on a Web page. The script author creates
an HTC file called checkers.htc.
<PUBLIC:COMPONENT tagName="checkers">
<SCRIPT>
</SCRIPT>
</PUBLIC:COMPONENT>
The script author now writes the script for the checkers game
between the SCRIPT tags. The implementation of a game of
checkers is completely contained, or encapsulated, in the
checkers.htc file.
To use the new checkers tag, first create a new namespace (tags
must reside in a namespace). Declare the namespace with the
XMLNS attribute.
<HTML XMLNS:games>
The preceding tag declares a namespace called games. Next,
import the definition of the tag contained in the HTC.
<?IMPORT namespace="games" implementation="checkers.htc" >
You can use this tag like any other tag, except you must use
the name of its namespace in its name.
<games:checkers />
You can also use it like the following:
<games:checkers></games:checkers>
The complete HTML file that uses the implementation of checkers
is as follows:
<HTML xmlns:games>
<?IMPORT namespace="games" implementation="checkers.htc" >
<BODY>
<games:checkers />
</BODY>
</HTML>
The checkers.htc file contains the definition of the checkers
tag and implementation of the game checkers.
<PUBLIC:COMPONENT tagName="checkers">
<SCRIPT>
</SCRIPT>
</PUBLIC:COMPONENT>
Note that the implementation of the checkers tag contains no
references to a namespace. In fact, the same tag can be
imported into different namespaces in the main HTML file. Note,
too, that the new tag requires no event handlers to ensure the
tag definition is loaded before it is used.
Note If the user copies and pastes the checkers tag, Internet
Explorer ensures that the namespace declaration and the IMPORT
processing instruction are copied as well. This behavior
preserves the integrity of the Element Behavior, because the
namespace declaration and import tag are required for copying
and pasting to work properly.
The current implementation of the checkers tag lacks attributes
for setting the checker board's appearance or its play
strength, for example. You can add attributes to the checkers
tag as you would with ordinary behaviors in Internet Explorer 5
by using the PUBLIC:PROPERTY tag. For example:
<PUBLIC:PROPERTY NAME="boardWidth" />
For more information about using the PUBLIC:PROPERTY tag with
behaviors, see Implementing DHTML Behaviors in Script Using
HTML Components.
Creating a Rollover Tag
A more complex example involves creating a tag that implements
rollovers. Rollovers are text blocks that change their
appearance when the mouse pointer hovers over them. Rollovers
typically indicate where the user can click the mouse by
providing visual feedback.
Note This example illustrates how a rollover tag can be
implemented with Element Behaviors. A better way to implement
rollovers is by changing the behavior of the A tag. By doing
so, you can add rollover effects to your current Web pages
instead of requiring the use of a new tag. For an example of
how to use attached behaviors to implement rollovers, see Using
DHTML Behaviors.
Creating the Rollover HTC File
The HTC file contains the implementation of the rollover tag.
The tag has one property, called href, which is the hyperlink
of the Web page to visit when the user clicks the rollover. The
rollover tag needs to create event handlers for three different
events.
onmouseover—occurs when the user moves the mouse pointer over
the rollover. The event handler changes the text color to red,
underlines it, and changes the cursor to a hand.
onmouseout—occurs when the user moves the mouse pointer off
the rollover. The event handler restores the text to its
original state.
onclick—occurs when the user clicks the rollover. The event
handler loads the Web page specified by the href property, if
the property is defined.
The following example shows how to create the HTC file for the
rollover tag.
Create the HTC file.
Create a text file called rollover.htc and add the following
line to the top of the file.
<PUBLIC:COMPONENT tagName="rollover">
This example indicates that the HTC file contains the
implementation of a tag named rollover. End the file with:
</PUBLIC:COMPONENT>
Add the property definition.
After the first line, add the property definition for href.
<PUBLIC:PROPERTY NAME="href" />
This example defines an href property as part of the rollover
tag.
Create event handlers.
Attach handlers to three different events associated with the
rollover tag.
<PUBLIC:ATTACH EVENT="onmouseover" FOR="element" ONEVENT="Hilite
()" />
<PUBLIC:ATTACH EVENT="onmouseout" FOR="element" ONEVENT="UnHilite()" />
<PUBLIC ATTACH EVENT="onclick" FOR="element" ONEVENT="GotoLink
()" />
This example attaches events to the rollover element, as
follows:
onmouseover fires Hilite()
onmouseout fires UnHilite()
onclick fires GotoLink()
Write the event handler scripts.
Create the scripts and add the SCRIPT tag to enclose the event
handlers.
<SCRIPT>
</SCRIPT>
Next, between the SCRIPT tags, add the definitions of each
event handler. For the Hilite event handler, use:
function Hilite()
{
normalColor = element.style.color;
normalDecoration = style.textDecoration;
element.style.color = "red";
element.style.curosr = "hand";
element.style.textDecoration = "underline";
}
The Hilite event handler saves the color and text decoration of
the text contained within the rollover tags, sets the color to
red, sets the cursor to a hand (indicating a hyperlink), and
sets the decoration to underline.
For the UnHilite event handler, use:
function UnHilite()
{
element.style.color = normalColor;
element.style.textDecoration = normalDecoration;
element.style.cursor = "";
}
This event handler restores the color and text decoration of
the text within the rollover tag to the saved values in the
Hilite event handler.
Finally, for the GotoLink event handler, use:
function GotoLInk()
{
if(element.href)
{
location.href=element.href;
}
}
This event handler checks whether the href property is defined;
if it is, it navigates to that Uniform Resource Locator (URL).
The implementation of the rollover tag is complete. Now you can
use the rollover tag in your HTML file.
Using the Rollover Tag
The following example shows how to use the rollover tag.
Create the HTML file.
Create an HTML file and declare the namespace it will use at
the top of the file. This example will use a namespace called
addon. The name of the namespace is not important; only that
one is declared is important.
Declare the namespace.
To declare your namespace, use:
<HTML xmlns:addon>
Import the implementation of the tag.
Import the tag's implementation, as follows:
<?IMPORT namespace="addon" implementation="rollover.htc" >
The import tag is called a Processing Instruction, or PI, and
uses <? to start the tag instead of just the < characters.
Use the new tag.
You can now use the tag within your HTML file. For example:
<addon:rollover href="http://www.microsoft.com">Visit the
Microsoft Web Site</addon:rollover>
When the user moves the mouse pointer over the rollover tag,
the text contained within the tag changes to red underlined and
the cursor changes to a hand. When the user moves the mouse
pointer outside the rollover tag, the cursor changes back to an
arrow, and the text returns to its previous state. If the user
clicks the text within the rollover tag and the href attribute
is defined, the URL specified by the href attribute is loaded.
Accessing Content Contained within Tags
To access the content defined within tags, use the element
object. For example, in the HTC file you can access and change
the contents of a tag by referring to the element object.
element.style.color = "red";
The preceding example changes the color of the text contained
within the tag to red.
You can also access the HTML file's document object from the
HTC file by using the following syntax
element.document
If you use the document object alone, it refers to the HTC
file's document object.
Literal Content
If you want your tag to act as a data island, where the text
within it is neither parsed nor rendered, set the
literalContent attribute on the PUBLIC:COMPONENT element. This
is also called literal content. If you set the literalContent
attribute to true, you can no longer access the content of your
tag with the innerText property. You must use the innerHTML
property, but only after the oncontentready event has fired.
Otherwise, an error will occur that indicates that innerHTML
property is not yet available.
One new event, oncontentsave, has been created for literal
content, and an existing event, oncontentready, has additional
characteristics when used with literal content.
The oncontentsave event is fired during a save, copy, get
innerText, get innerHTML, or drag-and-drop operation.
The oncontentready event is fired when the literal content has
been stored in the innerHTML property and is ready for access.
Note The innerText property is not available with literal
content Element Behaviors. If you try to set the property
either in the HTC file or in the HTML file, an error will
occur. If you try to read the property, it will return null.
Use the innerHTML property instead.
For more information, see XML Data Islands.
Summary of Element Behaviors Tags
Three tags are needed to implement and use Element Behaviors.
The PUBLIC:COMPONENT tag identifies the name of the tag the HTC
file implements.
<PUBLIC:COMPONENT tagName = "tag">
...
</PUBLIC:COMPONENT>
In the HTML file, the following tag declares the namespace the
tag will be imported into.
<HTML xmlns:namespacename>
...
</HTML>
The IMPORT tag imports the tag implementation from the HTC file
into the namespace.
<?IMPORT namespace="namespacename" implementation="file.htc" >
The following example shows how to use the new tag.
<namespace:tag>
...
</namespace:tag>
Related Topics
Implementing DHTML Behaviors in Script Using HTML Components
Using DHTML Behaviors
XML Data Islands
ViewLink Overview
--------------------------------------------------------------------------------
Back to top
Did you find this topic useful? Suggestions for other topics?
Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
--
☆ 来源:．BBS 荔园晨风站 bbs.szu.edu.cn．[FROM: bbs@192.168.11.111]
[回到开始]
[上一篇][下一篇]
荔园在线首页 友情链接：深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店