欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

实战YUI 的 Menu 组件 博客分类: YUI yui 

程序员文章站 2024-02-06 20:17:04
...

Menu家族成员

YAHOO.widget.Menu

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

YAHOO.widget.ContextMenu

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

YAHOO.widget.MenuBar

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

组成关系图如下

实战YUI 的 Menu 组件
            
    
    博客分类: YUI yui 


Menu 和 MenuItem 的关系图如下

实战YUI 的 Menu 组件
            
    
    博客分类: YUI yui 

每个MenuItem 又可以是一个Menu,这叫做 sub menu item.
实战YUI 的 Menu 组件
            
    
    博客分类: YUI yui 

开始

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

<!--  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" >
                
< class ="yuimenuitemlabel"  href ="http://mail.yahoo.com" >
                    Yahoo! Mail
                
</ a >
            
</ li >
            
< li  class ="yuimenuitem" >
                
< class ="yuimenuitemlabel"  href ="http://addressbook.yahoo.com" >
                    Yahoo! Address Book
                
</ a >
            
</ li >
            
< li  class ="yuimenuitem" >
                
< class ="yuimenuitemlabel"  href ="http://calendar.yahoo.com" >
                    Yahoo! Calendar
                
</ a >
            
</ li >
            
< li  class ="yuimenuitem" >
                
< 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" >
            
                
< class ="yuimenuitemlabel"  href ="#communication" >
                    Communication
                
</ a >

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

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

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

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

            
            
</ li >
            
< li  class ="yuimenuitem" >
            
                
< 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" >
            
                
< 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" >
            
                
< 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();

});

相关标签: yui