Shulou(Shulou.com)06/03 Report--

This article is about how htc components are defined after IE5.0. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Before the release of Microsoft IE version 5.0 browser, the biggest challenge in web programming was that it was not easy to create components for code reuse and multi-page sharing. This problem has always perplexed the web programmers of DHTML (dynamic HEML). They can only repeat the code of HTML, CSS, and javascript over and over again to meet repetitive or similar functions on multiple pages. This situation has been improved since the release of IE 5.0. it brings us a new method of instruction composition, which can encapsulate the code for specific functions in one component, so as to realize the code reuse of multi-pages and make web page programming enter a new world. This new technology is the "Behaviors" in DHTML that we're going to talk about.

Behavior, as an easy-to-use component, encapsulates specific functions or actions on the page. When a "behavior" is attached to a component in a WEB page, the original behavior of that component changes. Therefore, web programmers can develop general DHTML instructions, 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 very simple and convenient, and all you need is the knowledge of CSS stylesheets, HTML instructions, and javascript scripting languages that you are used to. As long as you know something about it and have practical programming experience, there is no problem learning and mastering the use of "behavior". 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 of all, create a new text file called font_efftce.htc, the files that make up the "behavior" component have the extension .htc, and this file is our description of the "behavior". The steps to create and use it are as follows:

The code is as follows:

(1) first, add several event responses to this "behavior". The sentence is written in the following format:

[\ s\ S] *\ n

"EVENT" corresponds to the required event name, here is nmouseover,onmouseout,onmousedown,onmouseup four event names, of course, you can add other event names to meet your specific needs. "ONEVENT" corresponds to its own event handle, that is, the name of the function called when the event is triggered. The glowit () function produces a red glow around the font. The noglow () function removes 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 similar.

(2) next, add two "method" definitions to this "behavior", as follows.

The "NAME" parameter corresponds to the given "method" name. Move_down and move_right are the function names for "methods" that move down and to the right, respectively. Note that do not put "()" parentheses after the method name, that is, do not write "move_down ()" like this, which is not allowed in the syntax of the "method" definition.

(3) the next work is to write the corresponding function contents of "event handle" and "method" with javascript script statements in the familiar DHTML environment to achieve the desired results. Refer to the following source program for details. The "element" parameter refers to the object to which the "behavior" is attached, because the "behavior" is always attached to the component of the page and works through that component. The other statements are all programming content of DHTML, so I won't say any more. If there is something unclear, you can refer to Microsoft's MSDN development document about IE browser, which has detailed DHTML programming references, properties and instructions for using methods, and contains a large number of articles and example programs. Frequent access to Microsoft's MSDN documentation is a good learning habit especially for beginners. You can get almost any answer you want. Its URL is http://msdn.microsoft.com/ie/.

The complete "behavior" document "font_effect.htc" reads as follows:

/ / start of the behavior document / /

/ / add four mouse events to the behavior

[code]

/ / define two methods for "behavior"

/ / define a variable that holds the font color

Var font_color

/ / define how 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

}

/ / 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

}

}

/ end of the behavior document / /

(4) how to use "behavior" on a page

There is no need to learn new knowledge by using the behaviors component on the page. All you need is the CSS stylesheet and HTML settings, see the following statement.

The code is as follows:

.myfilter {behavior:url (font_effect.htc); position:relative;font-weight:bold;width=180;left:0;}

As you can see, this is exactly the same as the stylesheet settings that we are already familiar with. The above statement defines a style name: "myfilter", where the relatively new content for us is "behavior:url (font_effect.htc);", "behavior" is the new "behavior" property name, which is how the "behavior" is set in the stylesheet. The content in parentheses is the file name of the "behavior" document. In this example, it is indicated that the "behavior" document is in the same directory as the page file. If the "behavior" document is placed in another directory, the corresponding pathname should be added before this parameter to ensure that the location of the "behavior" document can be located correctly. The rest of this "style" is the normal style property settings, which can be added or decreased according to your needs, but in this case, because of the "glow" filter effect, at least one width property should be set. Through the above style assignment, we have a style called "myfilter", which comes with a "behavior" with a font change effect. If you want to use this style with a "behavior" on a page component, it is also easy to place the "style name" in the component's property settings area, as shown in the following statement.

The literal effect produced by behavior

Glow after mouse pointing

There is nothing new in the above statement, class='myfilter' is the style setting that we are familiar with. A "id" tag is also defined in the attribute of the first "span" tag, which, as you will see later, is set to demonstrate calling the "method" in the "behavior". When set in this way, the content in the span component can show the intended effect in the behavior component:

1. When the mouse pointer moves over the text content, 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. 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.

In addition, we set two "methods", "move_down" and "move_right", when defining "behavior". To invoke these two "methods", two buttons are defined:

The code is as follows:

Move the first line of text down

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 the "method" is called with "myspan.move_down" to manipulate the object. As you can see, the first line of text moves down or to the right after pressing the corresponding button. Although it is only demonstrated with the first line of text, in fact, you can also move other objects as long as you make the appropriate settings. The complete contents of the page source document are as follows:

The code is as follows:

Behavior effect demonstration

.myfilter {behavior:url (font_effect.htc); position:relative;font-weight:bold;width=180;left:0;}

The literal effect produced by behavior

Glow after mouse pointing

At the same time, the text becomes white.

The text turns yellow after pressing the mouse

The text turns blue after lifting the mouse

The text is restored to its original state after the mouse leaves.

Move the first line of text down

Through the above brief introduction, we can see that we can easily combine a variety of text change effects in a "behavior" at the same time, and arbitrarily associate it with the page element through a simple "style" setting. It reflects the advantages and powerful functions of the "behavior" component. A behavior component that can be reused not only within one page, but also for all pages on the same site. Imagine that if you do not use "behavior" to achieve the above effect, although you can call a set of predetermined functions within the page to complete the same function, each component on the page that uses the text effect has to attach four mouse events. if the same effect is used in multiple pages, the called function needs to be set repeatedly in each page. By contrast, it is obvious which is better or worse. Therefore, using the behavior component, you can produce pages that are simple, efficient, general-purpose, and easy to maintain. The example of this article is only to illustrate the process of writing and using "behavior" components, so that readers can have a general understanding of "behavior" programming, and create the "behavior" components they need on this basis. or directly reference off-the-shelf "behavior" components that meet personal needs, because the concept of "component sharing" is also the original intention of "behavior" developers. Finally, I hope this article can play the purpose of "throwing a brick to attract jade", so that readers can step into the wonderful world of DHTML web page programming.

Description:

HTC is the abbreviation of HTML component.

Is one of the major extensions of IE5.0

In addition to the reusable advantages of general components

It also has the advantages of easy development and use.

Because of the need to introduce external files, there are no examples here. There are examples in the treasure house.

Controls and components

HTC provides a simple mechanism to implement DHTML behavior in scripts. A HTC file is no different from a HTML file and is suffixed with ".htc"

You can use HTC to implement the following behavior:

Set properties and methods. Defined by "PROPERTY" and "METHOD" elements

Set custom events. Through the "EVENT" element, the event is released using the element's "fire ()" method

The event environment is set through the "createEventObject ()" method.

Access the DHTML object model of the HTML page that contains the HTC, use the "element" object of HTC, and return

An element of additional behavior that allows HTC to access the object model (properties, methods, events) that contains the document and it.

Receiving notifications, implemented using the "ATTACH" element, the browser notifies not only the DHTML event of the HTC standard, but also two special events of HTC: the oncontentready event and the ondocumentready event.

Define 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 it with the correct XML namespace prefix

For example:

An example of defining a new tag RIGHT

The code snippet is as follows:

The code is as follows:

@ media all {

DOCJS\: RIGHT {text-align:right; width:100}

}

Read Doc javascript's columns, tips, tools, and tutorials

You can define multiple namespaces in a single HTML tag:

Component definition

The name of the component is determined by the XML namespace defined in the first line of the HTC document

The page does not need to call other HTC words, just a namespace definition

In fact, the definition of HTML components is the definition of custom label behavior.

The behavior includes an attribute and an event:

The code is as follows:

/ / define stylesheets for components

.cssMyTag {

}

Function MyTagBehavior1 () {} / / define methods for components

/ / define response events for the component

The oncontentready is triggered when the component is fully imported by the caller

Take a look at fnInit ()

The code is as follows:

Function fnInit () {

Document.body [XSS _ clean] = element.value;// sets the content displayed by the component

Document.body.className = "clsMyTag"; / / sets the display style sheet

Defaults.viewLink = document; / / make this component visible to other documents

Element.aProperty = element.value; / / sets the property value of the component

}

Invocation of component

The code is as follows:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.