`
宋双旺
  • 浏览: 153015 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

实战YUI 的 Menu 组件

    博客分类：
  • YUI
yui 
阅读更多

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();

});

分享到：
| 【转】小议swfupload的bug及解决之道
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    YUI3 dialog组件

    基于YUI3的dialog组件该组件是基于YUI3开发的，功能强大，详细见http://www.qiqicartoon.com

    【YUI组件】基于YUI的表单验证器

    NULL 博文链接：https://every-best.iteye.com/blog/750967

    Yahoo YUI 插件库

    非常有用的YUI插件，包括所有的Yahoo YUI插件库。

    YUI 入门教程YUI 入门教程YUI 入门教程

    YUI教程YUI 入门教程YUI 入门教程YUI 入门教程

    雅虎YUI组建

    雅虎YUI组件，内附详细实例

    雅虎 用户接口库YUI

    Yui组件分成2类：工具包和控件库 Yui 工具包 Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。 动画（Animation）：在你的页面中通过指定位置，...

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    yui_2.9.0前端UI

    YUI 库，全称Yahoo! UI Library。是一组工具和控件，用JavaScript写成, 为的是用DOM 脚本，DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议，对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...

    yui3-master.zip

    yui3-master.zip

    yuitest YUI测试工具

    YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as ...

    yui_2.6.0r2

    yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2

    js 压缩YUI

    雅虎的东西,简单的操作很好用 使用例子:java -jar D:\yuicompressor\yuicompressor\yuicompressor.jar E:\js\all.js -o E:\wap\wap2\js\all-min.js --charset utf-8 当然要装jdk了 不然就玩完了

    yui 资源包

    yui 源码下载，3.9.0 r2 包，最新版本

    yuicompressor，给YUI Compressor添加右键命令

    YUI Compressor非常好用，特别是JS的混淆是众多JS Coding的最爱。可惜官网提供的版本都不具备右键功能，每次压缩都要cmd输入一些命令实在是繁琐，本文就介绍如何给YUI Compressor添加右键命令，方便使用。 网上已有...

    从YUI2到YUI3看前端的演变 pdf

    YUI3 引入了粒度更细的模块管理方式，通过异步 HTTP 请求加载模块、然后执行...YUI是个“学院派”的框架，以性能和严谨著称，易用性相对而言弱了一些。它能否在已经拉开的 JavaScript 框架大战中胜出，让我们拭目以待。

    从YUI2到YUI3看前端的演变

    从YUI2到YUI3看前端的演变

    YUI中文文档CHM

    YAHOO YUI 中文文档 AJAX 详细 比较好用

    yui压缩

    yui压缩

    yahoo yui 实例教程

    利用Yahoo YUI库做的一个TREE实例,很详细的阐述了YUI的使用原理

    YUI-ajax框架开发文档

    yui框架集，内含多个demo，yui框架将ajax完美的包装，以及包含基于ajax的各种js组件，让开发人员可以缩短开发时间。

Magicbox
Global site tag (gtag.js) - Google Analytics