对党的认识|认识DHTML中的“行为”组件

更新时间:2017-10-29 来源:编程 点击:

【www.hzclsc.cn--编程】

微软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”对应所需事件名,在这里分别为:onmouseover,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网页编程天地。


本文来源:http://www.hzclsc.cn/ruanjianzixun/3004.html

为您推荐

制作电音的软件|电音创作软件KORG将于明年登录Switch

如果你经常关注我们对任天堂Switch的报道,你可能还记得有家公司正在为Switch制作学习编程的软件,接下来要告诉各位,Switch不单可以用来编程,而且还可以作曲!日本知名的电子音乐作曲工作站软件游戏资讯

2020-12-05 17:04:48   做电音的软件   电音软件手机版  

【支付宝小程序在哪里找】支付宝小程序开发者公测地址 支付宝小程序申请公测网址

支付宝小程序目前已经开始公测了,为大家带来支付宝小程序开发者公测地址,支付宝小程序是手机应用嵌入支付宝客户端的一种方法,下面是支付宝小程序申请公测网址! 支付宝小程序开发者公测地址 特色能力开发服务成编程开发

2020-11-22 11:04:37   支付宝小程序怎么建立   支付宝小程序怎么开发  

[c罗]c++ vector用法详解 c++ vector用法总结

c++ vector是在c++中开发过程中c++ vector作为一个十分有用的容器,许多朋友还不是很清楚c++ vector用法,不知道c++ vector到底有什么优秀的用法,不用着急一起来看看编程开发

2020-11-22 11:04:37   pcba   c盘满了怎么清理  

【eclipse如何导出项目】eclipse怎么导出项目 eclipse导出项目教程

eclipse作为用户量十分大的编程开发软件,有许多新手用户朋友或者刚开始接触这款软件的朋友经常会出现在使用eclipse的时候不知道该怎么导出已经读取到软件中的项目,其实很简单,一起来看看ecli教你一招

2020-11-10 07:04:06   eclipse怎么导入项目   eclipse怎么打开项目  

jdk环境变量配置win10|JDK环境变量配置WIN7 WIN7JDK环境变量配置教程

JDK怎么进行环境变量配置一直是困扰着许多入门编程员的问题,许多用户朋友们如果重新换了一台设备,很容易出现不知道怎么进行环境配置的情况,不用担心,小编为大家带来了详细的在WIN7系统下如果进行JDK教你一招

2020-11-07 11:05:38   jdk安装与环境变量配置   安装jdk并配置环境变量