在微软IE 5.0版本的浏览器发布以前,网页编程中面对的最大挑战就是不能轻易地创建组件,以达到代码重用和多页面共享的目的。这个问题一直困扰着DHTML(动态 HEML)的网页编程者。他们只能不断地重复书写HTML、CSS和javascript的代码,以满足多个页面上的重复或相似的功能。自IE 5.0浏览器发布后,这种情况得到了改善,它带给我们一个新的指令组合方法,可把实现特定功能的代码封装在一个组件内,从而实现多页面的代码重用,使网页编程进入一个全新的天地。这个新的技术就是我们要谈到的DHTML中的“行为”(Behaviors)。
“行为”作为一个简单易用的组件,它封装了页面上特定的功能或动作。当把一个“行为”附到WEB页面中的一个元件上时,这个元件的原有行为就会有所改变。因此,网页编程者可以开发通用的DHTML指令,并改变原有对象的一些属性,用“行为”来增强一个对象的功能,同时也简化了页面的HTML代码。而且“行为”的创建和使用也非常简单方便,所需的知识也只是原来已经习惯使用的CSS样式表、HTML指令和javascript脚本语言。只要你对此有所了解,有过实际编程的经历,学习并掌握“行为”的使用完全没有问题。我们将以一个改变字体效果的“行为”组件为例来说明如何编写和使用一个“行为”,并体验“行为”给页面编辑带来的优点和方便之处。
首先新建一个名为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()"/>
“EVENT”对应所需事件名,在这里分别为nmouseover,onmouseout,onmousedown,onmouseup四个事件名,你当然可以再增加其它的事件名来满足你的特定需求。“ONEVENT”对应着个自的事件句柄,即事件触发时所调用的函数名称。glowit()函数使字体周围产生一个红色的辉光。noglow()函数是消除字体的辉光效果。Font2yellow()函数是把字体颜色改为黄色。Font2blue()函数是把字体颜色改为蓝色。四个事件的定义都是相似的。
(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文档,尤其对于初学者来说是一个良好的学习习惯,你几乎可以得到任何你想找的答案,它的网址为:http://msdn.microsoft.com/ie/。
完整的“行为”文档“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+=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)如何在一个页面上使用“行为”
在页面上使用“行为”组件,并不需要学习新的知识。所需的知识的也不过是CSS样式表和HTML的设置而已,请看下面的语句。
<STYLE>
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
</STYLE>
可以看出,这和以前我们已经熟知的样式表设置完全相同。上面的语句定义了一个样式名:“myfilter”,其中对我们来说比较新的内容是:“behavior:url(font_effect.htc);”,“behavior”是新增的“行为”属性名,这就是“行为”在样式表中的设置方式。括号中的内容是“行为”文档的文件名,本例中表明“行为”文档在与页面文件在同一个目录下,如果“行为”文档安置在其它目录下,在此参数的前面要加上相应的路径名,以保证可以正确地定位“行为”文档的位置。此“样式”中的其它内容就是普通的样式属性设置,可根据你的需要增减,但在此例中,由于使用了“glow”滤镜效果,至少要设置一个宽度(width)属性。通过以上的样式指定,我们就有了一个名为:“myfilter”的样式,它附带一个有字体变化效果的“行为”。如果你想要在一个页面元件上使用这个附带“行为”的样式,同样也很简单,只要把这个“样式名”安置在元件的属性设置区域即可,见下面的语句。
<span id="myspan" class='myfilter'>行为产生的文字效果</span><br>
<span class='myfilter'>鼠标指向后产生辉光</span>
以上语句里面没有什么新的内容,class='myfilter'就是我们所熟悉的样式设置。在第一个“span”标记的属性中还定义了一个“id”标记,稍后就会看到,这是用来演示调用“行为”内的“方法”而设置的。这样设置后,“span”元件中的内容就可以显示出“行为”组件内的预定效果:
1. 鼠标指针移动到文字内容上时,在文字周围产生红色的辉光效果,同时文字变成白色。
2. 当鼠标按钮按下时,文字颜色改变为黄色。
3. 鼠标按钮抬起后,文字颜色又改变为蓝色。
4. 当鼠标指针移动到文字区域以外时,去掉了红色辉光效果,文字恢复原样。
另外,我们在定义“行为”时设置了二个“方法”,“move_down”和“move_right”。为调用这二个“方法”,定义了二个按钮:
<button onclick="myspan.move_right();">向右移动第一行文字</button>
<br>
<button onclick="myspan.move_down();">向下移动第一行文字</button>
用按钮的onclick事件去调用这二个“方法”,先前定义的“id”标记就作为元件的对象名称,用“myspan.move_down”来调用“方法”,操纵这个对象。可以看到,在按下相应的按钮后,会使第一行的文字产生向下或向右的移动。虽然只是用第一行文字做了示范,实际上,只要做相应的设置,你也可以移动其它对象。页面源文档的完整内内容如下:
<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><br>
<span class='myfilter'>鼠标指向后产生辉光</span><br>
<span class='myfilter'>同时文字变白</span><br>
<span class='myfilter'>按下鼠标后文字变黄</span><br>
<span class='myfilter'>抬起鼠标后文字变蓝</span><br>
<span class='myfilter'>鼠标离开后文字恢复原状</span><br>
<button onclick="myspan.move_right();">向右移动第一行文字</button><br>
<button onclick="myspan.move_down();">向下移动第一行文字</button>
</BODY>
</html>
通过以上的简单介绍,可以看出,我们很容易地在一个“行为”中同时组合了多种文字变化效果,通过简单的“样式”设置,任意地将它与页面元件相关连,体现了“行为”组件的优点和强大功能。一个“行为”组件,不仅能在一个页面内重复使用,也可供同一站点上的所有页面使用。试想一下,如果不使用“行为”来完成上述的效果,虽然可以在页面内调用一组预定的函数来完成同样的功能,但页面内每一个使用文字效果的元件都要附加四个鼠标事件,如果在多个页面内使用相同的效果,被调用的函数也需要在每一个页面内重复设置。相比之下,孰优孰劣是很明显的。所以,使用“行为”组件,可以制作出简洁、高效、通用和便于维护的页面。本文的举例只是为了说明“行为”组件的编写和使用过程,使读者对“行为”编程有一个概括的了解,并以此基础制作出自己所需要的“行为”组件,或直接引用满足个人需要的现成“行为”组件,因为“组件共享”的概念也是“行为”开发者的初衷。最后,愿本文能起到“抛砖引玉”的目的,使读者步入精彩的DHTML网页编程天地。
说明:
HTC是HTML component的缩写,
是IE5.0的主要扩展之一,
除了具备一般组件的可重用优点之外,
还具有易于开发使用等优点,
因为需要引入外部文件,这里就不举例了,宝库里有例子.
控件和组件
HTC提供了一个简单机制以在脚本中实现DHTML行为。一个HTC文件和HTML文件没有任何差别,并且以“.htc”为后缀,
可以使用HTC实现以下行为:
设定属性和方法。通过“PROPERTY”和“METHOD”元素定义
设置自定义事件。通过“EVENT”元素实现,用该元素的“fire()”方法释放事件,
通过“createEventObject()”方法设置事件环境。
访问所包含该HTC的的HTML页的DHTML对象模型,使用HTC的“element"对象,返回
一个附加行为的元素,使用该对象,HTC可以访问包含文挡及它的对象模型(属性、方法、事件)。
收取通知,使用”ATTACH“元素实现,浏览器不但通知HTC标准的DHTML事件,而且通知HTC两种特殊事件:oncontentready事件和ondocumentready事件 。
定义标记和命名空间
HTC的基础是自定义标记
要为页面定义自定义标记,必须为该标记提供命名空间
要使用该标记必须在该标记前加上正确的XML命名空间前缀
例如:
定义一个新标记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文档里定义在第一行的XML命名空间决定的
该页不用调用其他的HTC话,就只有一个命名空间定义
实际上,HTML组件的定义就是自定义标签行为的定义
该行为包括一个属性和一个事件:
<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>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/xtxk_917/archive/2006/10/17/1337719.aspx
分享到:
相关推荐
HTC手册HTC手册HTC手册HTC手册HTC手册
官方解锁后可以做什么?进行HTC官方解锁后,你的HTC就可以随心所欲的刷MIUI或者其他第三方ROM。 HTC一键解锁工具功能特色: 1.工具采用了HTC官方的解锁方式,对Bootloader进行解锁 2.无需繁琐操作,只需一键即可完成...
htc.teeter.apk,htc的滚球游戏,大家快来下载啊
HTC
htc-cime htc touch input中文输入法
HTC Hoot降级文件,HTC Hoot降级文件。
htc ruu刷机程序 HTC官方固件下载工具_htc官方固件下载是一款提供HTC官方RUU在线下载的软件。该工具由本人收集HTC官方原厂固件,并上传至服务器提供给大家下载。如果您是一个手机店维修人员,他将为您刷机过程中节约...
HTC G11线路维修图纸,希望大家下载参考。
htc.teeter.apk,htc的滚球游戏,大家快来下载啊
htc 钻石二代 rom 很好用的 本人亲自测试
这是htc 下sdk驱动,有用到htc下开发的可以参考
HTC HD2 ROM包,稳定,省电,好用,大家一起来试试看哦
HTC 802D 官方RECOVERY
HTC g2 magic刷机,包括以下三个文件 HTC g2 magic recovery1.5.2 HTC g2 magic recovery1.6.2 HTC g2 magic recovery1.7.0
HTC 新S-OFF 工具,不是rumrunner
htc一键工具集合
htc shift 指纹软件
从G1到G16 HTC Android大盘点 HTC成立于1997年,在经历了14年风雨后已是领跑全球智能手机发展的巨头企业。从早期的Smart Phone、Windows Mobil系统以及经典的838侧滑智能手机,到与苹果iPhone抗衡的Touch Diamond,...
HTC专用recovery.img 适合G11 G12等
htc 帮助 html 组件学习资源