实战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.
组成关系图如下
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 >
< 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 >
< 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 >
< 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);
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 >
< 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 >
< 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);
});
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"
});
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 的 Menu 组件 博客分类： YUI yui
-
了解YUI【二】(转) 博客分类： YUI yuiJavaScript
-
YAHOO工具库（YUI）中文版的哦 博客分类： YUI yui
-
雅虎 YUI 介绍 博客分类： Javascript javascriptyui
-
YUI学习笔记1 博客分类： JS yuijs
-
使用YUI Compressor压缩JS和CSS文件 博客分类： phonegap yuicssjavascript
-
《YUI 3 Cookbook 中文版》 博客分类： YUIjavascripthtmlcss YUI
-
对YUI扩展的Gird组件 Part-1_YUI.Ext相关
-
对YUI扩展的Gird组件 Part-1_YUI.Ext相关