My menu doesn't display as a menu

Discussion in 'JavaScript' started by rfresh, Jul 16, 2008.

0
  1. #1
    I'm trying to learn how to create menus using dojo - my sample menu script runs fine in Firefox 3 with no errors but the menu displays as regular text on a page (all of the menu selections are shown) instead of in a menu structure where I can select each menu item. My code is below - does anyone know why my menu structure does not display like a menu?

    Thanks...

    
<html>
<head>
<title>Menu Demo</title>
<script type="text/javascript" src="../js/dojo/dojo.js"></script>
  <style type="text/css">
      @import "../resources/dojo.css";
      @import "../dijit/themes/tundra/tundra.css";
      
  </style>
    <script type="text/javascript" src="dojo.xd.js" 
   djConfig="parseOnLoad: true"></script>

  <script type="text/javascript">
       dojo.require("dojo.parser");
     dojo.require("dijit.form.Button");
       dojo.require("dijit.Menu");
     function call_function(choice) {
              alert(choice+" was clicked.");
        }
    function save_function() {
              alert("Save Button");
        }
        function save_as_function(choice) {
             alert("Save As Button");
        }
     </script>
</head>
<body class="tundra">
<b>Creating DropDownButtons</b><br>
<div dojoType="dijit.form.ComboButton" onclick="save_function">
    <span>File</span>
            <div dojoType="dijit.Menu" id="saveMenu" 
   toggle="fade" style="display: none;">
                <div dojoType="dijit.MenuItem"
                     iconClass="dijitEditorIcon dijitEditorIconSave" 
    onclick="save_function">
                    Save
                </div>
                <div dojoType="dijit.MenuItem" onclick="save_as_function">
                    Save As
                </div>
            </div>
        </div>
<div dojoType="dijit.form.DropDownButton">
            <span>Edit</span>
            <div dojoType="dijit.Menu" id="Edit">
                <div dojoType="dijit.MenuItem" label="Copy"
                        onclick="call_function('copy');"></div>
                <div dojoType="dijit.MenuItem" label="Cut" 
                        onclick="call_function('cut');"></div>
                <div dojoType="dijit.MenuItem" label="Paste"
                        onclick="call_function('paste');"></div>
            </div>
        </div>

  
<br><br><br><br><br><br>  
<h1>Submenu</h1>
        <style>
        .myIcon {
           background-image:
              url(http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/images/checkmark.gif);
           background-position: -16px 0px;
           width: 16px;
           height: 16px;
        }
        </style>
       
        <div dojoType="dijit.Menu" id="submenu1"
                 contextMenuForWindow="true">
                <div dojoType="dijit.MenuItem" iconClass="myIcon"
                     onClick="alert('Hello world');">Enabled Item</div>
                <div dojoType="dijit.PopupMenuItem" id="submenu2">
                    <span>Submenu</span>
                    <div dojoType="dijit.Menu">
                                <div dojoType="dijit.MenuItem"
                                     onClick="alert('Submenu 1!')">
Submenu Item One</div>
                                <div dojoType="dijit.MenuItem"
                                     onClick="alert('Submenu 2!')">
Submenu Item Two</div>
                    </div>
                </div>
        </div>
</body>
</html>
    PHP:
     
    rfresh, Jul 16, 2008 IP