Add a property setter and getter
Create a page
<HTML>We recommend that you place an HTC file on the same page as the previous page.
<public:component> <public:property name="borderColor" get="getBorderColor" put="setBorderColor" /> <script type="text/javascript"> function setBorderColor(vValue) { element.style.border = "1px solid "+ vValue } function getBorderColor() { return element.style.borderColor +"~!" } </script></public:component>The above can be simplified to this
<component> <property name="borderColor" get="getBorderColor" put="setBorderColor" /> <script> function setBorderColor(vValue) { element.style.border = "1px solid "+ vValue } function getBorderColor() { return element.style.borderColor +"~!" } </script></component>Bind event
<! Doctype HTML>Corresponding HTC
<component><public:attach event="onmouseover" onevent="over()" /> <public:attach event="onmouseout" onevent="out()" /> <script> function over() { this.style.color = "red" } function out() { this.style.color = "blue" } </script> </component>The preceding this can be omitted or changed to element.
<component><public:attach event="onmouseover" onevent="over()" /> <public:attach event="onmouseout" onevent="out()" /> <script> function over() { style.color = "red" } function out() { style.color = "blue" } </script> </component>
<component><public:attach event="onmouseover" onevent="over()" /> <public:attach event="onmouseout" onevent="out()" /> <script> function over() { style.color = "red" } function out() { style.color = "blue" } </script> </component>This can also be further simplified.
<component><attach event="onmouseover" handler="over" /> <attach event="onmouseout" handler="out" /> <script> function over() { style.color = "red" } function out() { style.color = "blue" } </script> </component>Special HTC Elements
Attach: bind events from the component container to the component
Component: Used in the HTC file to define it as a component
Event: events used by HTC to display to its container
Method: a common process of a component. It is displayed to the container of the component.
Property: Public Property of a component
Note: Except for the attach element, (the attach element does not have the name attribute). Each element has the name attribute and ID attribute. the include document uses the name attribute to reference the corresponding element. The ID attribute is used to reference the corresponding element in the HTML component itself.
Usage of each element:
1. Attach
<Public: attach event = "eventname" for = "document" onevent = "eventhandle" id = "Sid"/>
Attribute description:
Event: Specifies the name of a DHTML event or the name of any event to an HTC (required attribute)
For: identifies the event source. The value is as follows: document refers to the Document Object of the HTML document; element refers to the element with the action appended (default); Windows refers to the window object of the browser.
Onevent: Specifies the name of the function to be called when an event is triggered or embedded script is processed.
ID: Specifies a unique identifier for the additional element of the component.
2. compent
<Public: component name = "name" id = "ID" Urn = "Urn"> </public: component>
Attribute description
Name: Specifies the name of the behavior referenced in the inclusion document.
ID: specify a unique identifier for the component element in the component.
URN: Specifies the "Uniform Resource Name" (Uniform Resource Name, urn) of the unique identifier component)
Note: The component element on msdn has more than these attributes, especially ie6.0. For details, refer
3. defautls (supported after ie5.5)
You can use the defaults element to set the default property value of HTC. This element and each of its attributes are optional.
<Public: Defaults tabstop = "True/false" style = "sstyle"
Contenteditable = "True/false" canhavehtml = "True/false"
Viewinheritstyle = "True/false" viewmastertab = "True/false"
Viewlinkcontent = "True/false">
Attribute description
Tabstop: Specifies whether the component can be located by pressing the tab key on the parent container page. The default value is false.
Style: Specifies the string used to specify the style of the HTC tag.
Contenteditable: sets whether the user can edit the content. by default, HTC inherits this attribute from its parent container based on whether its parent container allows users to edit content. regardless of the capabilities of its parent container page, you can set this attribute to false to disable the editing function. set this value to true to enable content editing, but it is still limited by the capabilities of its parent container.
Canhavehtml: Specifies whether the content of the HTC tag can contain HTML tags.
Viewinheritstyle: Specifies whether the content of the HTC tag can contain HTML tags.
Viewmastertab: Specifies whether the main element of HTC is part of the tab key sequence of the main document.
Viewlinkcontent: Specifies whether to use the HTC tag as viewlink. The default value is false.
4. Event
<Public: event name = "name" id = "eventid">
Attribute description
Name: Specifies the name of the event to be displayed in the document. (required attribute)
ID: specify a unique identifier for the event element in the component.
5. Method
<Public: method name = "name" internalname = "internalname" id = "ID"/>
Attribute description
Name: Specifies the name that contains the document used to call the method. If no internal name is specified, this is the name of the called function (required attribute) when calling this method)
ID: specify a unique identifier for the event element in the component.
Internalname: Specifies the optional name of the function to be called within the component when calling a method.
5. Property
<Public: property name = "name" id = "ID" internalname = "internalname" Get = "getfunctionname" put = "putfunctionname" Persist = "Persist" value = "defaultvalue">
Attribute description
Name: Specifies the name of the attribute to be displayed to the include document. (required attribute)
ID: specify a unique identifier for the attribute element in the component.
Internalname: Specifies the name used to reference attributes in a component.
Get: Specifies the function called whenever the property value is retrieved.
Put: Specifies the function called when setting the property value.
Persist: Specifies whether to retain attributes as part of the page.
Value: the default value of the specified attribute.
Note: If this element only has the get function, this attribute is read-only in the public interface. If it only has the put function, this attribute is only written in the public interface.
HTC Method
Createeventobject ()
Description: Create a DHTML event object. when calling the fire method, you can use this object to pass event information to the include document.
Eventid. Fire ([eventobject])
Description: To trigger an event to a container, only the events specified in the <event> element of the component can be triggered. An event object can be passed to an event object that contains the event details, instead of trigger events. eventid contains the ID of the event to be triggered
HTC event
Oncontentready: triggered when the browser parses the element to which the behavior belongs
Oncontentsave: triggered before copying or saving the element content of the Identity action
Ondetach: triggered before deleting a behavior from the element to which the behavior belongs
Ondocumentready: triggered after the include page has been parsed. this event is triggered after the script, image, Microsoft ActiveX control, and other elements are downloaded on the page. triggered after the onload event
There are also 3 HTC objects
Ults: used to set the default behavior on the element behavior through the program. All attributes are the same as the default element.
Document: This object provides access to programs with the basic tags in the element action. The members of this object are the same as those of the DHTML Dom Document Object.
Element: This object provides program access to the basic elements bound to the behavior.
Note: The defaults and document objects are only applicable to Versions later than ie5.5.
Note: Windows Web Script Development Guide
PS: I don't know when to copy it. I accidentally turned it over and hoped it would be useful.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
