In Microsoft's Internet explorer browser version 5.0 release before, is facing the biggest challenge in web page programming cannot be easily create components, to achieve the purpose of code reuse and more pages to share. This problem has plagued the DHTML web programmer (dynamic HEML). They can only repeat writing HTML, CSS, and javascript code, in order to meet the multiple repetitive or similar function on a page. Since IE browser 5.0 release, this kind of situation has improved, it brings us a new method of assembly instructions, can implement specific functionality of the code is encapsulated in a component, so as to realize multiple page code reuse, web programming into a whole new world. This new technology will be the DHTML &we want to talk about other Behavior throughout the &; (Behaviors).

&other; Behavior throughout the &; As a simple and easy to use components that encapsulate specific function or action on a page. When the a &other; Behavior throughout the &; Attached to a component in a WEB page, this component will change the original behavior. Therefore, web programmers can develop common DHTML command, and change some attributes of the original object, use &other; Behavior throughout the &; To strengthen the function of an object, and simplify the page's HTML code. And &other; Behavior throughout the &; Create and use is also very easy and convenient, the required knowledge is only the original has been accustomed to using a CSS stylesheet, HTML and javascript scripting language instruction. As long as you are, we have the actual programming experience, learning and mastering &other; Behavior throughout the &; The use of no problem at all. We will be a change font and other effects; Behavior throughout the &; Component as an example to illustrate how to write and use a &other; Behavior throughout the &; And experience &other; Behavior throughout the &; Advantages and convenient place for page editor.

first setting-up a font_efftce. HTC's text files, composition &other; Behavior throughout the &; File is based on component. HTC for the extension, is the the contents of the file on this &we other Behavior throughout the &; In the description. It to create and use the steps below:

  code is as follows:  


(1) first for this &other; Behavior throughout the &; Add a few incident response, statement writing format is as follows:
<PUBLIC: ATTACH EVENT="onmouseover/>"
<PUBLIC: ATTACH EVENT="onmouseout/>"
<PUBLIC: ATTACH EVENT="onmousedown/>"
<PUBLIC: ATTACH EVENT="onmouseup"/>
[\ s \ s] * \ n
&other; EVENT” Corresponds to the event name, here nmouseover respectively, and the onmouseout, onmousedown, four onmouseup event name, of course, you can add other event name to meet your specific needs. &other; ONEVENT” Corresponds to a since the event handlers that event is triggered when the call of the function name. Glowit () function makes the font generated around a red glow. Noglow () function is to eliminate fonts glow effect. Font2yellow () function is to change the font color to yellow. Font2blue () function is to change the font color to blue. The definition of four events are similar.
(2) next, give this &other; Behavior throughout the &; Add two &other; Method &throughout; Definition, contents are as follows.
<PUBLIC: METHOD NAME="move_down/>"
<PUBLIC: METHOD NAME="move_right/>"
&other; NAME” The corresponding is given &other parameters; Method &throughout; The name. Move_down and move_right respectively is down and to the right &other; Method &throughout; Name of the corresponding function. Note that behind the method name, don't bring &other; (a) &throughout; Bracket, not written &other; Move_down () &throughout; Like this, it in &other; Method &throughout; Defined syntax is not allowed.
(3) the next job is DHTML in familiar circumstances, written in javascript statements &other; Event handlers &throughout; And &other Method &throughout; The corresponding function content, achieve the desired effect. Details refer to the following source program. Of them &other; Element” This ¶meter refers to the other Behavior throughout the &; Because the object of attachment, &other; Behavior throughout the &; Has always been attached to the page element, and through the elements play a role. The other statements are DHTML programming content, will no longer say more. If has the unclear place, can refer to Microsoft's MSDN development document related to the content of the IE browser, which has detailed the DHTML programming reference content, attributes and methods, instructions, etc., and contains a large number of articles and example applications. Often visit Microsoft's MSDN documentation, especially for beginners is a good study habits, you can get almost anything you want to find the answer, it's web site is: http://msdn.microsoft.com/ie/.
the complete &other; Behavior throughout the &; Document &other; Font_effect. Htc” Content is as follows:
////////////////////////&other; Behavior throughout the &; The beginning of the document////////////////////////////
//give &other; Behavior throughout the &; Add four mouse events

[code] <PUBLIC: ATTACH EVENT="onmouseout/>"
<PUBLIC: ATTACH EVENT="onmousedown/>"
<PUBLIC: ATTACH EVENT="onmouseup"/>
//give &other; Behavior throughout the &; Defines two methods
<PUBLIC: METHOD NAME="move_down/>"
<PUBLIC: METHOD NAME="move_right/>"
<SCRIPT LANGUAGE="JScript" >
//define a save variable
var font_color font color;
//defines the methods of move down the words
function move_down ()
{
element. The style.css. PosTop +=2;

}//definition to the right words
the method function move_right ()
{
element. The style.css. PosLeft +=6;

}//mouse onmouseup event function call
function font2blue () {
the if (event. The srcElement==element)
{
element. The style, color='blue';

}}
//define the mouse onmousedown event function call
function font2yellow () {
the if (event. The srcElement==element)
{
element. The style, color='yellow';

}}
//mouse onmouseover event function call
function glowit ()
{
the if (event. The srcElement==element)
{
font_color=style.css. Color;
element. The style. The color='white';
element. The style. The filter="glow [color=red, strength=2)";

}}
//mouse onmouseout events defined function call
function noglow ()
{
the if (event. The srcElement==element)
{
element. The style.css. Filter="";
element. The style. The color=font_color;

}}
</script>

//////////////////&other; Behavior throughout the &; End of the document///////////////////////////////
(4) how to use &other; on one page Behavior throughout the &;
on the page using &other; Behavior throughout the &; Components, it doesn't need to learn new knowledge. Knowledge is required for the CSS style sheet and HTML Settings, please see the following statement.

  code is as follows:  


<STYLE>
myfilter {behaviors: url (font_effect. HTC); Position: relative; The font - weight: bold; Width=180; Left: 0; }
</style>

you can see, and that we have already known before the same style sheet Settings. The above statement defines a style name: &other; Myfilter” , which is relatively new content for us: &other; Behaviors: url (font_effect. HTC); Throughout the &; , &other; Behavior” Is a new &other; Behavior throughout the &; The property name, this is &other Behavior throughout the &; In the style sheet Settings. The content is in parentheses &other; Behavior throughout the &; Document file, this case shows that &other; Behavior throughout the &; Document in the documents in the same directory page, if &other; Behavior throughout the &; Documents in other directory, in front of this parameter with the corresponding path name, to ensure correctly positioning &other; Behavior throughout the &; The location of the document. This &other; Style &throughout; The other content is ordinary style attribute is set, can according to your need to increase or decrease, but in this case, due to the use &the other; Glow” Filter effect, at least set a width (width) properties. Through the style specified above, we have a called: &other; Myfilter” Style, it comes with a font change effect &other; Behavior throughout the &; . If you want to use this on a page element attached &other; Behavior throughout the &; Style, also is very simple, as long as the &other; Style name &throughout; Placed in the element attribute Settings area, see the following statement.
<Span id=" Myspan" Class="myfilter >Behavior of text effects </span> <Br>
<Span class='myfilter >After the mouse point to produce glow </span>
the statement above there is no new content, class='myfilter' is our familiar style Settings. In the first &other; Span” The tag attributes also defines a &other; Id” Tag, you will see later, this is used to demonstrate call &other; Behavior throughout the &; &in the other Method &throughout; And set up. After this setting, &other; Span” The contents of the element can show &other; Behavior throughout the &; Components within the intended effect:
1. Move the mouse pointer to the text, the text around the red glow effect, at the same time become white text.
2. When the mouse button is pressed, the text color change to yellow.
3. After the mouse button to lift, text and color changes to blue.
4. When the mouse pointer outside the text area, remove the red glow effect, words.
in addition, we define &other; Behavior throughout the &; Set when the two &other; Method &throughout; , &other; Move_down &throughout; And &other Move_right &throughout; . To invoke the two &other Method &throughout; That define the two buttons:

  code is as follows:  


<Button> The first line to the right </button>

<Button> Move down the first line </button>

use the button onclick event to call these two &other; Method &throughout; , the previously defined &other; Id” Tag as component object name, use &other; Myspan. Move_down &throughout; To call &other; Method &throughout; To manipulate this object. As you can see, after press the corresponding button, can make the first line of text generation down or move to the right. Just do the demonstration with the first line, in fact, as long as do the corresponding Settings, you can also move the other object. Within the full page source document content is as follows:

  code is as follows:  


<HTML >
<HEAD >
<The TITLE >Demonstrate behavior effect </TITLE >
<STYLE >
myfilter {behaviors: url (font_effect. HTC); Position: relative; The font - weight: bold; Width=180; Left: 0; }
</style>
</head>
<Body>
<Myspan span id="" class=" myfilter '>Behavior of text effects </span>

<Span class='myfilter >After the mouse point to produce glow </span>

<Span class='myfilter >At the same time text white </span>

<Span class='myfilter >Press the mouse after the word yellow </span>

<Span class='myfilter >Lift the mouse after the word blue </span>

<Span class='myfilter >After the mouse left words restorable </span>

<Button> The first line to the right </button>

<Button> Move down the first line </button>
</body>
</html>

through the above simple introduction, we can see that we easily in a &other; Behavior throughout the &; The effect of combination of multiple words change at the same time, through simple &other; Style &throughout; Arbitrarily setting, which is associated with the page elements, embodies the &other Behavior throughout the &; Advantages and powerful features of components. A &other; Behavior throughout the &; Components, not only can be used within a page to repeat, also available to all pages on the same site. Imagine, if you don't use &other; Behavior throughout the &; To complete the effect, although you can call a set of predetermined function within the page to complete the same function, but the page within each element using word effect to attach four mouse events, if within multiple pages use the same effect, the called function also need repeat Settings within each page. In contrast, relative is obvious. So, use &other; Behavior throughout the &; Component that can produce concise, efficient, general page and easy to maintain. This article's example is merely to say that &other; Behavior throughout the &; Components of writing and use process, causes the reader to &other; Behavior throughout the &; Programming has a general understanding, and base to produce what you need &other Behavior throughout the &; Components, or direct reference to meet the individual needs of ready-made &other; Behavior throughout the &; Component, because &other; Components share &throughout; Is the concept of &other; Behavior throughout the &; The purpose of the developer. Finally, wish this article can play &other; Introduction &throughout; Purpose, make the reader into the wonderful DHTML web programming world.

note:
HTC is the abbreviation of the HTML component, is one of the main extension IE5.0
,
in addition to possess general components reusable merit,
also has the advantages of easy development use,
because of the need to introduce an external file, here is not, for example, the storehouse with example.

controls and components HTC provides a simple mechanism to implement DHTML behaviors in a script. A HTC file and the HTML file does not have any differences, and to &other . Htc” As the suffix,

you can use the HTC implement the following actions:
to set properties and methods. Through &other; PROPERTY” And &other METHOD” Elements define
set the custom events. Through &other; EVENT” Elements, with the element's &other; The fire () &throughout; Methods to release events,
by &other; CreateEventObject () &throughout; Methods set up the event environment.
visit contained the HTC's HTML page the DHTML object model, use the HTC &other Element" Object, return
element, an additional behavior using the object, HTC can access files and its object model (attributes, methods, events).
charge notice, use &throughout; ATTACH“ Element implementation, the browser DHTML event, not only inform HTC standards and inform HTC two special events: oncontentready events and ondocumentready event.

custom tag and namespace HTC is based on a custom tag
you want to define a custom tag for the page must provide namespace for the tag
to use this tag must be in front of the tag with the correct XML namespace prefix
example:
to define a new tag RIGHT example
the code snippet below:

  code is as follows:  


<HTML XMLNS: DOCJS>
<Head>
<STYLE>
@ media all {
DOCJS \ : RIGHT {text - align: RIGHT; Width: 100}
}
</style>
</head>
<Body>
<DOCjs: RIGHT>
Read Doc javascript 's columns, tips, tools, and tutorials
</DOCjs: RIGHT>
</body>
</html>

you can define multiple namespaces within a single HTML tags:
<HTML XMLNS: DOCJS XMLNS: DOCjavascript>

component definition component name is defined by HTC in the document in the first line of the XML namespace to
the page don't have to call other HTC's words, only one namespace definition
in fact, the definition of the HTML component is the definition of a custom tag behavior
this is to include an attribute and a events:

  code is as follows:  


<HTML XMLNS: MyTag>
<Head>
<PUBLIC: COMPONENT tagName="MyTag" >
<The PROPERTY NAME="value" ></PROPERTY>
<ATTACH the EVENT="oncontentready" <>/ATTACH>
</PUBLIC: COMPONENT>
<STYLE>//as the component definition stylesheet.
cssMyTag {
}
</style>
<SCRIPT language=javascript>
function MyTagBehavior1 () {}
//as the component definition method </script>
</head>
<BODY>

  code is as follows:  


function fnInit () {
the document. The BODY. The innerHTML=element. The value;//set the component content
the document. The body. The className="clsMyTag";//set the display style sheets,
defaults. The viewLink=document;//this component is made visible to other document
element. The aProperty=element. The value;//set the component's attribute values
}

component's invocation

  code is as follows:  


<HTML XMLNS: MyCom>
<Head>
<? IMPORT the NAMESPACE="MyCom" IMPLEMENTATION="MyTag. HTC/>"
</head>
<Body>
<MyCom: MyTag> </MyCom: MyTag>
</body>
</html>

# 0 - #


This concludes the body part