所以我正在尝试学习YUI工具包,而且我的菜单栏有可用的子菜单问题。如果我使用以下代码:
<html>
<head>
<title>Web</title>
<!-- Yahoo UI -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css&2.8.0r4/build/base/base-min.css&2.8.0r4/build/assets/skins/sam/skin.css">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/autocomplete/autocomplete-min.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/menu/menu-min.js&2.8.0r4/build/button/button-min.js&2.8.0r4/build/calendar/calendar-min.js&2.8.0r4/build/carousel/carousel-min.js&2.8.0r4/build/json/json-min.js&2.8.0r4/build/swf/swf-min.js&2.8.0r4/build/charts/charts-min.js&2.8.0r4/build/slider/slider-min.js&2.8.0r4/build/colorpicker/colorpicker-min.js&2.8.0r4/build/cookie/cookie-min.js&2.8.0r4/build/paginator/paginator-min.js&2.8.0r4/build/datatable/datatable-min.js&2.8.0r4/build/datemath/datemath-min.js&2.8.0r4/build/editor/editor-min.js&2.8.0r4/build/element-delegate/element-delegate-min.js&2.8.0r4/build/selector/selector-min.js&2.8.0r4/build/event-delegate/event-delegate-min.js&2.8.0r4/build/event-mouseenter/event-mouseenter-min.js&2.8.0r4/build/event-simulate/event-simulate-min.js&2.8.0r4/build/history/history-min.js&2.8.0r4/build/resize/resize-min.js&2.8.0r4/build/imagecropper/imagecropper-min.js&2.8.0r4/build/imageloader/imageloader-min.js&2.8.0r4/build/layout/layout-min.js&2.8.0r4/build/logger/logger-min.js&2.8.0r4/build/progressbar/progressbar-min.js&2.8.0r4/build/swfstore/swfstore-min.js&2.8.0r4/build/storage/storage-min.js&2.8.0r4/build/stylesheet/stylesheet-min.js&2.8.0r4/build/tabview/tabview-min.js&2.8.0r4/build/treeview/treeview-min.js&2.8.0r4/build/uploader/uploader-min.js"></script>
<!-- Google Gears -->
<script type="text/javascript" src="js/gears_init.js"></script>
<script type="text/javascript" src="mainpanel.js"></script>
<style type="text/css">
.yuimenubaritemlabel {
margin: 0px;
padding: 2px;
}
</style>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function() {
makePanel();
});
</script>
</head>
<body class="yui-skin-sam"></body>
</html>
使用以下javascript:
function makePanel() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event,
MenuBarItem = YAHOO.widget.MenuBarItem;
var body = document.body;
var divNames = ['top1', 'bottom1', 'left1', 'right1', 'center1'];
for ( var i in divNames ) {
var div = document.createElement('div');
div.id = divNames[i];
div.style.border = 0;
body.appendChild(div);
}
var topDiv = document.getElementById('top1');
var layout = new YAHOO.widget.Layout({
units: [
{ position: 'top', height: 25, body: 'top1' },
{ position: 'right', header: 'Right', width: 300, resize: true, collapse: true, scroll: true, body: 'right1', animate: true},
{ position: 'bottom', height: 20, body: 'bottom1' },
{ position: 'left', header: 'Left', width: 200, body: 'left1', collapse:true},
{ position: 'center', body: 'center1'}
]
});
layout.render(document.body);
var menuData = [
{ text: "File", },
{ text: "Help", }
];
var menuBar = new YAHOO.widget.MenuBar("menubar", {
hidedelay: 750, autosubmenudisplay: true,
lazyload: true,
itemdata: menuData,
effect: {
effect: YAHOO.widget.ContainerEffect.FADE,
duration: 0.25
}
});
/*var fileMenu = menuBar.getItem(0);
if ( fileMenu != null ) {
fileMenu.addItem({ text: "Log off", id: "logoff", onclick: { fn: onLogoff } });
}*/
menuBar.render( document.getElementById('top1') );
};
我无法使用任何一种语法来使用子菜单:
var menuData = [
{text: "File",
itemdata: [ "New", "Open", "Close" ] }
{text: "Help"
itemdata: [ "Welcome", "About" ] }
];
或
var menuData = [
{ text: "File",
submenu: {
id: "filemenu",
itemdata: [ "New", "Open", "Close" ] }
} ];
关于我哪里出错的任何想法?我正在使用YUI 2.0。
答案 0 :(得分:1)
对于将来可能会找到此页面的任何人,可以在此处找到有关如何在YUI布局中使用MenuBar模块的说明:
http://developer.yahoo.com/yui/examples/layout/menu_layout.html
来自Dav Glass @ YUI论坛的链接。
答案 1 :(得分:0)
只是想建议你在YUILibrary论坛上发帖 - http://yuilibrary.com/forum/(具体在这里:http://yuilibrary.com/forum/viewforum.php?f=89)。这是在Todd(编写Menu)和其他每天使用YUI的人面前获得它的最佳位置。
此致 埃里克