实战YUI 的 Menu 组件

Menu家族成员

YAHOO.widget.Menu

YAHOO.widget.Overlay 的子类,其他menu容器的超类. Menu类创建一个容器(Container)并放置一列垂直的列表.每项菜单称为MenuItem.

YAHOO.widget.ContextMenu

Menu的子类,创建一个菜单,能被某html元素的contextmenu事件触发.每项菜单称为MenuItem.

YAHOO.widget.MenuBar

Menu的子类,只不过是水平风格而不是垂直风格.每项菜单称为MenuItem.

组成关系图如下




Menu 和 MenuItem 的关系图如下



每个MenuItem 又可以是一个Menu,这叫做 sub menu item.

开始

以下库是必须的:(注:这段是翻译官方网的,有问题.原因在后文有说明 )

<!--  Core + Skin CSS  -->
< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css" >

<!--  Dependencies  -->  
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js" ></ script >

<!--  Source File  -->
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js" ></ script >

基本用法

Menu可以通过html或js两种方式完成配置.Menu组件遵循 YAHOO.widget.Module 的模型,用一个div作为body,所有<li>元素象征一个item.最简单的menu如下,传入div的id并依次调用render,show方法即可,如下:


< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" >  
< title > 交通违法数据处理系统 2009 </ title >

<!--  Core + Skin CSS  -->
< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css" >

<!--  Dependencies  -->  
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js" ></ script >

<!--  Source File  -->
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js" ></ script >


</ head >

< body  class ="yui-skin-sam" >
< div  id ="basicmenu"  class ="yuimenu" >
     < div  class ="bd" >
         < ul  class ="first-of-type" >
             < li  class ="yuimenuitem" >
                 < a  class ="yuimenuitemlabel"  href ="http://mail.yahoo.com" >
                    Yahoo! Mail
                 </ a >
             </ li >
             < li  class ="yuimenuitem" >
                 < a  class ="yuimenuitemlabel"  href ="http://addressbook.yahoo.com" >
                    Yahoo! Address Book
                 </ a >
             </ li >
             < li  class ="yuimenuitem" >
                 < a  class ="yuimenuitemlabel"  href ="http://calendar.yahoo.com" >
                    Yahoo! Calendar
                 </ a >
             </ li >
             < li  class ="yuimenuitem" >
                 < a  class ="yuimenuitemlabel"  href ="http://notepad.yahoo.com" >
                    Yahoo! Notepad
                 </ a >
             </ li >
         </ ul >             
     </ div >
</ div >

< script >
YAHOO.util.Event.onContentReady( " basicmenu " ,  function  () {
            
     /*
         Instantiate a Menu.  The first argument passed to the 
         constructor is the id of the element in the DOM that represents 
         the Menu instance.
     */
    
     var  oMenu  =   new  YAHOO.widget.Menu( " basicmenu " );
    
    
     /*
         Call the "render" method with no arguments since the markup for 
         this Menu instance already exists in the DOM.
     */
    
    oMenu.render();
    

     //  Show the Menu instance
    
    oMenu.show();
            
});
</ script >


</ body >
</ html >

Js初始化Menu

在html里放一个div,在Menu的构造函数里传入div的id,并调用addItem , insertItem , 和 addItems 等方法添加元素,如下

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
     < meta  http-equiv ="content-type"  content ="text/html; charset=utf-8" >
< title > Basic Menu From JavaScript </ title >

< style  type ="text/css" >
/* margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments.  */
body  {
    margin : 0 ;
    padding : 0 ;
}

#rendertarget  {
    width : 180px ;
}

</ style >

< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css"   />
< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css"   />
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js" ></ script >


<!-- begin custom header content for this example -->
< style  type ="text/css" >

     /*
        Set the "zoom" property to "normal" since it is set to "1" by the 
        ".example-container .bd" rule in yui.css and this causes a Menu
        instance's width to expand to 100% of the browser viewport.
     */
    
    div.yuimenu .bd  {
    
        zoom :  normal ;
    
     }

</ style >
<!-- end custom header content for this example -->

</ head >

< body  class =" yui-skin-sam" >

< div  id ="rendertarget" ></ div >

< script  type ="text/javascript" >

     /*
         Initialize and render the Menu when the element it is to be 
         rendered into is ready to be scripted.
     */

    YAHOO.util.Event.onAvailable( " rendertarget " ,  function  () {

         /*
             Instantiate a Menu:  The first argument passed to the 
             constructor is the id of the element in the page 
             representing the Menu; the second is an object literal 
             of configuration properties.
         */

         var  oMenu  =   new  YAHOO.widget.Menu( " basicmenu " , { fixedcenter:  true ,visible: true ,position: " static "  });


         /*
            Add items to the Menu instance by passing an array of object literals 
            (each of which represents a set of YAHOO.widget.MenuItem 
            configuration properties) to the "addItems" method.
         */

        oMenu.addItems([

                { text:  " Yahoo! Mail " , url:  " http://mail.yahoo.com "  },
                { text:  " Yahoo! Address Book " , url:  " http://addressbook.yahoo.com "  },
                { text:  " Yahoo! Calendar " , url:  " http://calendar.yahoo.com "  },
                { text:  " Yahoo! Notepad " ,  url:  " http://notepad.yahoo.com "  }

            ]);


         /*
            Since this Menu instance is built completely from script, call the 
            "render" method passing in the DOM element that it should be 
            appended to.
         */

        oMenu.render( " rendertarget " );


         //  Set focus to the Menu when it is made visible

        
        oMenu.show();
    
    });
    
</ script >


</ body >
</ html >

如果你运行这两个例子,你会发现第二个菜单比第一个好看很多,原因在于官方网的getting start章节里少引了一些必需的库.完整的js和css库应该如上第二个例子,即:

< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css"   />
< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css"   />
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js" ></ script >

前两个例子的菜单是一直显示的,特别主意的是第二个例子,通过Menu的初始化函数传入配置让菜单一直显示.

用button控制菜单显示与否,看官网的例子得了.在这里 , 重点是这两句:

//  Set focus to the Menu when it is made visible
oMenu.subscribe( " show " , oMenu.focus);
YAHOO.util.Event.addListener( " menutoggle " ,  " click " , oMenu.show,  null , oMenu);

 

创建子菜单

Html方式创建子菜单

方法很简单,再创建一个Menu,然后放到某个<li>元素里即可,如下例子:(重点看submenu begin end 一段)


< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" >  
< title > 交通违法数据处理系统 2009 </ title >


< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css"   />
< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css"   />
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js" ></ script >


</ head >

< body  class ="yui-skin-sam" >

< div  id ="productsandservices"  class ="yuimenu" >
     < div  class ="bd" >
         < ul  class ="first-of-type" >
             < li  class ="yuimenuitem" >
            
                 < a  class ="yuimenuitemlabel"  href ="#communication" >
                    Communication
                 </ a >

                 <!--  A submenu begin:****************************************************************** -->

                 < div  id ="communication"  class ="yuimenu" >
                     < div  class ="bd" >
                         < ul >

                         < li  class ="yuimenuitem" >
                                     < a  class ="yuimenuitemlabel"  href ="http://mail.yahoo.com" >
                                        Yahoo! Mail
                                     </ a >
                                 </ li >
                                 < li  class ="yuimenuitem" >
                                     < a  class ="yuimenuitemlabel"  href ="http://addressbook.yahoo.com" >
                                        Yahoo! Address Book
                                     </ a >
                                 </ li >
                                 < li  class ="yuimenuitem" >
                                     < a  class ="yuimenuitemlabel"  href ="http://calendar.yahoo.com" >
                                        Yahoo! Calendar
                                     </ a >
                                 </ li >
                                 < li  class ="yuimenuitem" >
                                     < a  class ="yuimenuitemlabel"  href ="http://notepad.yahoo.com" >
                                        Yahoo! Notepad
                                     </ a >
                                 </ li >

                         </ ul >
                     </ div >
                 </ div >  
                  <!--  A submenu end:****************************************************************** -->

            
             </ li >
             < li  class ="yuimenuitem" >
            
                 < a  class ="yuimenuitemlabel"  href ="http://shopping.yahoo.com" >
                    Shopping
                 </ a >

                 <!--  A submenu  -->

                 < div  id ="shopping"  class ="yuimenu" >
                     < div  class ="bd" >                     
                         < ul >

                         <!--  Items for the submenu go here  -->

                         </ ul >
                     </ div >
                 </ div >                     
            
             </ li >
             < li  class ="yuimenuitem" >
            
                 < a  class ="yuimenuitemlabel"  href ="http://entertainment.yahoo.com" >
                    Entertainment
                 </ a >

                 <!--  A submenu  -->

                 < div  id ="entertainment"  class ="yuimenu" >
                     < div  class ="bd" >                     
                         < ul >

                         <!--  Items for the submenu go here  -->

                         </ ul >                     
                     </ div >
                 </ div >                                         
            
             </ li >
             < li  class ="yuimenuitem" >
            
                 < a  class ="yuimenuitemlabel"  href ="#information" >
                    Information
                 </ a >

                 <!--  A submenu  -->

                 < div  id ="information"  class ="yuimenu" >
                     < div  class ="bd" >                                         
                         < ul >

                         <!--  Items for the submenu go here  -->

                         </ ul >                     
                     </ div >
                 </ div >                                         
            
             </ li >
         </ ul >             
     </ div >
</ div >


< script >
YAHOO.util.Event.onContentReady( " productsandservices " ,  function  () {
            
     /*
         Instantiate a Menu.  The first argument passed to the 
         constructor is the id of the element in the DOM that represents 
         the Menu instance.
     */
    
     var  oMenu  =   new  YAHOO.widget.Menu( " productsandservices " );
    
    
     /*
         Call the "render" method with no arguments since the markup for 
         this Menu instance already exists in the DOM.
     */
    
    oMenu.render();
    

     //  Show the Menu instance
    
    oMenu.show();
            
});
</ script >


</ body >
</ html >

 

Js方式创建子菜单

比用html方式简单,在加入菜单的时候,加个subitem对象即可:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
     < meta  http-equiv ="content-type"  content ="text/html; charset=utf-8" >
< title > Basic Menu From JavaScript </ title >

< style  type ="text/css" >
/* margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments.  */
body  {
    margin : 0 ;
    padding : 0 ;
}

#rendertarget  {
    width : 180px ;
}

</ style >

< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css"   />
< link  rel ="stylesheet"  type ="text/css"  href ="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css"   />
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js" ></ script >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js" ></ script >


<!-- begin custom header content for this example -->
< style  type ="text/css" >

     /*
        Set the "zoom" property to "normal" since it is set to "1" by the 
        ".example-container .bd" rule in yui.css and this causes a Menu
        instance's width to expand to 100% of the browser viewport.
     */
    
    div.yuimenu .bd  {
    
        zoom :  normal ;
    
     }

</ style >
<!-- end custom header content for this example -->

</ head >

< body  class =" yui-skin-sam" >

< div  id ="rendertarget" ></ div >

< script  type ="text/javascript" >

    YAHOO.util.Event.onAvailable( " rendertarget " ,  function  () {  
         var  oMenu  =   new  YAHOO.widget.Menu( " basicmenu " , { fixedcenter:  true ,visible: true ,position: " static "  });
        oMenu.addItems([

                { text:  " Yahoo! Mail " , 
                    submenu: { 
    
                            id:  " submenu1 " ,  //  Id for the submenu element to be created
        
                             //  Array of YAHOO.widget.MenuItem configuration properties
        
                            itemdata: [ " Menu Item One " ,  " Menu Item Two " ,  " Menu Item Three " ]
                        }               
                
                },
                { text:  " Yahoo! Address Book " , url:  " http://addressbook.yahoo.com "  },
                { text:  " Yahoo! Calendar " , url:  " http://calendar.yahoo.com "  },
                { text:  " Yahoo! Notepad " ,  url:  " http://notepad.yahoo.com "  }

            ]);

        oMenu.render( " rendertarget " );
        oMenu.show();
    
    });
    
</ script >


</ body >
</ html >

 

Menu的配置

在构造Menu或者增加item的时候,都可以加入一些配置选项,如下.完整的配置选项请参考api.

YAHOO.util.Event.onDOMReady( function  () {


     var  oMenu  =   new  YAHOO.widget.Menu( " mymenu " , { visible:  true  });


    oMenu.addItems([
        { text:  " Menu Item One " , disabled:  true  }, 
        { text:  " Menu Item Two " , checked:  true  }
        ]);
    
    oMenu.render(document.body);

});

在初始化之后,Menu和每个Item都保留有一个cfg对象.该对象保留着配置信息,可以通过getProperty和setProperty方法取得.如下:

YAHOO.util.Event.onDOMReady( function  () {


     var  oMenu  =   new  YAHOO.widget.Menu( " mymenu " , { visible:  true  });
    
    oMenu.addItems([
        { text:  " Menu Item One " , disabled:  true  }, 
        { text:  " Menu Item Two " , checked:  true  }
        ]);
    
    oMenu.render(document.body);
    
    alert(oMenu.getItem( 0 ).cfg.getProperty( " text " ));     //  alerts "Menu Item One"
    
    oMenu.getItem( 0 ).cfg.setProperty( " disabled " ,  false );
    alert(oMenu.cfg.getProperty( " visible " ));   //  alerts "true"    
    
    oMenu.cfg.setProperty( " visible " ,  false );    
    alert(oMenu.cfg.getProperty( " visible " ));   //  alerts "false"
    
});

Menu的事件

以下例子展示了如何改写show和hide方法,这两个方法继承自Module组件.在方法的参数p_aArgs中,第一个参数是event对象,第二个参数是MenuItem本身.

YAHOO.util.Event.onDOMReady( function  () {
            
     //  Create a new Menu instance
    
     var  oMenu  =   new  YAHOO.widget.Menu( " mymenu " );
    
    oMenu.addItems([ " Menu Item 1 " ,  " Menu Item 2 " ,  " Menu Item 3 " ]);
    
    
     //  Define a handler for the "show" event
    
     function  onShow(p_sType, p_aArgs) {  
    
        alert( this .id  +   "  is now visible " );
    
    }
    
     //  Define a handler for the "hide" event
    
     function  onHide(p_sType, p_aArgs) {  
    
        alert( this .id  +   "  is now hidden " );
    
    }
    
     //  Subscribe to the "show" and "hide" events
    
    oMenu.subscribe( " show " , onShow);
    oMenu.subscribe( " hide " , onHide);
    
    oMenu.render(document.body);   
   

    function onClick(p_sType, p_aArgs) {  

        var oEvent = p_aArgs[0],    // DOM Event
            oMenuItem = p_aArgs[1]; // YAHOO.widget.MenuItem instance


        // Alert the type of the DOM event

        alert(oEvent.type);


        // If a MenuItem was clicked, alert the value of its text label

        if (oMenuItem) {

            alert(oMenuItem.cfg.getProperty("text"));

        }

    }


    // Subscribe to the "click" event

    oMenu.subscribe("click", onClick);
    oMenu.show();

});