学习使用YUI的Menu组件

      YUI的例子似乎过于复杂，其实它的使用是很简单的，最近在做毕业设计，选用了YUI作为客户端的库，一起看看如何使用YUI的Menu控件。

     YUI的Menu既可以从javascript代码中生成，也可以选择从已有的HTML标签中呈递(render)。下面将讨论第二种方法。

    从已有的标签中呈递，是使用menu最简单的方法。
   
    第一步 在html文件中引入必要文件

< script  type ="text/javascript"  src ="yui/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="yui/build/container/container_core-min.js" ></ script >
< script  type ="text/javascript"  src ="yui/build/menu/menu-min.js" ></ script >
< link  rel ="stylesheet"  type ="text/css"  href ="yui/build/menu/assets/menu.css" >

第一个文件是YUI的基础，包含了YAHOO类定义、DOM类定义和EVENT类定义。（相应地，YUI中也有三个分开的文件）；
第二个文件包含了YUI的容器核心部分；
第三个文件是menu的类定义文件；
第四个文件是一个样式表，用以描绘menu的外观。

第二步 在HTML文件中写入相应的菜单

< div  id ="someid" >
     < div  class ="bd" >
         < ul >
             < li >< a  href ="" > Test 1 </ a ></ li >
             < li >< a  href ="" > Test 2 </ a ></ li >
             < li >< a  href ="" > Test 3 </ a ></ li >
             < li >< a  href ="" > Test 4 </ a ></ li >
             < li >< a  href ="" > Test 5 </ a ></ li >
         </ ul >
     </ div >
</ div >

其中<div id="someid"> 是作为menu的容器，someid可以自定义，<div class="bd">作为YUI选择呈递的类标签，是必须的，即必须存在一个class="bd"的标签，YUI才可以正确的呈递，其中bd这个css类在menu.css中定义过了。下面的<ul>.......</ul>的内容可以替换为自己的列表内容。

第三步 在HTML文件中写入相应的代码

Example  =   function (){
     var  oMenu  =   new  YAHOO.widget.Menu( ' someid ' , { fixedcenter:  false });      // (1)
    oMenu.render();                                                                                                     // (2)
     function  onMenuToggle(p_oEvent)                                                                    // (3)
    {
        YAHOO.util.Event.stopPropagation(p_oEvent);
        oMenu.show();
    }
    YAHOO.util.Event.addListener( " ss " ,  " click " , onMenuToggle);                       // (4)
}

YAHOO.util.Event.onContentReady( " someid " , Example );                                // (5)

(1) 实例化menu类，两个参数，分别是与HTML中menu容器标签对应的Id 和menu的参数设置，fixedcenter:false意思是不使按钮处在页面正中间，而是显示在id为ss的标签旁边[见(4)]。

(2) 将menu呈递。（不是显示）

(3) 定义了一个函数，该函数负责显示menu。

(4) 在稍后的html中会有一个id为ss的标签，当该标签被点击("click")的时候，调用onMenuToggle函数来显示menu。

(5) 当someid标签的内容可用的时候调用Example函数来进行上述操作。

最后在html中加入一个id为ss的标签

< input  type ="button"  id ="ss"   />

 

---

 

此文仅简单说明了如何使用YAHOO.widget.Menu组件，在以后随着毕业设计的进一步发展，还会有更多深入的讨论。水平有限，望各位同行不吝赐教。

附完整的代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > Untitled Document </ title >
< script  type ="text/javascript"  src ="yui/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="yui/build/container/container_core-min.js" ></ script >
< script  type ="text/javascript"  src ="yui/build/menu/menu-min.js" ></ script >
< link  rel ="stylesheet"  type ="text/css"  href ="yui/build/menu/assets/menu.css" >

< script  type ="text/javascript" > ...
Example = function() ...{
    var oMenu = new YAHOO.widget.Menu('someid', ...{ fixedcenter: false,constraintoviewport: false });
    oMenu.render();
    function onMenuToggle(p_oEvent)
    ...{
        YAHOO.util.Event.stopPropagation(p_oEvent);
        oMenu.show();
    }
    YAHOO.util.Event.addListener("ss", "click", onMenuToggle);
}
YAHOO.util.Event.onContentReady("someid", Example);

</ script >
</ head >

< body >
< input  type ="button"  id ="ss"   />
< div  id ="someid" >
     < div  class ="bd" >
         < ul >
             < li >< a  href ="" > Test 1 </ a ></ li >
             < li >< a  href ="" > Test 2 </ a ></ li >
             < li >< a  href ="" > Test 3 </ a ></ li >
             < li >< a  href ="" > Test 4 </ a ></ li >
             < li >< a  href ="" > Test 5 </ a ></ li >
         </ ul >
     </ div >
</ div >
</ body >
</ html >