Before the Microsoft IE 5.0 version of the browser release, the biggest challenge in web programming is the inability to easily create components to achieve code reuse and multiple page sharing purposes. This problem has been plagued by DHTML (dynamic HEML) Web programmers. They can only repeatedly write HTML, CSS, and JavaScript code to meet repetitive or similar features on multiple pages. Since the release of IE 5.0 browser, this situation has been improved, it brings us a new instruction combination method, can implement specific functions of the code encapsulated in a component, so as to achieve multiple pages of code reuse, so that web programming into a new world. This new technology is what we're going to talk about in the DHTML "behavior" (behaviors).
Behavior is a simple and easy-to-use component that encapsulates specific features or actions on a page. When a "behavior" is attached to a component on a Web page, the original behavior of the component changes. As a result, web programmers can develop common DHTML directives and change some attributes of the original object, using "behavior" to enhance the function of an object, but also simplifies the HTML code of the page. and "behavior" is very easy to create and use, and the knowledge you need is just CSS style sheets, HTML directives, and JavaScript scripting languages that you used to use. As long as you know something about it, there is a real programming experience, learning and mastering the use of "behavior" is completely no problem. We'll take an example of a "behavior" component that changes the font effect to illustrate how to write and use a "behavior" and experience the advantages and benefits of "behavior" for page editors.
First create a new text file named FONT_EFFTCE.HTC, and the file that makes up the behavior component is the. htc extension, and the content in this file is our description of this "behavior." The steps to create and use it are as follows:
(1) First of all, add a few event responses to this "behavior", and write the following statement form:
< 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 desired event name, here is: Onmouseover,onmouseout,onmousedown,onmouseup Four event names, you can certainly add other event names to meet your specific needs. "ONEVENT" corresponds to a self event handle, which 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 eliminates the glow effect of a font. The Font2yellow () function is to change the font color to yellow. The Font2blue () function is to change the font color to blue. The definitions of the four events are similar.
(2) Next, add another two "method" 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 function names for the "method" that moves down and to the right respectively. Note that you do not have the "()" bracket after the method name, that is, do not write "Move_down ()", which is not allowed in the syntax defined by the method.
(3) The next task is in our familiar DHTML environment, using JavaScript script statements to write "event handle" and "method" of the corresponding function content to achieve the desired effect. 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 the component of the page and works through the component. All the other statements are DHTML programming content, no more talking. In the case of ambiguity, refer to the Microsoft MSDN Development documentation for IE, which contains detailed DHTML programming references, attributes, and method usage instructions, and includes a large number of articles and example programs. Frequent access to Microsoft's MSDN documentation, especially for beginners is a good learning habit, you can almost get any answer you want to find, its Web site is: http://msdn.microsoft.com/ie/.
The complete "behavior" document "FONT_EFFECT.HTC" reads as follows:
"Behavior" document starts///////////////////////////////////
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 holds the font color
var Font_color;
Define a way to move text down
function Move_down ()
{
element.style.postop+=2;
}
Define how to move text to the right
function Move_right ()
{
Element.style.posLeft +=6;
}
To define the call function for the mouse onmouseup event
function Font2blue () {
if (event.srcelement = = Element)
{
Element.style.color= ' Blue ';
}
}
To define the call function for the mouse onmousedown event
function Font2yellow () {
if (event.srcelement = = Element)
{
Element.style.color= ' Yellow ';
}
}
To define the call function for 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)";
}
}
To define the call function for the mouse onmouseout event
function Noglow ()
{
if (event.srcelement = = Element)
{
Element.style.filter= "";
Element.style.color=font_color;
}
}
</script >
"Behavior" document end///////////////////////////////
(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 just a CSS style sheet and HTML settings, see the following statement.
< STYLE >
. Myfilter{behavior:url (FONT_EFFECT.HTC);p osition:relative;font-weight:bold;width=180;left:0;
</style >
As you can see, this is exactly the same style sheet setting that we've known before. The above statement defines a style name: "Myfilter", which for us the newer content is: "Behavior:url (FONT_EFFECT.HTC);", "behavior" is the new "behavior" property name, this is "behavior" How to set up in the style sheet. The contents in parentheses are the file names of the behavior document, this example shows that the "behavior" document is in the same directory as the paging file, and if the behavior document is placed in a different directory, precede the parameter with the appropriate pathname to ensure that the location of the behavior document can be correctly positioned. The other content in this style is the Normal style property setting, which can be added or subtracted depending on your needs, but in this case, you need to set at least one width property because of the "glow" filter effect. By using the above style designation, we have a style named "Myfilter", which comes with a "behavior" that has a font change effect. If you want to use this "behavior" style on a page component, it's also very simple, just place the "style name" in the component's property settings area, and see the following statement.
< span id= "MySpan" class= ' myfilter ' > behavior-resulting text effect </span >< br >
< span class= ' myfilter ' > mouse pointer produces glow </span >
There is nothing new in the above statement, class= ' Myfilter ' is a familiar style setting. An "ID" tag is also defined in the properties of the first span tag and is later seen to demonstrate the method set in the call behavior. After this setting, the content in the span component can display the intended effect within the behavior component:
1. When the mouse pointer moves over the text, it produces a red glow 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 raised, the text color changes to blue.
4. When the mouse pointer moves outside the text area, the red glow is removed and the text is returned to its original shape.
In addition, we set two "methods", "Move_down" and "move_right" when defining "behavior". To invoke these two "methods", two buttons are defined:
< button onclick= "myspan.move_right ();" > to the right move the first line of text </button >< br >
< button onclick= "Myspan.move_down ();" > Move down the first line of text </button >
Using the button's OnClick event to invoke these two "methods", the previously defined "ID" tag acts as the object name of the component, using "Myspan.move_down" to Invoke "method" to manipulate the object. You can see that when you press the appropriate button, the text in the first line will move down or to the right. Although just using the first line of text to do the demonstration, in fact, as long as the appropriate settings, you can also move other objects. The full contents of the page source document are as follows:
< HTML >
< head >
< TITLE > Behavior Effect Demo </title >
< STYLE >
. Myfilter{behavior:url (FONT_EFFECT.HTC);p osition:relative;font-weight:bold;width=180;left:0;
</style >
< BODY >
< span id= "MySpan" class= ' myfilter ' > behavior-resulting text effect </span >< br >
< span class= ' myfilter ' > mouse pointer produces glow </span >< br >
< span class= ' myfilter ' > simultaneous text to white </span >< br >
< span class= ' myfilter ' > Mouse text turned yellow </span >< br >
< span class= ' myfilter ' > lifting the mouse text to blue </span >< br >
< span class= ' myfilter ' > Text restored after mouse departure </span >< br >
< button onclick= "myspan.move_right ();" > to the right move the first line of text </button >< br >
< button onclick= "Myspan.move_down ();" > Move down the first line of text </button >
</body >
Through the above simple introduction, we can see that we easily in a "behavior" in combination with a variety of text changes in the effect, through a simple "style" settings, arbitrarily it related to page components, embodies the "behavior" component of the advantages and powerful features. A "behavior" component that can be reused not only on one page, but also for all pages on the same site. Imagine, if you do not use "behavior" to do the above, although you can call a set of predefined functions in the page to complete the same function, but the page each use text effects of the components to attach four mouse events, if the same effect on multiple pages, The called function also needs to be set repeatedly within each page. In contrast, it is obvious that one is superior to the other. So, with the "behavior" component, you can make pages that are simple, efficient, generic, and easy to maintain. The examples in this article are just to illustrate the process of writing and using the "behavior" component, give the reader a general idea of "behavior" programming, and use it to make the "behavior" component that it needs, or to directly refer to ready-made "behavior" components that meet your individual needs, because the concept of "component sharing" is also the intention of the "behavioral" developer. Finally, I hope this article can play a "good start" to enable readers to enter the wonderful DHTML Web programming world.
Description
HTC is an acronym for HTML component,
is one of the major extensions of IE5.0,
In addition to the reusable benefits of general components,
Also has the advantages of easy to develop and use,
Because of the need to introduce external files, here is no example, there are examples in the Treasury.
Controls and components
HTC provides a simple mechanism for implementing DHTML behavior in scripts. There is no difference between an HTC file and an HTML file, and the suffix ". HTC"
You can use HTC to implement the following behaviors:
Set properties and methods. Defined by "Property" and "method" elements
Sets custom events. The event element is implemented with the "Fire ()" method of the element to release the events.
Set up the event environment through the Createeventobject () method.
Access the DHTML object model that contains the HTC's HTML page, using HTC's "element" object to return
An element of an additional behavior in which HTC can access the object model (properties, methods, events) that contains the document and its objects.
Receive notifications, implemented using the "ATTACH" element, the browser not only notifies HTC standard DHTML events, but also notifies HTC of two special events: Oncontentready events and Ondocumentready events.
Defining tags and namespaces
HTC is based on custom tags
To define a custom tag for a page, you must provide a namespace for the tag
To use this tag, you must precede the tag with the correct XML namespace prefix
For example:
Example of defining a new tag right
The code snippet is as follows: <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 in a single HTML tag
To define multiple namespaces in:
Component definition
The name of the component is determined by the XML namespace defined in the first row of the HTC Document
This page does not need to invoke other HTC words, there is only one namespace definition
In fact, the definition of an HTML component is the definition of a custom label behavior
The behavior includes a property and an event:
<HEAD>
<public:component tagname= "MyTag" >
<property name= "Value" ></PROPERTY>
<attach event= "Oncontentready" onevent= "Fninit ()" <>/ATTACH>
</PUBLIC:COMPONENT>
<style>//defines a style sheet for a component
. cssmytag{
}
</STYLE>
<script language=javascript>
function MyTagBehavior1 () {}//To define method for component
</SCRIPT>
</HEAD>
<body onclick=mytagbehavior1>//define response events for components
</BODY>
</HTML>
The oncontentready is triggered when the component is fully imported by the caller
And look at Fninit ()
function Fninit () {
Document.body.innerHTML = element.value;//Set component display content
Document.body.className = "Clsmytag"; Set the display style sheet,
Defaults.viewlink = document; Make this component visible to other documents
Element.aproperty = Element.value; Set property values for a component
}
Calls to Components
<HEAD>
? IMPORT namespace= "mycom" implementation= "MYTAG.HTC"/>
</HEAD>
<BODY>
<MyCom:MyTag></MyCom:MyTag>
</BODY>
</HTML>
