在微软IE 5.0版本的浏览器发布以前，网页编程中面对的最大挑战就是不能轻易地创建组件，以达到代码重用和多页面共享的目的。这个问题一直困扰着DHTML（动态 HEML）的网页编程者。他们只能不断地重复书写HTML、CSS和javascript的代码，以满足多个页面上的重复或相似的功能。自IE 5.0浏览器发布后，这种情况得到了改善，它带给我们一个新的指令组合方法，可把实现特定功能的代码封装在一个组件内，从而实现多页面的代码重用，使网页编程进入一个全新的天地。这个新的技术就是我们要谈到的DHTML中的“行为”（Behaviors）。
“行为”作为一个简单易用的组件，它封装了页面上特定的功能或动作。当把一个“行为”附到WEB页面中的一个元件上时，这个元件的原有行为就会有所改变。因此，网页编程者可以开发通用的DHTML指令，并改变原有对象的一些属性，用“行为”来增强一个对象的功能，同时也简化了页面的HTML代码。而且“行为”的创建和使用也非常简单方便，所需的知识也只是原来已经习惯使用的CSS样式表、HTML指令和javascript脚本语言。只要你对此有所了解，有过实际编程的经历，学习并掌握“行为”的使用完全没有问题。我们将以一个改变字体效果的“行为”组件为例来说明如何编写和使用一个“行为”，并体验“行为”给页面编辑带来的优点和方便之处。
首先新建一个名为font_efftce.htc的文本文件，组成“行为”组件的文件都是以.htc为扩展名，这个文件中的内容就是我们对这个“行为”的描述。它的创建和使用步骤如下：
(1)首先给这个“行为”增加几个事件响应，语句书写格式如下：
“EVENT”对应所需事件名,在这里分别为:onmouseover,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文档，尤其对于初学者来说是一个良好的学习习惯，你几乎可以得到任何你想找的答案，它的网址为：http://msdn.microsoft.com/ie/。
完整的“行为”文档“font_effect.htc”的内容如下：
////////////////////////“行为”文档开始////////////////////////////
//给“行为”增加四个鼠标事件
//给“行为”定义二个方法
//////////////////“行为”文档结束/////////////////////////////// (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> <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>代码片断如下：<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> <br>可以在单个HTML标记中定义多个命名空间： <br><HTML XMLNS:DOCJS XMLNS:DOCjavascript> <br>组件定义 <br>组件的名字是由HTC文档里定义在第一行的XML命名空间决定的 <br>该页不用调用其他的HTC话,就只有一个命名空间定义 <br>实际上，HTML组件的定义就是自定义标签行为的定义 <br>该行为包括一个属性和一个事件： <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> <br>其中的oncontentready是在组件被调用者完全导入时触发 <br>再看看fnInit() <br>function fnInit() { <br>document.body.innerHTML = element.value;//设定组件显示内容 <br>document.body.className = "clsMyTag"; //设定显示样式表, <br>defaults.viewLink = document; //使本组件对其他文档可见 <br>element.aProperty = element.value; //设置组件的属性值 <br>} <br>组件的调用 <br><HTML xmlns:MyCom> <br><HEAD> <br><?IMPORT NAMESPACE="MyCom" IMPLEMENTATION="MyTag.htc"/> <br></HEAD> <br><BODY> <br><MyCom:MyTag></MyCom:MyTag> <br></BODY> <br></td></tr></table>
<!--[diy=diycontentbottom]--><div id="diycontentbottom" class="area"></div><!--[/diy]-->
<script src="data/cache/home.js?R1y" type="text/javascript"></script>
<div id="click_div"><table cellpadding="0" cellspacing="0" class="atd">
<tr></tr>
</table>
<script type="text/javascript">
function errorhandle_clickhandle(message, values) {
if(values['id']) {
showCreditPrompt();
show_click(values['idtype'], values['id'], values['clickid']);
}
}
</script>
</div>
<!--[diy=diycontentclickbottom]--><div id="diycontentclickbottom" class="area"></div><!--[/diy]-->
</div>
<div class="o cl ptm pbm">
<a href="https://bbs.weiying.cn/home.php?mod=spacecp&ac=favorite&type=article&id=20465&handlekey=favoritearticlehk_20465" id="a_favorite" onclick="showWindow(this.id, this.href, 'get', 0);" class="oshr ofav">收藏</a>
<a href="https://bbs.weiying.cn/home.php?mod=spacecp&ac=share&type=article&id=20465&handlekey=sharearticlehk_20465" id="a_share" onclick="showWindow(this.id, this.href, 'get', 0);" class="oshr">分享</a>
<a href="misc.php?mod=invite&action=article&id=20465" id="a_invite" onclick="showWindow('invite', this.href, 'get', 0);" class="oshr oivt">邀请</a>
</div>
</div>
<!--[diy=diycontentrelatetop]--><div id="diycontentrelatetop" class="area"></div><!--[/diy]-->
<!--[diy=diycontentrelate]--><div id="diycontentrelate" class="area"></div><!--[/diy]-->
<div id="comment" class="bm">
<div class="bm_h cl">
<h3>最新评论</h3>
</div>
<div id="comment_ul" class="bm_c"><form id="cform" name="cform" action="portal.php?mod=portalcp&ac=comment" method="post" autocomplete="off">
<div class="tedt">
<div class="area">
<textarea name="message" rows="3" class="pt" id="message" onkeydown="ctrlEnter(event, 'commentsubmit_btn');"></textarea>
</div>
</div>
<input type="hidden" name="portal_referer" value="portal.php?mod=view&aid=20465#comment">
<input type="hidden" name="referer" value="portal.php?mod=view&aid=20465#comment" />
<input type="hidden" name="id" value="0" />
<input type="hidden" name="idtype" value="" />
<input type="hidden" name="aid" value="20465">
<input type="hidden" name="formhash" value="b88b8ae9">
<input type="hidden" name="replysubmit" value="true">
<input type="hidden" name="commentsubmit" value="true" />
<p class="ptn"><button type="submit" name="commentsubmit_btn" id="commentsubmit_btn" value="true" class="pn"><strong>评论</strong></button></p>
</form>
</div>
</div>
<!--[diy=diycontentcomment]--><div id="diycontentcomment" class="area"></div><!--[/diy]-->
</div>
<div class="sd pph">
<div class="drag">
<!--[diy=diyrighttop]--><div id="diyrighttop" class="area"></div><!--[/diy]-->
</div>
<div class="bm">
<div class="bm_h cl">
<h2>相关分类</h2>
</div>
<div class="bm_c">
<ul class="xl xl2 cl"><li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=21">设计资讯</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=22">平面设计</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=23">标志设计</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=24">空间设计</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=25">工业设计</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=26">网页设计</a></li>
</ul>
</div>
</div>
<div class="drag">
<!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
</div>
</div>
</div>
<div class="wp mtn">
<!--[diy=diy3]--><div id="diy3" class="area"></div><!--[/diy]-->
</div>
<input type="hidden" id="portalview" value="1"> </div>
<div id="ft" class="wp cl">
<div id="flk" class="y">
<p>
<a href="//wpa.qq.com/msgrd?v=3&uin=8828254&site=微赢网络技术论坛&menu=yes&from=discuz" target="_blank" title="QQ"><img src="static/image/common/site_qq.jpg" alt="QQ" /></a><span class="pipe">|</span><a href="https://bbs.weiying.cn/forum.php?mod=misc&action=showdarkroom" >小黑屋</a><span class="pipe">|</span><a href="topic-sitemap.html" target="_blank" >最新主题</a><span class="pipe">|</span><a href="https://bbs.weiying.cn/forum.php?showmobile=yes" >手机版</a><span class="pipe">|</span><strong><a href="http://bbs.weiying.cn" target="_blank">微赢网络技术论坛</a></strong>
( <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备08020429号</a> )<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?a66c064273122db3a05de72f6cd924eb";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script></p>
<p class="xs0">
GMT+8, 2024-9-30 21:22<span id="debuginfo">
, Processed in 0.338892 second(s), 12 queries
, Gzip On, MemCache On.
</span>
</p>
</div>
<div id="frt">
<p>Powered by <strong><a href="https://www.discuz.vip/" target="_blank">Discuz!</a></strong> <em>X3.5</em></p>
<p class="xs0">© 2001-2023 <a href="https://code.dismall.com/" target="_blank">Discuz! Team</a>.</p>
</div></div>
<script src="home.php?mod=misc&ac=sendmail&rand=1727702525" type="text/javascript"></script>
<div id="scrolltop">
<span hidefocus="true"><a title="返回顶部" onclick="window.scrollTo('0','0')" class="scrolltopa" ><b>返回顶部</b></a></span>
</div>
<script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script>
</body>
</html>
|
