Two. Example of association behavior (tested in Windows Xp, IE6.0)
<public:attach event= "onmouseover" onevent= "F_mouse_over ()"/>
<public:attach event= "onmouseout" onevent= "f_mouse_out ()"/>
<public:attach event= "onclick" onevent= "F_click ()"/>
<public:method name= "Makedisplay ()"/>
<public:method name= "Makeundisplay ()"/>
<script>
function F_mouse_over () {//Make font red, position shifted right 5px
Element.style.color= "Red";
element.style.posleft+=5;
}
function F_mouse_out () {//Make font blue, position shifted left 5px
Element.style.color= "Blue";
element.style.posleft-=5;
}
function F_click () {//Click on the mouse to turn into a glow display, can be Onmousedown,onmouseup event refinement processing
Element.style.color= "Red";
Element.style.filter= "Glow (color=red,strength=2)";
}
function Makedisplay () {//Make the object visible
element.style.display= "Block";
}
function Makeundisplay () {//Make the object invisible
Element.style.display= "None";
}
</script>
2. Writing HTML files (test.html)
<style>
. teststyle{
Behavior:url (STYLE.HTC);
}
</style>
<body>
<div style= "width:200px;height:200px" class= "Teststyle" id= "Testdiv" >test Text; Please move mouse on this area!</div><br/>
<button onclick= "Testdiv.makedisplay ();" Name= "Display"/><button onclick= "Testdiv.makeundisplay ();" Name= "No display"/>
</body>
3. Description: In theory, HTC file can be used to modify the style of the object classname, using the HTML style, HTC inside with style defined styles can not be used. However, if you modify the classname, the object will no longer be associated with this HTC style , and this HTC style has no effect on the object.
Three. Example of element behavior (windowsxp, IE6.0 on test)
<public:component tagname= "LoginForm" >
<public:property name= "UserName" value= "username"/>
<public:property name= "password" value= "password"/>
<public:property name= "Action"/>
<public:property name= "Firststyle"/> <!--user name input box style--
<public:property name= "Secondstyle"/>
<public:attach event= "Oncontentready" onevent= "init ()"/>
<public:method name= "Close"/>
<public:defaults tabstop=true contenteditable=false canhavehtml=true viewinheritstyle=false viewMasterTab=false/ >
</public:component>
<style>
. name{
background-color:red;
}
. pass{
Background-color:blue;
}
</style>
<script>
var_table;
function init () {
if (typeof (action) = = "Undefined" | | action==null) {
Alert ("Action property is missing!");
Return
The}//action property must
Var_form=document.createelement ("<form></form>");
_form.action=action;
_table=document.createelement ("<table></table>");
var otr1=_table.insertrow ();
var Otd1=otr1.insertcell ();
Otd1.innertext=username+ ":";
var Otd2=otr1.insertcell ();
var _username=document.createelement ("<inputtype=text></input>");
if (typeof (Firststyle)! = "undefined" &&firststyle!=null) {
_username.classname=firststyle;
}
Otd2.appendchild (_username);
var otr2=_table.insertrow ();
var Otd3=otr2.insertcell ();
Otd3.innertext=password+ ":";
var Otd4=otr2.insertcell ();
var _password=document.createelement ("<inputtype=password></input>");
if (typeof (Secondstyle)! = "undefined" &&secondstyle!=null) {
_password.classname=secondstyle;
}
Otd4.appendchild (_password);
Otr3=_table.insertrow ();
Otd5=otr3.insertcell ();
var _okbtn=document.createelement ("<inputtype=submit></input>");
Otd5.appendchild (_OKBTN);
Otd6=otr3.insertcell ();
var _resetbtn=document.createelement ("<inputtype=reset></input>");
Otd6.appendchild (_RESETBTN);
_form.appendchild (_table);
Document.body.appendChild (_form);
Defaults.viewlink=document;
}
function Close () {//delete itself on call
var allele=document.body.childnodes;
for (Var i=0;i<allele.length;i++) {
Document.body.removeChild (Allele[i]);
}
}
</script>
<body></body>
Two. Writing the. html file (test.html)
<?xml:namespace prefix= "Custom"/>
<? IMPORT namespace= "Custom" implementation= "ELEMENT.HTC"/>
<style>
. name{
color:red;
}
. pass{
Color:blue;
}
</style>
<body>
<custom:loginform action= "/login.do" id= "AAA" firststyle= "name" secondstyle= "Pass" ></custom:loginForm> <br/>
<input type= "button" onclick= "Aaa.close ();" value= "Delete Login box"/>
</body>
3. Description: The elements generated by JavaScript in HTC can be added to the custom control (with Document.body.appendChild ()) or directly to the main HTML file ( Use Window.document.body.appendChild ()). (the HTC file and the host HTML file share a Window object, so HTC can directly control the HTML file )
4.HTC official MSDN Documentation: HTC Reference
How to use HTC (GO)
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
