HTC is an abbreviation for HTML Component, which is a client component supported by the IE5 and subsequent browsers. According to my personal understanding, HTC is a piece of script that encapsulates client behavior based on DHTML. Each HTC is stored in * .htc file, an HTC is a client "class".
The most important thing to write HTC is to know the meaning of the Element object, which represents the current HTC, similar to this in the C # class. For example, Element.innerHTML can access the HTML code included in the current HTC object in Document. Since HTC is "class", it certainly has attributes, methods, events, and the following brief explanation:
l
l
l
l
l
Common HTC definitions are so much, for more detailed information, please refer to
Http://msdn.microsoft.com/librar ... Eference / htcref.asp, English d, 嘿.
We often see such an effect on some webpages: Users click on a button, text display, click this button again, the text disappears, but the browser does not refresh. Below I use HTC to achieve this simple effect. The programming idea is like this: uses HTC to simulate a switch, it has two states "on" and "OFF" (readable / write attribute status); users can set the text displayed in both states (setting attribute turnofftext And TurnonText); When the user clicks the switch, the switch status is reversed and triggered an event (onStatusChanged) to inform the user, and the user can write the code to respond to this event; the HTC also defines a method (REVERSSTATUS), used to reverse The status of the switch. Here is this HTC code:
Public: Component>
Var sturnontext; // Close the text displayed by the status
Var sturnofftext; // Top the text displayed in the state
Var sstatus; // switch status
VAR InnerHtml // HTML included in the switch when using the switch
/ / Set the text displayed by the switch to close the status
Function setTurnonText (Value)
{
SturnonText = Value;
}
/ / Set the text displayed by the switch to turn on the switch
Function setTurnofftext (Value)
{
SturnoffText = Value;
}
// Set the switch status
Function setStatus (Value)
{
SSTATUS = VALUE;
}
// Read the switch status
Function getStatus ()
{
Return sStatus;
}
// State in the reverse switch
Function ReverseStatus ()
{
SSTATUS = (SSTATUS == "ON")? "OFF": "on";
}
// Get HTC Control Interface HTML Text
Function GetTitle ()
{
VAR text = (sstatus == "on")? SturnoffText: SturnOnText;
Text = "
Return TEXT;
}
// HTC initialization code
Function initialize ()
{
// Back Up InnerHTML
Innerhtml = element.innerhtml;
Element.innerhtml = (sStatus == "on")? gettitle () innerhtml: gettitle ();
}
/ / Respond to the method of user mouse event
Function expandCollapse ()
{
REVERSTATUS ();
//trigger event
VAR OEVENT = CREATEEVENTOBJECT ();
ChangeDevent.fire (OEVENT);
Var srcelem = element.document.parentWindow.Event.srcelement;
IF (srcelem.id == "Innerdiv")
{
Element.innerhtml = (sStatus == "on")? gettitle () innerhtml: gettitle ();
}
}
script>
Here's how to use this HTC, the comment is clear, no more explanation!
Import namespace = "frogone" IMPLEMENTATION = "Switch.htc">
hEAD>
Turnofftext = "OFF" TurnonText = "ON" Status = "OFF" OnStatusChanged = "confirmchange ()"> frogone: switch> body> // Corresponding switch event Function confirmchange () { IF (! "Do you change the switch status?")))))))) MySwitch.reversTatus (); } script> html>