4f68a0933c
fixed the resizable text area with IE problem fixed the ad space with IE problem merged the 7.2.0 and 7.1.4 change logs
434 lines
No EOL
14 KiB
HTML
434 lines
No EOL
14 KiB
HTML
<!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> |