动态HTML教程（四）

    即使你刻意观赏了本教程并做了留给你的家园功课的话，你心中确定还生存如许一个疑义：这个动画是很风趣，然而你做的网站仍旧是比拟华而不实的那种，以是动静html对你来说大概没有太大的价格。

    不妨，即日的教程即是对准你如许的题目创造的。即日咱们将创造几个用户界面元素，处置用户事变，动静变换后台，机动变幻网页实质以及表露或湮没某些页面临象。 一切那些实质都有很强的适用性。

    你最佳能先观赏javascript教程中对于链接事变的课程，再不对用户事变完备发端的领会。在即日的课程中将常常用到链接事变。 

    让咱们编写少许咱们所熟习的用户界面元素－－下拉菜单，子菜单。那些元素和你此刻正在欣赏的窗口顶部的菜单条很一致。大普遍操纵体例都有一个类属专用接口东西集，当你须要运用下拉菜单时就可挪用该东西集。而后你不妨设定被选项手段的称呼和实行的动作。 

    因为html不包括如许的专用接口东西集，以是你必需创造本人的东西集。开始你必需刻画它的表面。咱们在菜单条上介入确定的脸色以及刻画各项功效的称呼，比方file、edit、view之类。当你点击该笔墨时，就会表露该菜单项下的子菜单。在子菜单框中式点心击相映的菜单名目就可触发某个执路途序的动作。让咱们在html中编写如许的菜单。

    开始，你须要天生一个div动作顶部的菜单条： 

 <div id="menubar"> </div>此刻将该菜单条放在页面顶部，加上一定的脸色： 

 <style type="text/css"> #menubar {position: absolute;           left: 0;           top: 0;                   width: 100%;           height: 22px;           border: 1px solid #99ffff;           background-color: #99ffff;           layer-background-color: #99ffff;         }</style> 则天生如许一个div：

    你大概会对结果一条css典型不知以是然，这项是netscape 对css的扩充，它指的是一致定位了的元素的背局面。因为边框树立为border: 1px solid #99ffff;，以是有需要介入这一条使背局面蔓延到div的边框。要不背局面只能在div所包括的实质下面表露。 

    底下咱们插入一个菜单目次。咱们将题目树立为"webmonkey" 。 

 <style type="text/css"> #menubar {position: absolute;      left: 0;      top: 0;      width: 100%;      height: 22px;      border: 1px solid #99ffff;      background-color: #99ffff;      layer-background-color: #99ffff;     } .damenu {position: absolute;     width: 100px;     height: 22px;     border: 1px solid #99ffff;     top: 0px    } </style>...<div id="menubar"> </div> <div id="webmonkey" class="damenu"> webmonkey </div>   表露截止如次：

webmonkey

底下在webmonkey菜单项下介入子菜单： 

 <style> .moremenu {position: absolute;                     width: 100px;                     border: 1px solid red;                     background-color: red;                     layer-background-color: red;                     top: 22px;                     } </style>...<div id="moremonkey" class="moremenu"> aaron   <br> captain cursor   <br> cassandra   <br> chris   <br> courtney   <br> jeff   <br> joanne   <br> jean pierre   <br> klug   <br> kristin   <br> nadav   <br> taylor   <br> thau   <br> tim   <br> wendy   <br> </div> 同其余菜单项贯串后表露截止如次：

webmonkey

aaron captain cursor cassandra chris courtney jeff joanne jean pierre klug kristin nadav taylor thau tim wendy

    底下咱们为菜单项设定功效。开始要做的是采用moremenu类，并将其湮没。由于常常情景下，即使你不点击菜单项，它不会表露子菜单目次。以是，你该当介入底下的代码： 

 .moremenu {position: absolute;      width: 100px;      border: 1px solid red;      background-color: red;      layer-background-color: red;      visibility: hidden;      top: 22px; }此刻这个div仍旧在页面中，但欣赏器不将它表露出来。 

    此刻给菜单条介入剧本使其能相应鼠目标动作并实行相映的功效。咱们运用visibility属性湮没子菜单名目并在菜单名目被点击时表露子菜单。 

    处置visibility时，你会连忙遇到dom不兼容的题目。netscape的dom更多地受其layer标签和属性的感化。以是纵然在dom中你将一个东西的visibility属性树立为hidden（湮没），netscape也会将其表露出来。即使你介入底下这条： 

if (damenu.visibility == 'hidden')

你所获得的不是款式宾语法的参数值，而是layers语法的参数值。 

    以是即使你树立document.foo.visibility = 'visible', 则代码将会依照你预见的那么实行，东西foo在屏幕中不妨被看到。即使你用alert(document.foo.visibility)查看参数值, 则归来的数值是show。处置方法是树立少许变量，用规范的前提并设定一个名为visible的变量用来netscape中的'show'，在internet explorer中则树立'visible'。在netscape中树立一个名为'hide' 的变量，在internetexplorer'则用hidden'。在相映的字符串场所放入那些变量，则题目就处置了。 

 <script>if (document.layers) {  visible = 'show';  hidden = 'hide';} else if (document.all) {  visible = 'visible';  hidden = 'hidden';}

function bartog(menu) {  if (document.layers) {    damenu = document.layers[menu];  } else if (document.all) {    damenu = document.all(menu).style;  }  if (damenu.visibility == visible) {    damenu.visibility = hidden;  } else {    damenu.visibility = visible;  }  lastmenu = damenu;}</script>    bartog因变量所做 的是树立规范的前提语句，即使在被传递的变量菜单中设定的东西是visible，则湮没该东西，要不就表露该东西。而后将对该东西的援用传播给名为lastmenu的全部变量（如许此后，此后你不妨再封闭它）。 接下来你要做的即是挪用这个因变量，以是在菜单条中你将"webmonkey"设定一个anchor（锚区），并设定被点击是实行的动作。 

 <div id="webmonkey" class="damenu">  <a href="#" class="itemanchor" onclick="javascript: bartog('moremonkey'); return false;">  webmonkey  </a></div>

这段代码实行bartog因变量，并将该当被翻开或封闭的div 的称呼传播给它。 

    底下要做的是给每个菜单条设定一个动作。你不妨设定任何一种动作，不确定非得是动静html。但因为本教程讲的是动静html，而咱们的课题是将怎样变换layers的visibility（可视性）属性 。以是咱们为每一个菜单名目设定湮没和表露包括相映的网猴图象的层（layer）。 

 <script>function menuitem(item){  if (document.layers) {    dalast = document.layers[lastitem];    daitem = document.layers[item];  } else if (document.all) {    dalast = document.all(lastitem).style;    daitem = document.all(item).style;  }  dalast.visibility = hidden;  daitem.visibility = visible;  lastmenu.visibility = hidden;  lastitem = item;}

var lastitem = 'aaron';</script>    这段剧本仍旧用咱们的老伙伴－－前提语句挪用两个东西，现挪用item，而后是结果被翻开的lastitem(lastitem的缺省树立是'aaron' )，而且该语句还要回顾被翻开的结果一个菜单（咱们在bartog中树立的lastmenu）。树立完一切visibility后还回顾lastitem。

底下须要给每个菜单名目加上相映的anchor挪用。 

 <a href="#" class="itemanchor" onclick="menuitem('captcursor'); return false">    这条代码挪用menuitem因变量，并引导其表露id为"captcursor"的div。此刻将anchor锚定每个菜单名目并将每个div指向相映的网猴的称呼。

    此刻你不妨创造你本人的菜单并在个中介入本人的菜单名目，湮没及表露div，并在div中介入表单位素。来日的课程中咱们将贯串前方所学的常识作一个完备的展现。