HTC introduction
Article Source: 山 夜
Http://www.33d9.com
Before Microsoft IE 5.0 version of the browser released, the biggest challenge in web programming is to easily create components to achieve the code reuse and multi-page sharing. This problem has been plaguing DHTML (dynamic HEML) web programming. They can only repeat the code from HTML, CSS, and JavaScript to meet the repetitive or similar functions on multiple pages. After the IE 5.0 browser is released, this situation has been improved, which brings us a new instruction combination method, which can encapsulate the code that implements a specific function in one component, so that the multi-page code is reused, so that web page programming Enter a new world. This new technology is what we have to talk about "Behaviors" in DHTML.
"Behavior" As a simple and easy-to-use component, it encapsulates a specific function or action on the page. When a "behavior" attached to one component in the web page, the original behavior of this component changes. Therefore, web programming can develop universal DHTML instructions and change some properties of the original object, with "behavior" to enhance the functionality of an object, and simplify the HTML code of the page. And "behavior" creation and use is also very simple and convenient, and the knowledge you need is just the CSS style sheet, HTML instruction, and JavaScript scripting language that have been used. As long as you know this, there is a practical programming experience, learning and mastering the use of "behavior" is completely no problem. We will explain how to write and use a "behavior" and experience "Behavior", and experience "Behavior" and experience "Behavior" and experience "behavior".
First create a text file called Font_EffTce.htc, which makes up the "Behaviors" component, is the extension of .htc, the content in this file is our description of this "behavior". Its creation and use steps are as follows:
(1) First add a few event responses to this "behavior", the statement is written, and the format is as follows:
"Event" corresponds to the desired event name, here: OnMouseover, ONMOUSEOUT, ONMOUSEDOWN, ONMOUSEUP four event names, you can of course add additional event names to meet your specific needs. "Onevent" corresponds to a self-event handle, the function name called when the event is triggered. The Glowit () function produces a red glow around the font. Noglow () function is the glow effect of eliminating fonts. The font2yellow () function is to change the color of the font to yellow. The font2bo () function is changed to blue in the font color. The definition of four events is similar.
(2) Next, give this "behavior" to add two "method" definitions, the content is as follows.
(3) The next job is to write the function content corresponding to the "Event Handle" and "Method" in the DHTML environment we are familiar with, to achieve the intended effect. Specific content refer to the source program below. The "Element" parameter refers to the object attached to this "behavior", because "Behavior" is always attached to the component of the page, and functions in this component. Other statements are DHTML programming content, no more. If there is any unknown, you can refer to Microsoft's MSDN development documentation about IE browser content, with detailed DHTML programming reference content, attributes, and methods for use, etc., and contain a large number of articles and examples. I often visit Microsoft's MSDN documentation, especially for beginners, it is a good study habit, you can almost get any answers you want to find, its URL:
Http://msdn.microsoft.com/ie/.
The content of the complete "behavior" document "font_effect.htc" is as follows:
"Behavior" document start ///
// Add four mouse events to "Behavior"
// Define two methods for "behavior"
/ / Define a variable that saves font color
Var font_color;
/ / Define how to move downward
Function move_down ()
{
Element.style.postop = 2;
}
/ / Define how to move to right
Function move_right ()
{
Element.style.posleft = 6;
}
/ / Define the call function of the mouse overmouseUp event
Function font2blue () {
IF (event.srcelement == Element)
{
Element.style.color = 'blue';
}
}
/ / Define the call function of the mouse onmousedown event
Function font2yellow () {
IF (event.srcelement == Element)
{
Element.style.color = 'Yellow';
}
}
/ / Define the call 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, strongth = 2)";
}
}
/ / Define the call function of 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 the page does not need to learn new knowledge. The required knowledge is just the setting of the CSS style sheet and HTML. Please see the following statement.
.myfilter {behavior: URL (font_effect.htc); Position: Relative; Font-Weight: bold; width = 180; Left: 0;
Style>
It can be seen that this is identical to the style sheet we have known before. The above statement defines a style name: "Myfilter", which is more new for us: "Behavior: URL (font_effect.htc);", "Behavior" is a new "Behaviors" property name, this It is "behavior" setting mode in the style sheet. The content in parentheses is the file name of the "Behavior" document. In this example, "Behavior" documents are in the same directory with the page file, if the "behavior" document is placed in other directories, add the front of this parameter to add The corresponding path name to ensure that the location of the "behavior" document can be correctly positioned. The other content in this "style" is a normal style property setting, which can be increased or decreased according to your needs, but in this case, since the "Glow" filter effect is used, at least one width (width) property is to be set. Through the above style, we have a style named: "myfilter", which comes with "behavior" with font. If you want to use this "behavior" style on a page element, it is also very simple, just place this "style name" to be placed in the property setting area of the component, see the statement below.
The text effect of behavior is span>
The mouse points to the glow span>
There is no new content in the above statement, class = 'myfilter' is the style settings we are familiar with. A "ID" tag is also defined in the attribute of the first "span" tag. It will be seen later, which is set to demonstrate "method" within the "behavior". After setting, the contents of the "Span" component can display the predetermined effects within the "behavior" component:
1. When the mouse pointer moves to the text content, the red glow effect is generated around the text, and the text becomes white.
2. When the mouse button is pressed, the text color changes ä Yellow.
3. After the mouse button is lifted, the color of the text is changed to blue. 4. When the mouse pointer moves to the text area, the red glow effect is removed, and the text is recovered.
In addition, we set two "methods", "move_down", and "move_right" when defining "behavior". To call these two "methods", two buttons are defined:
To call the two "method" with the button's OnClick event, the previously defined "ID" tag is used as the object name of the component, and "Method" is called with "MySPAN.MOVE_DOWN" to manipulate this object. It can be seen that after pressing the corresponding button, the text of the first line will be made down or right. Although it is only used in the first line of words, it is actually, as long as you do the corresponding settings, you can also move other objects. The complete content of the page source document is as follows:
.myfilter {behavior: URL (font_effect.htc); Position: Relative; Font-Weight: bold; width = 180; Left: 0;
Style>
HEAD>
The text effect of behavior is span>
The mouse points to the glow span>
Simultaneous text whitening span>
After pressing the mouse, the text is yellow span>
After lifting the mouse, the text is blue span>
After the mouse leaves text restoration of the original span>
Body>
html>
Through the above brief introduction, we can see that we can easily combine a variety of text change effects in a "behavior". By simple "style" setting, it is arbitrarily related to the page elements, " The advantages and powerful features of the behavior component. A "behavior" component not only can be reused within one page, but also all pages on the same site. Imagine if "behavior" is not used to complete the above effects, although a set of predetermined functions can be called in the page to complete the same function, each of the pages can be added with four mouse events, If the same effect is used within multiple pages, the modified function needs to be set in each page. In contrast, it is obvious that the exception is very obvious. Therefore, using the "behavior" component, you can make simple, efficient, universal and easy-to-maintain pages. Examples of this article are just to illustrate the writing and use of the "Behaviors" component, so that the reader has a general understanding of "behavior" programming, and produces the "behavior" component you need, or directly quote to meet individual needs The ready-made "behavior" component, because the concept of "component sharing" is also the original intention of "behavior" developers. Finally, I hope this article can play the "brick introduction jade" to make readers into the wonderful DHTML web programming world. Description:
HTC is an abbreviation of HTML Component,
Is one of IE5.0's main expansion,
In addition to the reusable advantages of general components,
Also have advantages such as easy development,
Because it is necessary to introduce external files, this is not exemplified, there is an example in the treasure house.
Controls and components
HTC provides a simple mechanism to implement DHTML behavior in the script. An HTC file and HTML file do not have any differences, and ".htc" is a suffix,
You can use HTC to implement the following behavior:
Set the properties and methods. Definition through "Property" and "Method" element
Set a custom event. Implement the "Event" element, "Fire ()" method is used to release the event,
Set the event environment via the "CreateEventObject () method.
Access the DHTML object model of the HTML page containing the HTC, use HTC's "Element" object, return
An additional behavior element, using this object, HTC can access the object model (attributes, methods, events) that contains the text and its object model (attribute, method, event).
Take a notification, use the "Attach" element, the browser not only informs the HTC standard DHTML event, notifying HTC two special events: OnContentReady events and the OndocumentReady event.
Define tags and namespaces
The basis of HTC is custom tag
To define a custom tag for the page, you must provide namespace for this tag.
To use this tag, you must add the correct XML namespace prefix before this tag.
E.g:
Define an example of a new tag Right
The code segment is as follows:
@Media all {
DOCJS /: Right {text-align: right; width: 100}
}
Style>
HEAD>
Read Doc Javascript's Column, Tips, Tools, and Tutorials
Docjs: Right>
Body>
Html>
Can mark a single HTML
Define multiple namespaces:
Component definition
The name of the component is determined by the HTC documentation in the XML namespace of the first line.
This page does not have to call other HTC, only one namespace definition is actually, the definition of HTML components is the definition of custom label behavior.
This behavior includes an attribute and an event:
Public: Component>