Before the release of Microsoft IE 5.0 browser, the biggest challenge in web programming was that it was not easy to create components to achieve the purpose of code reuse and multi-page sharing. This problem has been plaguing web programmers in DHTML (dynamic HEML). They can only repeat HTML, CSS, and javascript code to satisfy duplicate or similar functions on multiple pages. This situation has been improved since the release of the IE 5.0 browser. It brings us a new instruction combination method that can encapsulate code that implements specific functions in one component, thereby realizing multi-page code reuse and bringing web programming into a whole new world. This new technology is the "behaviors" in DHTML that we are going to talk about.
"Behavior" is a simple and easy-to-use component that encapsulates specific functions or actions on the page. When an "behavior" is attached to a component in the WEB page, the original behavior of the component will change. Therefore, web programmers can develop common DHTML instructions and change some properties of the original object, use "behavior" to enhance the function of an object, and simplify the HTML code of the page. Moreover, the creation and use of "behavior" is also very simple and convenient, and the knowledge required is only the CSS style sheets, HTML directives and javascript script languages that were used to. As long as you have some understanding of this and have had practical programming experience, there is no problem in learning and mastering the use of "behavior". We will use a "behavior" component that changes the effect of fonts as an example to illustrate how to write and use a "behavior" and experience the advantages and conveniences that "behavior" brings to page editing.
First, create a new text file named font_efftce.htc. The files that make up the "behavior" component are all with .htc as the extension. The content in this file is our description of this "behavior". Its creation and use steps are as follows:
(1) First add several event responses to this "behavior". The sentence writing format is as follows:
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
"EVENT" corresponds to the required event name, here are: onmouseover, onmouseout, onmousedown, and onmouseup. Of course, you can add other event names to meet your specific needs. "ONEVENT" corresponds to an event handle, that is, the name of the function called when the event is triggered. The glowit() function causes a red glow to be generated around the font. The noglow() function eliminates the glow effect of fonts. The Font2yellow() function changes the font color to yellow. The Font2blue() function changes the font color to blue. The definitions of the four events are all similar.
(2) Next, add two "methods" definitions to this "behavior", as follows.
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
The "NAME" parameter corresponds to the given "method" name. move_down and move_right are the corresponding function names of the "methods" that move down and right, respectively. Note that do not include "( )" brackets after the method name, that is, do not write "move_down()", which is not allowed in the syntax of the definition of "method".
(3) The next work is to use javascript script statements to write the function content corresponding to "event handle" and "method" in the familiar DHTML environment to achieve the expected results. For details, please refer to the source program below. The "element" parameter refers to the object to which this "behavior" is always attached to the element of the page and is used through this element. The other statements are DHTML programming content, so I won't say more. If you have any unknown points, you can refer to the content about IE browser in Microsoft's MSDN development document, which contains detailed DHTML programming reference content, attributes and method instructions, etc., and includes a large number of articles and example programs. Regular access to Microsoft's MSDN documents is a good study habit especially for beginners. You can get almost any answer you want, and its URL is: /ie/.
The contents of the complete "behavior" document "font_effect.htc" are as follows:
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Add four mouse events to "behavior"
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
//Define two methods for "behavior"
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
< SCRIPT LANGUAGE="JScript" >
//Define a variable that saves the font color
var font_color;
//Define a method to move text downward
function move_down()
{
+=2;
}
//Define the method of moving text to the right
function move_right()
{
+=6;
}
//Define the calling function of the mouse onmouseup event
function font2blue(){
if ( == element)
{
='blue';
}
}
//Define the calling function of the mouse onmousedown event
function font2yellow(){
if ( == element)
{
='yellow';
}
}
//Define the calling function of the mouse onmouseover event
function glowit()
{
if ( == element)
{
font_color=;
='white';
="glow(color=red,strength=2)";
}
}
//Define the calling function of the mouse onmouseout event
function noglow()
{
if ( == element)
{
="";
=font_color;
}
}
< /SCRIPT >
//////////////////////////////////////////////////////////////////////////////////////////////////
(4) How to use "behavior" on a page
Using the Behavior component on the page does not require learning new knowledge. The required knowledge is nothing more than the settings of CSS stylesheets and HTML. Please see the statement below.
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
As can be seen, this is exactly the same as the stylesheet settings we are already familiar with before. The above statement defines a style name: "myfilter", where the newer content for us is: "behavior:url(font_effect.htc);", "behavior" is the newly added "behavior" attribute name, which is how "behavior" is set in the style sheet. The content in brackets is the file name of the "behavior" document. In this example, the "behavior" document is in the same directory as the page file. If the "behavior" document is placed in another directory, the corresponding path name should be added before this parameter to ensure that the location of the "behavior" document can be correctly positioned. The rest of this "style" is the normal style attribute settings, which can be added or decreased according to your needs, but in this example, since the "glow" filter effect is used, at least one width attribute must be set. Through the above style specification, we have a style called "myfilter", which comes with a "behavior" with a font change effect. If you want to use this style with "behavior" on a page component, it is also very simple. Just place this "style name" in the component's property settings area, see the statement below.
< span class='myfilter' >Text effect produced by behavior< /span >< br >
< span class='myfilter' >The mouse pointing back to generate glow< /span >
There is nothing new in the above statement, class='myfilter' is the style setting we are familiar with. A "id" tag is also defined in the property of the first "span" tag, which you will see later. This is set to demonstrate the call to the "method" within the "behavior". After this setting, the contents in the "span" component can display the predetermined effect in the "behavior" component:
1. When the mouse pointer moves to the text content, a red glow effect is generated around the text, and the text turns white.
2. When the mouse button is pressed, the text color changes to yellow.
3. After the mouse button is raised, the text color changes to blue again.
4. When the mouse pointer moves outside the text area, the red glow effect is removed and the text is restored to its original state.
In addition, we set two "methods", "move_down" and "move_right" when defining "behavior". To call these two "methods", two buttons are defined:
< button onclick="myspan.move_right();" >Move the first line of text to the right< /button >< br >
< button onclick="myspan.move_down();" >Move the first line of text downward< /button >
Use the button's onclick event to call these two "methods". The previously defined "id" tag is used as the object name of the component, and use "myspan.move_down" to call the "method" to manipulate this object. You can see that after pressing the corresponding button, the text on the first line will be moved downward or to the right. Although it is just a demonstration with the first line of text, in fact, as long as you make the corresponding settings, you can also move other objects. The complete content of the page source document is as follows:
< html >
< HEAD >
< TITLE >Behavior effect demonstration< /TITLE >
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
< /HEAD >
< BODY >
< span class='myfilter' >Text effect produced by behavior< /span >< br >
< span class='myfilter' >The mouse pointing to generate glow< /span >< br >
< span class='myfilter' >Simultaneously the text turns white< /span >< br >
< span class='myfilter' >The text turns yellow after pressing the mouse< /span >< br >
< span class='myfilter' >The text turns blue after raising the mouse< /span >< br >
< span class='myfilter' >The text returns to its original state after the mouse leaves< /span >< br >
< button onclick="myspan.move_right();" >Move the first line of text to the right< /button >< br >
< button onclick="myspan.move_down();" >Move the first line of text downward< /button >
< /BODY >
< /html >
Through the above brief introduction, we can see that we can easily combine multiple text changes in a "behavior". Through simple "style" settings, we arbitrarily connect it to the page components, reflecting the advantages and powerful functions of the "behavior" component. A "behavior" component that can not only be reused within one page, but also can be used by all pages on the same site. Just imagine, if the above effects are not used to complete the above effects, although a predetermined set of functions can be called on the page to complete the same function, each element using text effects in the page must be attached with four mouse events. If the same effect is used in multiple pages, the called function also needs to be repeatedly set in each page. In contrast, it is obvious which one is better or worse. Therefore, using the "behavior" component, you can create a simple, efficient, universal and easy-to-maintenance page. The examples in this article are just to illustrate the writing and use process of "behavior" components, so that readers can have a general understanding of "behavior" programming, and use this basis to create the "behavior" components they need, or directly reference the ready-made "behavior" components that meet personal needs, because the concept of "component sharing" is also the original intention of "behavior" developers. Finally, I hope that this article can achieve the purpose of "showing bricks and attracting jade", allowing readers to enter the wonderful world of DHTML web programming.
illustrate:
HTML is the abbreviation of HTML component,
It is one of the main extensions of IE5.0,
In addition to the reusable advantages of general components,
It also has the advantages of easy development and use,
Because external files need to be introduced, I won’t give an example here, there are examples in the treasure house.
Controls and Components
HTC provides a simple mechanism to implement DHTML behavior in scripts. There is no difference between an HTML file and an HTML file, and it is suffixed with ".htc",
The following behavior can be achieved using HTC:
Set properties and methods. Definition through "PROPERTY" and "METHOD" elements
Set custom events. Implemented through the "EVENT" element, use the "fire()" method of the element to release the event,
Set the event environment through the "createEventObject()" method.
Access the DHTML object model of the HTML page containing the HTML, use the "element" object of HTC, and return
An additional behavior element, using this object, HTC can access the object model (properties, methods, events) that contains the document.
To receive notifications, use the "ATTACH" element to implement it, the browser not only notifies the HTC standard DHTML event, but also notifies HTC two special events: oncontentready event and ondocumentready event.
Define tags and namespaces
The basis of HTC is custom tags
To define a custom tag for a page, you must provide a namespace for that tag.
To use this tag, you must prefix the tag with the correct XML namespace.
For example:
Example of defining a new tag RIGHT
The code snippet 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>
Can be tagged in a single HTML
Define multiple namespaces:
<HTML XMLNS:DOCJS XMLNS:DOCjavascript>
Component definition
The name of the component is determined by the XML namespace defined in the first line in the HTC document.
This page does not need to call other HTC sessions, but only has one namespace definition.
In fact, the definition of HTML components is the definition of custom tag behavior.
This behavior includes a property and an event:
<HTML xmlns:MyTag>
<HEAD>
<PUBLIC:COMPONENT tagName="MyTag">
<PROPERTY NAME="value"></PROPERTY>
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH>
</PUBLIC:COMPONENT>
<STYLE>//Define stylesheets for components
.cssMyTag{
}
</STYLE>
<SCRIPT language=javascript>
function MyTagBehavior1(){} //Define method for component
</SCRIPT>
</HEAD>
<BODY onclick=MyTagBehavior1> //Define response events for the component
</BODY>
</HTML>
The oncontentready is triggered when the component is completely imported by the caller.
Let's take a look at fnInit()
function fnInit() {
= ;//Set the content of the component display
= "clsMyTag"; //Set the display style sheet,
= document;//Make this component visible to other documents
=; //Set the component's attribute value
}
Component call
<HTML xmlns:MyCom>
<HEAD>
<?IMPORT NAMESPACE="MyCom" IMPLEMENTATION=""/>
</HEAD>
<BODY>
<MyCom:MyTag></MyCom:MyTag>
</BODY>
</HTML>
"Behavior" is a simple and easy-to-use component that encapsulates specific functions or actions on the page. When an "behavior" is attached to a component in the WEB page, the original behavior of the component will change. Therefore, web programmers can develop common DHTML instructions and change some properties of the original object, use "behavior" to enhance the function of an object, and simplify the HTML code of the page. Moreover, the creation and use of "behavior" is also very simple and convenient, and the knowledge required is only the CSS style sheets, HTML directives and javascript script languages that were used to. As long as you have some understanding of this and have had practical programming experience, there is no problem in learning and mastering the use of "behavior". We will use a "behavior" component that changes the effect of fonts as an example to illustrate how to write and use a "behavior" and experience the advantages and conveniences that "behavior" brings to page editing.
First, create a new text file named font_efftce.htc. The files that make up the "behavior" component are all with .htc as the extension. The content in this file is our description of this "behavior". Its creation and use steps are as follows:
(1) First add several event responses to this "behavior". The sentence writing format is as follows:
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
"EVENT" corresponds to the required event name, here are: onmouseover, onmouseout, onmousedown, and onmouseup. Of course, you can add other event names to meet your specific needs. "ONEVENT" corresponds to an event handle, that is, the name of the function called when the event is triggered. The glowit() function causes a red glow to be generated around the font. The noglow() function eliminates the glow effect of fonts. The Font2yellow() function changes the font color to yellow. The Font2blue() function changes the font color to blue. The definitions of the four events are all similar.
(2) Next, add two "methods" definitions to this "behavior", as follows.
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
The "NAME" parameter corresponds to the given "method" name. move_down and move_right are the corresponding function names of the "methods" that move down and right, respectively. Note that do not include "( )" brackets after the method name, that is, do not write "move_down()", which is not allowed in the syntax of the definition of "method".
(3) The next work is to use javascript script statements to write the function content corresponding to "event handle" and "method" in the familiar DHTML environment to achieve the expected results. For details, please refer to the source program below. The "element" parameter refers to the object to which this "behavior" is always attached to the element of the page and is used through this element. The other statements are DHTML programming content, so I won't say more. If you have any unknown points, you can refer to the content about IE browser in Microsoft's MSDN development document, which contains detailed DHTML programming reference content, attributes and method instructions, etc., and includes a large number of articles and example programs. Regular access to Microsoft's MSDN documents is a good study habit especially for beginners. You can get almost any answer you want, and its URL is: /ie/.
The contents of the complete "behavior" document "font_effect.htc" are as follows:
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Add four mouse events to "behavior"
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
//Define two methods for "behavior"
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
< SCRIPT LANGUAGE="JScript" >
//Define a variable that saves the font color
var font_color;
//Define a method to move text downward
function move_down()
{
+=2;
}
//Define the method of moving text to the right
function move_right()
{
+=6;
}
//Define the calling function of the mouse onmouseup event
function font2blue(){
if ( == element)
{
='blue';
}
}
//Define the calling function of the mouse onmousedown event
function font2yellow(){
if ( == element)
{
='yellow';
}
}
//Define the calling function of the mouse onmouseover event
function glowit()
{
if ( == element)
{
font_color=;
='white';
="glow(color=red,strength=2)";
}
}
//Define the calling function of the mouse onmouseout event
function noglow()
{
if ( == element)
{
="";
=font_color;
}
}
< /SCRIPT >
//////////////////////////////////////////////////////////////////////////////////////////////////
(4) How to use "behavior" on a page
Using the Behavior component on the page does not require learning new knowledge. The required knowledge is nothing more than the settings of CSS stylesheets and HTML. Please see the statement below.
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
As can be seen, this is exactly the same as the stylesheet settings we are already familiar with before. The above statement defines a style name: "myfilter", where the newer content for us is: "behavior:url(font_effect.htc);", "behavior" is the newly added "behavior" attribute name, which is how "behavior" is set in the style sheet. The content in brackets is the file name of the "behavior" document. In this example, the "behavior" document is in the same directory as the page file. If the "behavior" document is placed in another directory, the corresponding path name should be added before this parameter to ensure that the location of the "behavior" document can be correctly positioned. The rest of this "style" is the normal style attribute settings, which can be added or decreased according to your needs, but in this example, since the "glow" filter effect is used, at least one width attribute must be set. Through the above style specification, we have a style called "myfilter", which comes with a "behavior" with a font change effect. If you want to use this style with "behavior" on a page component, it is also very simple. Just place this "style name" in the component's property settings area, see the statement below.
< span class='myfilter' >Text effect produced by behavior< /span >< br >
< span class='myfilter' >The mouse pointing back to generate glow< /span >
There is nothing new in the above statement, class='myfilter' is the style setting we are familiar with. A "id" tag is also defined in the property of the first "span" tag, which you will see later. This is set to demonstrate the call to the "method" within the "behavior". After this setting, the contents in the "span" component can display the predetermined effect in the "behavior" component:
1. When the mouse pointer moves to the text content, a red glow effect is generated around the text, and the text turns white.
2. When the mouse button is pressed, the text color changes to yellow.
3. After the mouse button is raised, the text color changes to blue again.
4. When the mouse pointer moves outside the text area, the red glow effect is removed and the text is restored to its original state.
In addition, we set two "methods", "move_down" and "move_right" when defining "behavior". To call these two "methods", two buttons are defined:
< button onclick="myspan.move_right();" >Move the first line of text to the right< /button >< br >
< button onclick="myspan.move_down();" >Move the first line of text downward< /button >
Use the button's onclick event to call these two "methods". The previously defined "id" tag is used as the object name of the component, and use "myspan.move_down" to call the "method" to manipulate this object. You can see that after pressing the corresponding button, the text on the first line will be moved downward or to the right. Although it is just a demonstration with the first line of text, in fact, as long as you make the corresponding settings, you can also move other objects. The complete content of the page source document is as follows:
< html >
< HEAD >
< TITLE >Behavior effect demonstration< /TITLE >
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
< /HEAD >
< BODY >
< span class='myfilter' >Text effect produced by behavior< /span >< br >
< span class='myfilter' >The mouse pointing to generate glow< /span >< br >
< span class='myfilter' >Simultaneously the text turns white< /span >< br >
< span class='myfilter' >The text turns yellow after pressing the mouse< /span >< br >
< span class='myfilter' >The text turns blue after raising the mouse< /span >< br >
< span class='myfilter' >The text returns to its original state after the mouse leaves< /span >< br >
< button onclick="myspan.move_right();" >Move the first line of text to the right< /button >< br >
< button onclick="myspan.move_down();" >Move the first line of text downward< /button >
< /BODY >
< /html >
Through the above brief introduction, we can see that we can easily combine multiple text changes in a "behavior". Through simple "style" settings, we arbitrarily connect it to the page components, reflecting the advantages and powerful functions of the "behavior" component. A "behavior" component that can not only be reused within one page, but also can be used by all pages on the same site. Just imagine, if the above effects are not used to complete the above effects, although a predetermined set of functions can be called on the page to complete the same function, each element using text effects in the page must be attached with four mouse events. If the same effect is used in multiple pages, the called function also needs to be repeatedly set in each page. In contrast, it is obvious which one is better or worse. Therefore, using the "behavior" component, you can create a simple, efficient, universal and easy-to-maintenance page. The examples in this article are just to illustrate the writing and use process of "behavior" components, so that readers can have a general understanding of "behavior" programming, and use this basis to create the "behavior" components they need, or directly reference the ready-made "behavior" components that meet personal needs, because the concept of "component sharing" is also the original intention of "behavior" developers. Finally, I hope that this article can achieve the purpose of "showing bricks and attracting jade", allowing readers to enter the wonderful world of DHTML web programming.
illustrate:
HTML is the abbreviation of HTML component,
It is one of the main extensions of IE5.0,
In addition to the reusable advantages of general components,
It also has the advantages of easy development and use,
Because external files need to be introduced, I won’t give an example here, there are examples in the treasure house.
Controls and Components
HTC provides a simple mechanism to implement DHTML behavior in scripts. There is no difference between an HTML file and an HTML file, and it is suffixed with ".htc",
The following behavior can be achieved using HTC:
Set properties and methods. Definition through "PROPERTY" and "METHOD" elements
Set custom events. Implemented through the "EVENT" element, use the "fire()" method of the element to release the event,
Set the event environment through the "createEventObject()" method.
Access the DHTML object model of the HTML page containing the HTML, use the "element" object of HTC, and return
An additional behavior element, using this object, HTC can access the object model (properties, methods, events) that contains the document.
To receive notifications, use the "ATTACH" element to implement it, the browser not only notifies the HTC standard DHTML event, but also notifies HTC two special events: oncontentready event and ondocumentready event.
Define tags and namespaces
The basis of HTC is custom tags
To define a custom tag for a page, you must provide a namespace for that tag.
To use this tag, you must prefix the tag with the correct XML namespace.
For example:
Example of defining a new tag RIGHT
The code snippet 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>
Can be tagged in a single HTML
Define multiple namespaces:
<HTML XMLNS:DOCJS XMLNS:DOCjavascript>
Component definition
The name of the component is determined by the XML namespace defined in the first line in the HTC document.
This page does not need to call other HTC sessions, but only has one namespace definition.
In fact, the definition of HTML components is the definition of custom tag behavior.
This behavior includes a property and an event:
<HTML xmlns:MyTag>
<HEAD>
<PUBLIC:COMPONENT tagName="MyTag">
<PROPERTY NAME="value"></PROPERTY>
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH>
</PUBLIC:COMPONENT>
<STYLE>//Define stylesheets for components
.cssMyTag{
}
</STYLE>
<SCRIPT language=javascript>
function MyTagBehavior1(){} //Define method for component
</SCRIPT>
</HEAD>
<BODY onclick=MyTagBehavior1> //Define response events for the component
</BODY>
</HTML>
The oncontentready is triggered when the component is completely imported by the caller.
Let's take a look at fnInit()
function fnInit() {
= ;//Set the content of the component display
= "clsMyTag"; //Set the display style sheet,
= document;//Make this component visible to other documents
=; //Set the component's attribute value
}
Component call
<HTML xmlns:MyCom>
<HEAD>
<?IMPORT NAMESPACE="MyCom" IMPLEMENTATION=""/>
</HEAD>
<BODY>
<MyCom:MyTag></MyCom:MyTag>
</BODY>
</HTML>