IE5.0之后的htc组件如何定义-创新互联

这篇文章给大家分享的是有关IE5.0之后的htc组件如何定义的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联是一家网站设计公司,集创意、互联网应用、软件技术为一体的创意网站建设服务商,主营产品:成都响应式网站建设品牌网站建设成都全网营销。我们专注企业品牌在网站中的整体树立,网络互动的体验,以及在手机等移动端的优质呈现。成都网站制作、成都网站设计、移动互联产品、网络运营、VI设计、云产品.运维为核心业务。为用户提供一站式解决方案,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏析悦目的作品,网站的价值服务。

在微软IE 5.0版本的浏览器发布以前,网页编程中面对的较大挑战就是不能轻易地创建组件,以达到代码重用和多页面共享的目的。这个问题一直困扰着DHTML(动态 HEML)的网页编程者。他们只能不断地重复书写HTML、CSS和javascript的代码,以满足多个页面上的重复或相似的功能。自IE 5.0浏览器发布后,这种情况得到了改善,它带给我们一个新的指令组合方法,可把实现特定功能的代码封装在一个组件内,从而实现多页面的代码重用,使网页编程进入一个全新的天地。这个新的技术就是我们要谈到的DHTML中的“行为”(Behaviors)。

“行为”作为一个简单易用的组件,它封装了页面上特定的功能或动作。当把一个“行为”附到WEB页面中的一个元件上时,这个元件的原有行为就会有所改变。因此,网页编程者可以开发通用的DHTML指令,并改变原有对象的一些属性,用“行为”来增强一个对象的功能,同时也简化了页面的HTML代码。而且“行为”的创建和使用也非常简单方便,所需的知识也只是原来已经习惯使用的CSS样式表、HTML指令和javascript脚本语言。只要你对此有所了解,有过实际编程的经历,学习并掌握“行为”的使用完全没有问题。我们将以一个改变字体效果的“行为”组件为例来说明如何编写和使用一个“行为”,并体验“行为”给页面编辑带来的优点和方便之处。

首先新建一个名为font_efftce.htc的文本文件,组成“行为”组件的文件都是以.htc为扩展名,这个文件中的内容就是我们对这个“行为”的描述。它的创建和使用步骤如下:



代码如下:


(1)首先给这个“行为”增加几个事件响应,语句书写格式如下:




[\s\S ]*
“EVENT”对应所需事件名,在这里分别为nmouseover,onmouseout,onmousedown,onmouseup 四个事件名,你当然可以再增加其它的事件名来满足你的特定需求。“ONEVENT”对应着个自的事件句柄,即事件触发时所调用的函数名称。 glowit()函数使字体周围产生一个红色的辉光。noglow()函数是消除字体的辉光效果。Font2yellow()函数是把字体颜色改为黄色。 Font2blue()函数是把字体颜色改为蓝色。四个事件的定义都是相似的。
(2)接下来,再给这个“行为”增加二个“方法”定义,内容如下。


“NAME”参数对应的是给定的“方法”名称。move_down和move_right分别是向下和向右移动的“方法”对应的函数名称。注意,在方法名的后面不要带“( )”括号,即不要写成“move_down()”这个样子,这在“方法”定义的语法上是不允许的。
(3)接下来的工作就是在我们熟悉的DHTML环境下,用javascript脚本语句编写“事件句柄”和“方法”所对应的函数内容,实现预期的效果。具体内容参考下面的源程序。其中的“element”参数指的是这个“行为”所附着的对象,因为“行为”总是被附着到页面的元件上面,并通过这个元件发挥作用。其它语句都是DHTML的编程内容,就不再多说了。如有不明之处,可参考微软的MSDN开发文档中有关IE浏览器的内容,上面有详细的DHTML编程参考内容、属性和方法使用说明等,并包含了大量的文章和举例程序。经常访问微软的MSDN文档,尤其对于初学者来说是一个良好的学习习惯,你几乎可以得到任何你想找的答案,它的网址为:/tupian/20230522/
完整的“行为”文档“font_effect.htc”的内容如下:
////////////////////////“行为”文档开始////////////////////////////
//给“行为”增加四个鼠标事件
[code]




//给“行为”定义二个方法




//////////////////“行为”文档结束///////////////////////////////
(4)如何在一个页面上使用“行为”
在页面上使用“行为”组件,并不需要学习新的知识。所需的知识的也不过是CSS样式表和HTML的设置而已,请看下面的语句。



代码如下:




可以看出,这和以前我们已经熟知的样式表设置完全相同。上面的语句定义了一个样式名:“myfilter”,其中对我们来说比较新的内容是:“behavior:url(font_effect.htc);”,“behavior”是新增的“行为”属性名,这就是“行为”在样式表中的设置方式。括号中的内容是“行为”文档的文件名,本例中表明“行为”文档在与页面文件在同一个目录下,如果“行为”文档安置在其它目录下,在此参数的前面要加上相应的路径名,以保证可以正确地定位“行为”文档的位置。此“样式”中的其它内容就是普通的样式属性设置,可根据你的需要增减,但在此例中,由于使用了 “glow”滤镜效果,至少要设置一个宽度(width)属性。通过以上的样式指定,我们就有了一个名为:“myfilter”的样式,它附带一个有字体变化效果的“行为”。如果你想要在一个页面元件上使用这个附带“行为”的样式,同样也很简单,只要把这个“样式名”安置在元件的属性设置区域即可,见下面的语句。
行为产生的文字效果

鼠标指向后产生辉光
以上语句里面没有什么新的内容,class='myfilter'就是我们所熟悉的样式设置。在第一个“span”标记的属性中还定义了一个“id”标记,稍后就会看到,这是用来演示调用“行为”内的“方法”而设置的。这样设置后,“span”元件中的内容就可以显示出“行为”组件内的预定效果:
1. 鼠标指针移动到文字内容上时,在文字周围产生红色的辉光效果,同时文字变成白色。
2. 当鼠标按钮按下时,文字颜色改变为黄色。
3. 鼠标按钮抬起后,文字颜色又改变为蓝色。
4. 当鼠标指针移动到文字区域以外时,去掉了红色辉光效果,文字恢复原样。
另外,我们在定义“行为”时设置了二个“方法”,“move_down”和“move_right”。为调用这二个“方法”,定义了二个按钮:



代码如下:






用按钮的onclick事件去调用这二个“方法”,先前定义的“id”标记就作为元件的对象名称,用“myspan.move_down”来调用“方法”,操纵这个对象。可以看到,在按下相应的按钮后,会使第一行的文字产生向下或向右的移动。虽然只是用第一行文字做了示范,实际上,只要做相应的设置,你也可以移动其它对象。页面源文档的完整内内容如下:



代码如下:




行为效果演示< /TITLE ><br/><STYLE ><br/>.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}<br/></STYLE><br/></HEAD><br/><BODY><br/><span id="myspan" class='myfilter'>行为产生的文字效果</span><br/><br/><span class='myfilter'>鼠标指向后产生辉光</span><br/><br/><span class='myfilter'>同时文字变白</span><br/><br/><span class='myfilter'>按下鼠标后文字变黄</span><br/><br/><span class='myfilter'>抬起鼠标后文字变蓝</span><br/><br/><span class='myfilter'>鼠标离开后文字恢复原状</span><br/><br/><button onclick="myspan.move_right();">向右移动第一行文字</button><br/><br/><button onclick="myspan.move_down();">向下移动第一行文字</button><br/></BODY><br/></html></p><br/><p><br/>通过以上的简单介绍,可以看出,我们很容易地在一个“行为”中同时组合了多种文字变化效果,通过简单的“样式”设置,任意地将它与页面元件相关连,体现了“行为”组件的优点和强大功能。一个“行为”组件,不仅能在一个页面内重复使用,也可供同一站点上的所有页面使用。试想一下,如果不使用“行为”来完成上述的效果,虽然可以在页面内调用一组预定的函数来完成同样的功能,但页面内每一个使用文字效果的元件都要附加四个鼠标事件,如果在多个页面内使用相同的效果,被调用的函数也需要在每一个页面内重复设置。相比之下,孰优孰劣是很明显的。所以,使用“行为”组件,可以制作出简洁、高效、通用和便于维护的页面。本文的举例只是为了说明“行为”组件的编写和使用过程,使读者对“行为”编程有一个概括的了解,并以此基础制作出自己所需要的“行为”组件,或直接引用满足个人需要的现成“行为”组件,因为“组件共享”的概念也是“行为”开发者的初衷。最后,愿本文能起到“抛砖引玉”的目的,使读者步入精彩的 DHTML网页编程天地。<br/><br/>说明:<br/>HTC是HTML component的缩写,<br/>是IE5.0的主要扩展之一,<br/>除了具备一般组件的可重用优点之外,<br/>还具有易于开发使用等优点,<br/>因为需要引入外部文件,这里就不举例了,宝库里有例子.<br/><br/>控件和组件<br/>HTC提供了一个简单机制以在脚本中实现DHTML行为。一个HTC文件和HTML文件没有任何差别,并且以“.htc”为后缀,<br/><br/>可以使用HTC实现以下行为:<br/>设定属性和方法。通过“PROPERTY”和“METHOD”元素定义<br/>设置自定义事件。通过“EVENT”元素实现,用该元素的“fire()”方法释放事件,<br/>通过“createEventObject()”方法设置事件环境。<br/>访问所包含该HTC的的HTML页的DHTML对象模型,使用HTC的“element"对象,返回<br/>一个附加行为的元素,使用该对象,HTC可以访问包含文挡及它的对象模型(属性、方法、事件)。<br/>收取通知,使用”ATTACH“元素实现,浏览器不但通知HTC标准的DHTML事件,而且通知HTC两种特殊事件:oncontentready事件和ondocumentready事件。<br/><br/>定义标记和命名空间<br/>HTC的基础是自定义标记<br/>要为页面定义自定义标记,必须为该标记提供命名空间<br/>要使用该标记必须在该标记前加上正确的XML命名空间前缀<br/>例如:<br/>定义一个新标记RIGHT的例子<br/>代码片断如下:</p><br/><br/><p>代码如下:</p><p><br/><HTML XMLNS:DOCJS><br/><HEAD><br/><STYLE><br/>@media all {<br/>DOCJS\:RIGHT {text-align:right; width:100}<br/>}<br/></STYLE><br/></HEAD><br/><BODY><br/><DOCjs:RIGHT><br/>Read Doc javascript's columns, tips, tools, and tutorials<br/></DOCjs:RIGHT><br/></BODY><br/></HTML></p><br/><p><br/>可以在单个HTML标记中定义多个命名空间:<br/><HTML XMLNS:DOCJS XMLNS:DOCjavascript><br/>组件定义<br/>组件的名字是由HTC文档里定义在第一行的XML命名空间决定的<br/>该页不用调用其他的HTC话,就只有一个命名空间定义<br/>实际上,HTML组件的定义就是自定义标签行为的定义<br/>该行为包括一个属性和一个事件:</p><br/><br/><p>代码如下:</p><p><br/><HTML xmlns:MyTag><br/><HEAD><br/><PUBLIC:COMPONENT tagName="MyTag"><br/><PROPERTY NAME="value"></PROPERTY><br/><ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH><br/></PUBLIC:COMPONENT><br/><STYLE>//为组件定义样式表<br/>.cssMyTag{<br/>}<br/></STYLE><br/><SCRIPT language=javascript><br/>function MyTagBehavior1(){} //为组件定义方法<br/></SCRIPT><br/></HEAD><br/><BODY onclick=MyTagBehavior1> //为组件定义响应事件<br/></BODY><br/></HTML></p><br/><p><br/>其中的oncontentready是在组件被调用者完全导入时触发<br/>再看看fnInit()</p><br/><br/><p>代码如下:</p><p><br/>function fnInit() {<br/>document.body.innerHTML = element.value;//设定组件显示内容<br/>document.body.className = "clsMyTag"; //设定显示样式表,<br/>defaults.viewLink = document; //使本组件对其他文档可见<br/>element.aProperty = element.value; //设置组件的属性值<br/>}</p><br/><p><br/>组件的调用</p><br/><br/><p>代码如下:</p><p><HTML xmlns:MyCom><br/><HEAD><br/><?IMPORT NAMESPACE="MyCom" IMPLEMENTATION="MyTag.htc"/><br/></HEAD><br/><BODY><br/><MyCom:MyTag></MyCom:MyTag><br/></BODY><br/></HTML></p><br/><p>感谢各位的阅读!关于“IE5.0之后的htc组件如何定义”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!</p> <br> 网页名称:IE5.0之后的htc组件如何定义-创新互联 <br> 文章来源:<a href="http://scyanting.com/article/gdjpe.html">http://scyanting.com/article/gdjpe.html</a> </div> </div> <div class="contentr fr"> <h3>其他资讯</h3> <ul> <li> <a href="/article/jhhgdp.html">windowsnotion中文版怎么设置</a> </li><li> <a href="/article/jhhgdd.html">linux中的线程是指什么</a> </li><li> <a href="/article/jhhihe.html">如何使用docker容器建立程序</a> </li><li> <a href="/article/jhhgdi.html">如何判断一个无向图是否为连通图的方法</a> </li><li> <a href="/article/jhhigi.html">MySQL主主(双主)数据同步</a> </li> </ul> </div> </div> </div> <!--底部--> <footer> <div class="foot"> <div class="container"> <h1>盐亭大橙子建站您身边的网站制作服务商</h1> <div class="foot1"> <ul> <li> <dl><i class="iconfont"></i><b>地址ADDRESS</b></dl> <p>四川-成都青羊区太升南路288号<br> 锦天国际A座10楼 </p> </li> <li> <dl><i class="iconfont"></i><b>电话/TEL</b></dl> <p><a href="tel:02886922220" target="_blank">028 86922220</a> (工作日)<br> <a href="tel:18980820575" target="_blank">1898082 0575</a> ( 7x24 ) </p> </li> <li> <dl><i class="iconfont"></i><b>QQ咨询</b></dl> <p> 244261566 (售前)<br> 631063699 (售后) </p> </li> <li> <dl><i class="iconfont"></i><b>邮箱/E: mail</b></dl> <p> service@cdcxhl.com (业务)<br> hr@cdcxhl.com (求职) </p> </li> </ul> </div> <div class="link"> 友情链接: <a href="http://www.ruijiemsc.com/" title="瑞杰管理" target="_blank">瑞杰管理</a>   <a href="http://www.kswcd.com/solution/" title="网站方案" target="_blank">网站方案</a>   <a href="http://www.bcwzsj.com/" title="成都广告安装公司" target="_blank">成都广告安装公司</a>   <a href="http://chengdu.kswsj.cn/" title="成都网站SEO优化公司" target="_blank">成都网站SEO优化公司</a>   <a href="http://www.dmvi.cn/ser/huace/" title="画册设计制作" target="_blank">画册设计制作</a>   <a href="http://www.scqtclxh.com/" title="成都火锅桌椅" target="_blank">成都火锅桌椅</a>   <a href="http://chengdu.cdcxhl.cn/seo/ " title="成都网站推广" target="_blank">成都网站推广</a>   <a href="http://m.cdcxhl.cn/H5/" title="成都响应式网站建设" target="_blank">成都响应式网站建设</a>   <a href="http://www.bgwzsj.com/" title="班戈纳美网站" target="_blank">班戈纳美网站</a>   <a href="http://seo.cdkjz.cn/" title="网络推广外包" target="_blank">网络推广外包</a>    </div> </div> </div> <div class="copy container"> Copyright © 2017-2023 All Rights Reserved. 青羊区大橙子信息咨询工作室 版权所有 <a href="http://www.beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2022028542号-18</a> [原创设计,独立版权。未经许可.不得拷贝或镜像]<br> <a href="http://www.kswsj.cn/" target="_blank">网站营销推广</a> | <a href="https://www.cdcxhl.com/pinpai.html" target="_blank">品牌网站设计</a> | <a href="http://www.cdweb.net/" target="_blank">自适应网站制作</a> | <a href="http://cdkjz.cn/wangzhan/pinpai/" target="_blank">品牌网站制作</a> | <a href="http://chengdu.cdxwcx.cn/" target="_blank">成都网站制作</a> | <a href="https://www.cdcxhl.com/cloud/" target="_blank">云服务器</a> | <a href="https://www.cdcxhl.com/weihu/abazhou.html" target="_blank">盐亭网站维护</a> | (盐亭网站制作QQ : 631063699 )</div> </footer> <!--在线咨询--> <div class="fot"> <ul> <li> <a href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" target="_blank"> <img src="/Public/Home/img/fot1.png" alt="建站咨询"> <p>在线咨询</p> </a> </li> <li> <a href="tel:18980820575" target="_blank"> <img src="/Public/Home/img/fot2.png" alt="建站电话"> <p>拨打电话</p> </a> </li> </ul> </div> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>