一、简介
HTC脚本全称是Html Companent即html组件,个人认为它是为了在开发动态HTML中实现代码重用和页面共享目的,主要是把“行为”作为组件封装,可以在很大程度上简化DHTML的开发,所用的语法知识也都是基于js和css。
二、入门示例
1)htc文件(font_effect.htc)
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()"/> <PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()"/> <PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()"/> <PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()"/> <PUBLIC:METHOD NAME="move_down"/> <PUBLIC:METHOD NAME="move_right"/> <SCRIPT LANGUAGE="JScript"> var font_color; function move_down(){ element.style.posTop += 6; } function move_right(){ element.style.posLeft += 6; } function font2blue(){ if(event.srcElement == element){ element.style.color='blue'; } } function font2yellow(){ if(event.srcElement == element){ } } function glowit(){ if(event.srcElement == element){ font_color=style.color; element.style.color='white'; element.style.filter="glow(color=red,strength=2)"; } } function noglow(){ if(event.srcElement == element){ element.style.filter=""; element.style.color=fontcolor; } } </SCRIPT>
2)对应的页面调用
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>htc学习示例</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <style> .myfilter{behavior:url(htc/font_effect.htc);position:relative;font-weight:bold;width=180;left:0;} </style> </head> <body> <button onclick="myspan.move_right();" >向右移动第一行文字</button><br/> <button onclick="myspan.move_down();" >向下移动第一行文字</button> <div><span id="myspan" class='myfilter'>行为产生的文字效果</span><br/></div> </body> </html>