全国服务热线:4008-888-888

技术知识

IE5.0以后的htc组件的界定简述

在微软IE 5.0版本号的访问器公布之前,网页页面程序编写中应对的最大挑戰便是不可以随便地建立组件,以做到编码重用和多网页页面共享资源的目地。这个难题1直困扰着DHTML(动态性 HEML)的网页页面程序编写者。她们只能持续地反复撰写HTML、CSS和javascript的编码,以考虑好几个网页页面上的反复或类似的作用。自IE 5.0访问器公布后,这类状况获得了改进,它带给大家1个新的命令组成方式,可把完成特殊作用的编码封裝在1个组件内,从而完成多网页页面的编码重用,使网页页面程序编写进到1个全新升级的乾坤。这个新的技术性便是大家要谈到的DHTML中的“个人行为”(Behaviors)。

“个人行为”做为1个简易易用的组件,它封裝了网页页面上特殊的作用或姿势。当把1个“个人行为”附到WEB网页页面中的1个元件上时,这个元件的原来个人行为就会有一定的更改。因而,网页页面程序编写者能够开发设计通用性的DHTML命令,并更改原来目标的1些特性,用“个人行为”来提高1个目标的作用,另外也简化了网页页面的HTML编码。并且“个人行为”的建立和应用也十分简易便捷,所需的专业知识也只是原先早已习惯性应用的CSS款式表、HTML命令和javascript脚本制作語言。要是你对此有一定的掌握,有过具体程序编写的亲身经历,学习培训并把握“个人行为”的应用彻底沒有难题。大家将以1个更改字体样式实际效果的“个人行为”组件为例来讲明怎样撰写和应用1个“个人行为”,并体验“个人行为”给网页页面编写带来的优势和便捷的地方。

最先新建1个名为font_efftce.htc的文字文档,构成“个人行为”组件的文档全是以.htc为拓展名,这个文档中的內容便是大家对这个“个人行为”的叙述。它的建立和应用流程以下:

拷贝编码
编码以下:

(1)最先给这个“个人行为”提升几个恶性事件回应,句子撰写文件格式以下:
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()"/>
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()"/>
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()"/>
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()"/>
[\s\S ]*\n
“EVENT”对应所需恶性事件名,在这里各自为nmouseover,onmouseout,onmousedown,onmouseup 4个恶性事件名,你自然能够再提升其它的恶性事件名来考虑你的特殊要求。“ONEVENT”对应着个自的恶性事件句柄,即恶性事件开启时所启用的涵数名字。 glowit()涵数使字体样式周边造成1个鲜红色的辉光。noglow()涵数是清除字体样式的辉光实际效果。Font2yellow()涵数是把字体样式色调改成黄色。 Font2blue()涵数是把字体样式色调改成蓝色。4个恶性事件的界定全是类似的。
(2)接下来,再给这个“个人行为”提升2个“方式”界定,內容以下。
<PUBLIC:METHOD NAME="move_down"/>
<PUBLIC:METHOD NAME="move_right"/>
“NAME”主要参数对应的是给定的“方式”名字。move_down和move_right各自是向下和向右挪动的“方式”对应的涵数名字。留意,在方式名的后边不必带“( )”括号,即不必写成“move_down()”这个模样,这在“方式”界定的英语的语法上是不容许的。
(3)接下来的工作中便是在大家熟习的DHTML自然环境下,用javascript脚本制作句子撰写“恶性事件句柄”和“方式”所对应的涵数內容,完成预期的实际效果。实际內容参照下面的源程序流程。在其中的“element”主要参数指的是这个“个人行为”所附着的目标,由于“个人行为”一直被附着到网页页面的元件上面,并根据这个元件充分发挥功效。其它句子全是DHTML的程序编写內容,就已不多说了。如有不明的地方,可参照微软的MSDN开发设计文本文档中相关IE访问器的內容,上面有详尽的DHTML程序编写参照內容、特性和方式应用表明等,并包括了很多的文章内容和举例程序流程。常常浏览微软的MSDN文本文档,特别针对初学者来讲是1个优良的学习培训习惯性,你基本上能够获得任何你想找的回答,它的网站地址为:http://msdn.microsoft.com/ie/。
  详细的“个人行为”文本文档“font_effect.htc”的內容以下:
////////////////////////“个人行为”文本文档刚开始////////////////////////////
//给“个人行为”提升4个电脑鼠标恶性事件
[code]
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()"/>
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()"/>
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()"/>
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()"/>
//给“个人行为”界定2个方式
<PUBLIC:METHOD NAME="move_down"/>
<PUBLIC:METHOD NAME="move_right"/>
<SCRIPT LANGUAGE="JScript">
//界定1个储存字体样式色调的自变量
var font_color;
//界定向下挪动文本的方式
function move_down()
{
element.style.posTop+=2;
}
//界定向右挪动文本的方式
function move_right()
{
element.style.posLeft +=6;
}
//界定电脑鼠标onmouseup恶性事件的启用涵数
function font2blue(){
if (event.srcElement == element)
{
element.style.color='blue';
}
}
//界定电脑鼠标onmousedown恶性事件的启用涵数
function font2yellow(){
if (event.srcElement == element)
{
element.style.color='yellow';
}
}
//界定电脑鼠标onmouseover恶性事件的启用涵数
function glowit()
{
if (event.srcElement == element)
{
font_color=style.color;
element.style.color='white';
element.style.filter="glow(color=red,strength=2)";
}
}
//界定电脑鼠标onmouseout恶性事件的启用涵数
function noglow()
{
if (event.srcElement == element)
{
element.style.filter="";
element.style.color=font_color;
}
}
</SCRIPT>

//////////////////“个人行为”文本文档完毕///////////////////////////////
(4)怎样在1个网页页面上应用“个人行为”
  在网页页面上应用“个人行为”组件,其实不必须学习培训新的专业知识。所需的专业知识的也但是是CSS款式表和HTML的设定罢了,请看下面的句子。

拷贝编码
编码以下:

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

能够看出,这和之前大家早已熟知的款式表设定彻底同样。上面的句子界定了1个款式名:“myfilter”,在其中对大家来讲较为新的內容是:“behavior:url(font_effect.htc);”,“behavior”是新增的“个人行为”特性名,这便是“个人行为”在款式表格中的设定方法。括号中的內容是“个人行为”文本文档的文档名,本例中说明“个人行为”文本文档在与网页页面文档在同1个文件目录下,假如“个人行为”文本文档安装在其它文件目录下,在此主要参数的前面要再加相应的相对路径名,以确保能够正确地精准定位“个人行为”文本文档的部位。此“款式”中的其它內容便是一般的款式特性设定,可依据你的必须增减,但在此例中,因为应用了 “glow”滤镜实际效果,最少要设定1个宽度(width)特性。根据以上的款式特定,大家就有了1个名为:“myfilter”的款式,它附带1个有字体样式转变实际效果的“个人行为”。假如你要想在1个网页页面元件上应用这个附带“个人行为”的款式,一样也很简易,要是把这个“款式名”安装在元件的特性设定地区便可,见下面的句子。
<span id="myspan" class='myfilter'>个人行为造成的文本实际效果</span><br>
<span class='myfilter'>电脑鼠标指向后造成辉光</span>
  以上句子里边沒有甚么新的內容,class='myfilter'便是大家所熟习的款式设定。在第1个“span”标识的特性中还界定了1个“id”标识,稍后就会看到,这是用来演试启用“个人行为”内的“方式”而设定的。这样设定后,“span”元件中的內容便可以显示信息出“个人行为”组件内的预订实际效果:
1. 电脑鼠标指针挪动到文本內容上时,在文本周边造成鲜红色的辉光实际效果,另外文本变为白色。
2. 当电脑鼠标按钮按下时,文本色调更改为黄色。
3. 电脑鼠标按钮抬起后,文本色调又更改为蓝色。
4. 当电脑鼠标指针挪动到文本地区之外时,去掉了鲜红色辉光实际效果,文本修复原样。
  此外,大家在界定“个人行为”时设定了2个“方式”,“move_down”和“move_right”。为启用这2个“方式”,界定了2个按钮:

拷贝编码
编码以下:

<button onclick="myspan.move_right();">向右挪动第1写作字</button>

<button onclick="myspan.move_down();">向下挪动第1写作字</button>

用按钮的onclick恶性事件去启用这2个“方式”,先前界定的“id”标识就做为元件的目标名字,用“myspan.move_down”来启用“方式”,控制这个目标。能够看到,在按下相应的按钮后,会使第1行的文本造成向下或向右的挪动。尽管只是用第1写作字做了示范性,具体上,要是做相应的设定,你还可以挪动其它目标。网页页面源文本文档的详细内內容以下:

拷贝编码
编码以下:

<html >
<HEAD >
<TITLE >个人行为实际效果演试< /TITLE >
<STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
</STYLE>
</HEAD>
<BODY>
<span id="myspan" class='myfilter'>个人行为造成的文本实际效果</span>

<span class='myfilter'>电脑鼠标指向后造成辉光</span>

<span class='myfilter'>另外文本变白</span>

<span class='myfilter'>按下电脑鼠标后文本变黄</span>

<span class='myfilter'>抬起电脑鼠标后文本变蓝</span>

<span class='myfilter'>电脑鼠标离去后文本修复原状</span>

<button onclick="myspan.move_right();">向右挪动第1写作字</button>

<button onclick="myspan.move_down();">向下挪动第1写作字</button>
</BODY>
</html>

根据以上的简易详细介绍,能够看出,大家很非常容易地在1个“个人行为”中另外组成了多种多样文本转变实际效果,根据简易的“款式”设定,随意地将它与网页页面元件有关连,反映了“个人行为”组件的优势和强劲作用。1个“个人行为”组件,不但能在1个网页页面内反复应用,也可供同1站点上的全部网页页面应用。试想1下,假如不应用“个人行为”来进行上述的实际效果,尽管能够在网页页面内启用1组预订的涵数来进行一样的作用,但网页页面内每个应用文本实际效果的元件都要额外4个电脑鼠标恶性事件,假如在好几个网页页面内应用同样的实际效果,被启用的涵数也必须在每个网页页面内反复设定。相比之下,孰优孰劣是很显著的。因此,应用“个人行为”组件,能够制做出简约、高效率、通用性和便于维护保养的网页页面。本文的举例只是以便表明“个人行为”组件的撰写和应用全过程,使读者对“个人行为”程序编写有1个归纳的掌握,并以此基本制做出自身所必须的“个人行为”组件,或立即引入考虑本人必须的现成“个人行为”组件,由于“组件共享资源”的定义也是“个人行为”开发设计者的初衷。最终,愿本文能起到“毛遂自荐”的目地,使读者步入精彩的 DHTML网页页面程序编写乾坤。

表明:
HTC是HTML component的缩写,
是IE5.0的关键拓展之1,
除具有1般组件的可重用优势以外,
还具备易于开发设计应用等优势,
由于必须引进外界文档,这里就不举例了,宝库里有事例.

控制和组件
HTC出示了1个简易体制以在脚本制作中完成DHTML个人行为。1个HTC文档和HTML文档沒有任何区别,而且以“.htc”为后缀,

可使用HTC完成下列个人行为:
设置特性和方式。根据“PROPERTY”和“METHOD”元素界定
设定自定恶性事件。根据“EVENT”元素完成,用该元素的“fire()”方式释放出来恶性事件,
根据“createEventObject()”方式设定恶性事件自然环境。
浏览所包括该HTC的的HTML页的DHTML目标实体模型,应用HTC的“element"目标,回到
1个额外个人行为的元素,应用该目标,HTC能够浏览包括文挡及它的目标实体模型(特性、方式、恶性事件)。
扣除通告,应用”ATTACH“元素完成,访问器不仅通告HTC规范的DHTML恶性事件,并且通告HTC两种独特恶性事件:oncontentready恶性事件和ondocumentready恶性事件。

界定标识和取名室内空间
HTC的基本是自定标识
要为网页页面界定自定标识,务必为该标识出示取名室内空间
要应用该标识务必在该标识前再加正确的XML取名室内空间前缀
比如:
界定1个新标识RIGHT的事例
编码片段以下:

拷贝编码
编码以下:

<HTML XMLNS:DOCJS>
<HEAD>
<STYLE>
@media all {
DOCJS\:RIGHT {text-align:right; width:100}
}
</STYLE>
</HEAD>
<BODY>
<DOCjs:RIGHT>
Read Doc javascript's columns, tips, tools, and tutorials
</DOCjs:RIGHT>
</BODY>
</HTML>

能够在单独HTML标识中界定好几个取名室内空间:
<HTML XMLNS:DOCJS XMLNS:DOCjavascript>
组件界定
组件的姓名是由HTC文本文档里界定在第1行的XML取名室内空间决策的
该页无需启用别的的HTC话,就仅有1个取名室内空间界定
具体上,HTML组件的界定便是自定标识个人行为的界定
该个人行为包含1个特性和1个恶性事件:

拷贝编码
编码以下:

<HTML xmlns:MyTag>
<HEAD>
<PUBLIC:COMPONENT tagName="MyTag">
<PROPERTY NAME="value"></PROPERTY>
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH>
</PUBLIC:COMPONENT>
<STYLE>//为组件界定款式表
.cssMyTag{
}
</STYLE>
<SCRIPT language=javascript>
function MyTagBehavior1(){} //为组件界定方式
</SCRIPT>
</HEAD>
<BODY onclick=MyTagBehavior1> //为组件界定回应恶性事件
</BODY>
</HTML>

在其中的oncontentready是在组件被启用者彻底导入时开启
再看看fnInit()

拷贝编码
编码以下:

function fnInit() {
document.body.innerHTML = element.value;//设置组件显示信息內容
document.body.className = "clsMyTag"; //设置显示信息款式表,
defaults.viewLink = document; //使本组件对别的文本文档可见
element.aProperty = element.value; //设定组件的特性值
}

组件的启用

拷贝编码
编码以下:

<HTML xmlns:MyCom>
<HEAD>
<?IMPORT NAMESPACE="MyCom" IMPLEMENTATION="MyTag.htc"/>
</HEAD>
<BODY>
<MyCom:MyTag></MyCom:MyTag>
</BODY>
</HTML>


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服