Before the release of Microsoft's IE 5.0 browser, the biggest challenge faced in web programming was that components could not be easily created to achieve code reuse and multi-page sharing. This problem has always troubled DHTML (dynamic HEML) web page programmers. They can only keep rewriting HTML, CSS and JAVASCRIPT codes to meet repeated or similar functions on multiple pages. Since the release of the IE 5.0 browser, this situation has been improved. It has brought us a new instruction combination method, which can encapsulate the code that implements specific functions in a component, thereby realizing code reuse on multiple pages and making web programming easier. Enter a whole new world. This new technology is the "Behaviors" in DHTML 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 a "behavior" is attached to an element in a WEB page, the original behavior of the element will be changed. Therefore, web page programmers can develop general DHTML instructions and change some attributes of the original object, using "behavior" to enhance the functionality of an object, while also simplifying the HTML code of the page. Moreover, the creation and use of "behaviors" is also very simple and convenient, and the required knowledge is only the CSS style sheets, HTML instructions and JAVASCRIPT scripting language that are already used to using. As long as you know something about it and have actual programming experience, there is no problem in learning and mastering the use of "behaviors". We will take a "behavior" component that changes the font effect as an example to illustrate how to write and use a "behavior", and experience the advantages and convenience that "behavior" brings to page editing.
First, create a new text file named font_efftce.htc. The files that make up the "behavior" component all have .htc extensions. The content in this file is our description of this "behavior". The steps to create and use it are as follows:
(1) First add several event responses to this "behavior". The statement 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 names, here they are: onmouseover, onmouseout, onmousedown, onmouseup. Of course, you can add other event names to meet your specific needs. "ONEVENT" corresponds to the individual event handle, that is, the name of the function called when the event is triggered. The glowit() function creates a red glow around the font. The noglow() function removes the glow effect of the font. The Font2yellow() function changes the font color to yellow. The Font2blue() function changes the font color to blue. The definitions of all four events are similar.
(2) Next, add two more "method" definitions to this "behavior", the contents are 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 function names corresponding to the "methods" of moving down and right respectively. Note that do not put "( )" brackets after the method name, that is, do not write it like "move_down()". This is not allowed in the syntax of "method" definition.
(3) The next step is to use JAVASCRIPT script statements to write the function content corresponding to the "event handle" and "method" in the familiar DHTML environment to achieve the desired effect. Please refer to the source program below for specific content. The "element" parameter refers to the object to which this "behavior" is attached, because "behavior" is always attached to an element on the page and works through this element. The other statements are all DHTML programming content, so I won’t say more about them. If you have any questions, you can refer to Microsoft's MSDN development documentation for the IE browser, which contains detailed DHTML programming reference content, instructions for using properties and methods, and contains a large number of articles and example programs. Frequently visiting Microsoft's MSDN documentation is a good learning habit, especially for beginners. You can get almost any answer you are looking for. Its URL is: http://msdn.microsoft.com/ie/ .
The content of the complete "behavior" document "font_effect.htc" is as follows:
//////////////////////////////The "behavior" document begins // ///////////////////////////////////
//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 to store the font color
var font_color;
//Define a method to move text downward
function move_down()
{
element.style.posTop+=2;
}
//Define a method to move text to the right
function move_right()
{
element.style.posLeft +=6;
}
//Define the calling function of the mouse onmouseup event
function font2blue(){
if (event.srcElement == element)
{
element.style.color='blue';
}
}
//Define the calling function of the mouse onmousedown event
function font2yellow(){
if (event.srcElement == element)
{
element.style.color='yellow';
}
}
//Define the calling function of the mouse onmouseover event
function glowit()
{
if (event.srcElement == element)
{
font_color=style.color;
element.style.color='white';
element.style.filter="glow(color =red,strength=2)";
}
}
//Define the calling function of the mouse onmouseout event
function noglow()
{
if (event.srcElement == element)
{
element.style.filter="";
element.style.color=font_color;
}
}
< /SCRIPT >
/// ////////////////End of "Behavior" document //////////////////////////////// /
(4) How to use "behavior" on a page
Using the "behavior" component on a page does not require learning new knowledge. The required knowledge is nothing more than the settings of CSS style sheets and HTML. Please see the following statements.
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
It can be seen that this is different from the style we are already familiar with before The table settings are exactly the same. The above statement defines a style name: "myfilter", of which the relatively new content for us is: "behavior:url(font_effect.htc);", "behavior" is the name of the new "behavior" attribute, which It's how the "behavior" is set up in the style sheet. The content in brackets is the file name of the "behavior" document. In this example, it indicates that the "behavior" document is in the same directory as the page file. If the "behavior" document is placed in another directory, add "behavior" in front of this parameter. Corresponding pathnames to ensure that the Behavior document can be located correctly. The rest of the content in this "style" is just normal style attribute settings, which can be increased or decreased according to your needs, but in this example, due to the use of the "glow" filter effect, at least one width attribute must be set. Through the above style specification, we have a style named: "myfilter", which comes with a "behavior" with a font changing effect. If you want to use this style with "behavior" on a page component, it is also very simple. Just place the "style name" in the attribute setting area of the component, see the following statement.
< span id="myspan" class='myfilter' >The text effect produced by the behavior< /span >< br >
< span class='myfilter' >Glow after the mouse pointer</span>
There is nothing new in the above statement Content, class='myfilter' is the style setting we are familiar with. An "id" tag is also defined in the attribute of the first "span" tag. As you will see later, this is set to demonstrate calling the "method" within the "behavior". After this setting, the content in the "span" component can display the predetermined effect in the "behavior" component:
1. When the mouse pointer moves over the text content, a red glow effect is produced around the text, and the text turns white.
2. When the mouse button is pressed, the text color changes to yellow.
3． When the mouse button is lifted, the text color changes back to blue.
4. When the mouse pointer moves outside the text area, the red glow effect is removed and the text returns to its original appearance.
In addition, we set two "methods" when defining "behavior", "move_down" and "move_right". 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 onclick event of the button to call these two "methods". The previously defined "id" tag is used as the object name of the component, use "myspan.move_down" to call "methods" to manipulate this object. It can be seen that after pressing the corresponding button, the text in the first line will move downward or to the right. Although only the first line of text is used for demonstration, in fact, you can also move other objects as long as you make corresponding settings. 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 id="myspan" class='myfilter' >The text effect produced by the behavior< /span >< br >
< span class=' myfilter' >Glows after the mouse pointer< /span >< br >
< span class='myfilter' >At the same time, the text turns white< /span >< br >
< span class='myfilter' >The text turns yellow after the mouse is pressed </ /span >< br >
< span class='myfilter' >The text turns blue after the mouse is lifted< /span >< br >
< span class='myfilter' >The text returns to its original state after the mouse is moved away< /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 down</ /button >
</ /BODY >
</ /html >
Through the above brief introduction, we can see that we can easily combine multiple text change effects in one "behavior" at the same time, and arbitrarily change it through simple "style" settings. Related to page components, it reflects the advantages and powerful functions of "behavior" components. A "behavior" component can be reused not only within a page, but also for all pages on the same site. Just imagine, if you don't use "behavior" to achieve the above effects, although you can call a set of predetermined functions in the page to complete the same function, each element in the page that uses text effects will have four mouse events attached. If the same effect is used in multiple pages, the called function also needs to be set repeatedly in each page. In comparison, it is obvious which one is better and which one is worse. Therefore, using "behavior" components, you can create simple, efficient, versatile and easy-to-maintain pages. The examples in this article are only to illustrate the writing and using process of "behavior" components, so that readers can have a general understanding of "behavior" programming, and based on this, they can create the "behavior" components they need, or directly quote them to meet their personal needs. Ready-made "behavioral" components, because the concept of "component sharing" is also the original intention of "behavioral" developers. Finally, I hope this article can serve the purpose of "inspiring others" and enable readers to enter the wonderful world of DHTML web programming.