Application Menubar Example : Menu « GUI Components « JavaScript DHTML
Application Menubar Example
<!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>Application Menubar Example</title>
<!-- Standard reset and fonts -->
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
body {
background-color:#dfb8df;
}
/* Define a new style for each menubar */
div.yuimenubar {
border-width:1px 0;
border-color:#666;
border-style:solid;
background-color:#ccc;
}
div.yuimenubar div.bd {
border-width:1px 0;
border-color:#ddd;
border-style:solid;
}
div.yuimenubar li.yuimenubaritem {
border-width:0;
border-style:none;
padding:4px 12px;
}
div.yuimenubar li.yuimenubaritem img {
margin:0;
border:0;
height:1px;
width:1px;
}
/* Define a new style for each menu */
div.yuimenu {
border:solid 1px #666;
background-color:#ccc;
}
div.yuimenu div.bd {
border-width:0;
border-style:none;
}
/* Define a new style for each menu item */
div.yuimenu li.yuimenuitem {
padding-top:4px;
padding-bottom:4px;
}
div.yuimenu li.yuimenuitem img {
height:8px;
width:8px;
margin:0 -16px 0 10px;
border:0;
}
div.yuimenu ul {
border:solid 1px #666;
border-width:1px 0 0 0;
}
/* Define a new style for an item's "selected" state */
div.yuimenu li.selected,
div.yuimenubar li.selected {
background-color:#039;
}
div.yuimenu li.selected a.selected,
div.yuimenubar li.selected a.selected {
text-decoration:none;
}
/* Define a new style for an item's "disabled" state */
div.yuimenu li.disabled a.disabled,
div.yuimenu li.disabled em.disabled,
div.yuimenubar li.disabled a.disabled {
color:#666;
}
</style>
</head>
<body>
<!-- Namespace source file -->
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<!-- Dependency source files -->
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="./build/animation/animation.js"></script>
<!-- Container source file -->
<script type="text/javascript" src="./build/container/container.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="./build/menu/menu.js"></script>
<!-- Page-specific script -->
<script type="text/javascript">
/**
* Constant representing the path to the image to be used for the
* submenu arrow indicator.
* @final
* @type String
*/
YAHOO.widget.MenuBarItem.prototype.SUBMENU_INDICATOR_IMAGE_PATH =
"promo/m/irs/blank.gif";
/**
* Constant representing the path to the image to be used for the
* submenu arrow indicator when a MenuBarItem instance is selected.
* @final
* @type String
*/
YAHOO.widget.MenuBarItem.prototype.SELECTED_SUBMENU_INDICATOR_IMAGE_PATH =
"promo/m/irs/blank.gif";
/**
* Constant representing the path to the image to be used for the
* submenu arrow indicator when a MenuBarItem instance is disabled.
* @final
* @type String
*/
YAHOO.widget.MenuBarItem.prototype.DISABLED_SUBMENU_INDICATOR_IMAGE_PATH =
"promo/m/irs/blank.gif";
// "load" event handler for the window
YAHOO.example.onWindowLoad = function(p_oEvent) {
// "click" event handler for each item in the root MenuBar instance
function onMenuBarItemClick(p_sType, p_aArguments) {
this.parent.hasFocus = true;
var oActiveItem = this.parent.activeItem;
// Hide any other submenus that might be visible
if(oActiveItem && oActiveItem != this) {
this.parent.clearActiveItem();
}
// Select and focus the current MenuItem instance
this.cfg.setProperty("selected", true);
this.focus();
// Show the submenu for this instance
var oSubmenu = this.cfg.getProperty("submenu");
if(oSubmenu) {
if(oSubmenu.cfg.getProperty("visible")) {
oSubmenu.hide();
}
else {
oSubmenu.show();
}
}
}
// "mouseover" event handler for each item in the root MenuBar instance
function onMenuBarItemMouseOver(p_sType, p_aArguments) {
var oActiveItem = this.parent.activeItem;
// Hide any other submenus that might be visible
if(oActiveItem && oActiveItem != this) {
this.parent.clearActiveItem();
}
// Select and focus the current MenuItem instance
this.cfg.setProperty("selected", true);
this.focus();
if(this.parent.hasFocus) {
// Show the submenu for this instance
var oSubmenu = this.cfg.getProperty("submenu");
if(oSubmenu) {
if(oSubmenu.cfg.getProperty("visible")) {
oSubmenu.hide();
}
else {
oSubmenu.show();
}
}
}
}
var oApplicationsMenu = new YAHOO.widget.Menu("applications");
oApplicationsMenu.addItem("Application 1");
oApplicationsMenu.addItem("Application 2");
oApplicationsMenu.addItem("Application 3");
oApplicationsMenu.addItem("Application 3");
var oFileMenu = new YAHOO.widget.Menu("filemenu", { zIndex:2 });
oFileMenu.addItem(new YAHOO.widget.MenuItem("New File", { helptext: "Ctrl + N" } ));
oFileMenu.addItem("New Folder");
oFileMenu.addItem(new YAHOO.widget.MenuItem("Open", { helptext: "Ctrl + O" }));
oFileMenu.addItem(new YAHOO.widget.MenuItem("Open With...", { submenu: oApplicationsMenu }));
oFileMenu.addItem(new YAHOO.widget.MenuItem("Print", { helptext: "Ctrl + P" }));
var oEditMenu = new YAHOO.widget.Menu("edit", { zIndex:2 });
oEditMenu.addItem(new YAHOO.widget.MenuItem("Undo", { helptext: "Ctrl + Z" }));
oEditMenu.addItem(new YAHOO.widget.MenuItem("Redo", { helptext: "Ctrl + Y", disabled: true }));
oEditMenu.addItem(new YAHOO.widget.MenuItem("Cut", { helptext: "Ctrl + X", disabled: true }), 1);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Copy", { helptext: "Ctrl + C", disabled: true }), 1);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Paste", { helptext: "Ctrl + V" }), 1);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Delete", { helptext: "Del", disabled: true }), 1);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Select All", { helptext: "Ctrl + A" }), 2);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Find", { helptext: "Ctrl + F" }), 3);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Find Again", { helptext: "Ctrl + G" }), 3);
var oMenuBar = new YAHOO.widget.MenuBar("menubar");
oMenuBar.addItem(new YAHOO.widget.MenuBarItem("File", { submenu: oFileMenu }));
oMenuBar.addItem(new YAHOO.widget.MenuBarItem("Edit", { submenu: oEditMenu }));
oMenuBar.addItem("View");
oMenuBar.addItem("Favorites");
oMenuBar.addItem("Tools");
oMenuBar.addItem("Tools");
oMenuBar.addItem("Help");
oMenuBar.addItem(new YAHOO.widget.MenuBarItem("Examples Home", { url: "index.html" }));
// Render the MenuBar instance and corresponding submenus
oMenuBar.render(document.body);
/*
Add a "click" and "mouseover" event handler to each item
in the root MenuBar instnace
*/
var i = oMenuBar.getItemGroups()[0].length - 1,
oMenuBarItem;
do {
oMenuBarItem = oMenuBar.getItem(i);
if(oMenuBarItem) {
oMenuBarItem.clickEvent.subscribe(
onMenuBarItemClick,
oMenuBarItem,
true
);
oMenuBarItem.mouseOverEvent.subscribe(
onMenuBarItemMouseOver,
oMenuBarItem,
true
);
}
}
while(i--);
// "click" event handler for the document
function onDocumentClick(p_oEvent) {
var oTarget = YAHOO.util.Event.getTarget(p_oEvent);
if(
oTarget != oMenuBar.element &&
!YAHOO.util.Dom.isAncestor(oMenuBar.element, oTarget)
) {
oMenuBar.hasFocus = false;
if(oMenuBar.activeItem) {
var oSubmenu = oMenuBar.activeItem.cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.hide();
}
oMenuBar.clearActiveItem();
oMenuBar.activeItem.blur();
}
}
}
// Add a "click" handler for the document
YAHOO.util.Event.addListener(
document,
"click",
onDocumentClick
);
var oPanel = new YAHOO.widget.SimpleDialog(
"exampleinfo",
{
constraintoviewport: true,
fixedcenter:true,
width:"400px",
zIndex:1
}
);
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menubar using nothing by JavaScript.");
oPanel.render(document.body);
oPanel.show();
}
// Add a "load" handler for the window
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</body>
</html>
yui.zip( 3,714 k)