YUI Menubar and diolog problems

lordzardeck · January 22, 2009

Hey, i don't know if anyone here uses the yui library, but if anyone does i was wondering if they could help. I'm trying to make a menu bar and then, when a option is selected in the menu, have it open either a dialog or panel. But for some reason I can't get it to work. Here is my code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
error_reporting(E_ALL);
ini_set('diplay_errors', 'On');?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Combo-handled YUI CSS files: -->
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<!-- OPTIONAL: Animation (only required if using ContainerEffect) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
<!-- OPTIONAL: Connection (only required if using Dialog/SimpleDialog) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
<!-- OPTIONAL: Drag & Drop (only required if enabling Drag & Drop for Panel/Dialog/SimpleDialog) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
<!-- OPTIONAL: YUI Button (only required if using Dialog/SimpleDialog with YUI Buttons) -->
<!--
     You only need to include element and button if you're using Dialog or SimpleDialog
     and want the Dialog or SimpleDialog to use YUI Buttons, instead of HTML Buttons
-->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script>
<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container_core-min.js"></script>
<!-- <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script> -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/menu/menu-min.js"></script>
<!-- Sam Skin CSS -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/container/assets/skins/sam/container.css">
<!-- OPTIONAL: You only need the YUI Button CSS if you're including the Button script fille, mentioned above. -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/button/assets/skins/sam/button.css">
<!-- Fonts CSS - Recommended but not required -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css">
<!-- Core + Skin CSS -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/menu/assets/skins/sam/menu.css">
<script>

		YAHOO.util.Event.onDOMReady(function () {

    var aItemData = [

	{ text: "SAC Catalog"},

        { text: "System", submenu: {  id: "systemmenu", itemdata: [

	[
                { text: "Register Admin", onclick: { fn:login.show()} },
                "Edit Admin",
			"Delete Admin"
	],
	[
                { text: "Logout" }
	]

            ] }
        
        },
        
        { text: "Catalog", submenu: { id: "catalogmenu", itemdata: [

                [ 
                    { text: "View Catalog"}
                ],
                
                [
                    { text: "Add Book"},
                    { text: "Edit Book"},
                    { text: "Delete Book"}
                ],

                [
                    { text: "Check Out Book"},
                    { text: "Check In Book"}
                ]
        
            ] }

        }

    ];


    // Instantiate a MenuBar, passing in the id of the element to be created

    var oMenuBar = new YAHOO.widget.MenuBar("mymenubar");
    

    // Add items to the MenuBar instance
    
    oMenuBar.addItems(aItemData);


    // Render the MenuBar instance
    
    oMenuBar.render(document.body);
oMenuBar.show();

    
var catalog, login;
catalog = new YAHOO.widget.Panel("content_catalog", 
				{ 
					close:false,  
					visible:false,  
					draggable:false,
					x: 5,
					y: 5
				} 
			); 
catalog.render();
login = new YAHOO.widget.Panel("login", 
				{ 
					close:true,    
					draggable:true,
					modal:true,
					fixedcenter: true, 
					constraintoviewport: true,
					x: 300,
					y: 250
				} 
			); 
login.render();
login.show();
login.hide();
    }); 
</script>  
<title>Starting page</title>
</head>
<body class="yui-skin-sam">
<div id="mymenubar"></div>
<div id="login">
  <form action="" method="POST" name="loginform">
  <div class="hd">Please Login Below:</div>
  <div class="bd">Email: <input name="username" id="username" type="text" /></div>  
  <div class="bd">Password: <input name="password" id="password" type="text" /></div>
  <div class="ft" align="center"><input name="Login" id="submit" type="submit" value="Login" /></div>
  </form>
</div>
</body>
</html>

Thanks in advance for any help.

Sign In

YUI Menubar and diolog problems

Recommended Posts

lordzardeck

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information