YUI MenuBar ne montrant pas les sous-menus

Donc j'essaie d'apprendre la boîte à outils YUI, et j'ai des problèmes avec ma barre de menus ayant des sous-menus utilisables. Si j'utilise le code suivant:YUI MenuBar ne montrant pas les sous-menus

<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>

Avec le javascript suivant:

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

};

Je ne peux pas travailler du sous-menu, en utilisant la syntaxe:

var menuData = [ 
     {text: "File", 
     itemdata: [ "New", "Open", "Close" ] } 
     {text: "Help" 
     itemdata: [ "Welcome", "About" ] } 
    ];

var menuData = [ 
     { text: "File", 
      submenu: { 
       id: "filemenu", 
        itemdata: [ "New", "Open", "Close" ] } 
     } ];

Toutes les idées sur où je suis goi mal? J'utilise YUI 2.0.

Source

2010-01-26 Chris K

Salut, Chris. C'est bon de voir un vieux collègue sur les interwebs.

Je voulais juste suggérer que vous postez cela sur les forums YUILibrary - http://yuilibrary.com/forum/ (spécifiquement ici: http://yuilibrary.com/forum/viewforum.php?f=89). C'est le meilleur endroit pour l'obtenir en face de Todd (qui a écrit Menu) et d'autres qui utilisent YUI tous les jours.

Cordialement, Eric

Source

2010-01-26 06:47:00

Ouais, ça allait être ma prochaine étape ... Je suis tellement habitué aux très bonnes réponses de StackOverflow que c'est mon premier arrêt de nos jours. Merci pour le conseil! –

Pour tous ceux qui pourraient trouver cette page à l'avenir, des instructions sur la façon d'utiliser le module MenuBar dans une mise en page YUI se trouvent ici:

http://developer.yahoo.com/yui/examples/layout/menu_layout.html

Lien de Dav Glass @ les forums YUI.

Source

2010-02-01 21:28:40 Josh

Excellent lien, mais si vous regardez à la fois ce lien, et ma version très condensée, vous verrez que la seule chose que je fais différemment est le div1 dynamique, center1, etc ' Qu'est-ce que je fais de mal de sorte que je puisse obtenir un menu, mais pas de sous-menus? –

YUI MenuBar ne montrant pas les sous-menus

Répondre

Questions connexes