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
194 lines
No EOL
6.5 KiB
HTML
194 lines
No EOL
6.5 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>Example 10: Listening For DOM-Related Events</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">
|
|
|
|
<!-- Logger CSS -->
|
|
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">
|
|
|
|
<!-- CSS for Menu -->
|
|
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
|
|
|
<!-- Page-specific styles -->
|
|
<style type="text/css">
|
|
|
|
body { margin:.5em; }
|
|
|
|
p em {
|
|
|
|
text-decoration:underline;
|
|
|
|
}
|
|
|
|
#logs {
|
|
|
|
position:absolute;
|
|
bottom:0;
|
|
right:0;
|
|
|
|
}
|
|
|
|
.example10 {
|
|
|
|
background-color:#9c9;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Logger source file -->
|
|
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
|
|
|
<!-- Container source file -->
|
|
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
|
|
|
<!-- Menu source file -->
|
|
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
|
|
|
<!-- Page-specific script -->
|
|
<script type="text/javascript">
|
|
|
|
// "load" event handler for the window
|
|
|
|
YAHOO.example.onWindowLoad = function(p_oEvent) {
|
|
|
|
// Generic event handler for the Menu instance's DOM-related events
|
|
|
|
function onMenuEvent(p_sType, p_aArguments) {
|
|
|
|
var oDOMEvent = p_aArguments[0];
|
|
|
|
YAHOO.log(
|
|
(
|
|
"Id: " + this.id + ", " +
|
|
"Custom Event Type: " + p_sType + ", " +
|
|
"DOM Event Type: " + oDOMEvent.type
|
|
),
|
|
"info",
|
|
"example10"
|
|
);
|
|
}
|
|
|
|
|
|
/*
|
|
Generic event handler for each MenuItem instance's
|
|
DOM-related events
|
|
*/
|
|
|
|
function onMenuItemEvent(p_sType, p_aArguments) {
|
|
|
|
var oDOMEvent = p_aArguments[0];
|
|
|
|
YAHOO.log(
|
|
(
|
|
"Index: " + this.index + ", " +
|
|
"Group Index: " + this.groupIndex + ", " +
|
|
"Custom Event Type: " + p_sType + ", " +
|
|
"DOM Event Type: " + oDOMEvent.type
|
|
),
|
|
"info",
|
|
"example10"
|
|
);
|
|
|
|
}
|
|
|
|
|
|
// Create a menu
|
|
|
|
var oMenu = new YAHOO.widget.Menu("basicmenu"),
|
|
|
|
// Create the MenuItem instances and add them to the menu
|
|
|
|
aMenuItemData = [
|
|
|
|
"MenuItem 0",
|
|
"MenuItem 1",
|
|
"MenuItem 2",
|
|
"MenuItem 3",
|
|
"MenuItem 4"
|
|
|
|
],
|
|
|
|
nMenuItems = aMenuItemData.length,
|
|
|
|
oMenuItem;
|
|
|
|
|
|
|
|
for(var i=0; i<nMenuItems; i++) {
|
|
|
|
oMenuItem = oMenu.addItem(aMenuItemData[i]);
|
|
|
|
oMenuItem.mouseOverEvent.subscribe(onMenuItemEvent);
|
|
oMenuItem.mouseOutEvent.subscribe(onMenuItemEvent);
|
|
oMenuItem.mouseDownEvent.subscribe(onMenuItemEvent);
|
|
oMenuItem.mouseUpEvent.subscribe(onMenuItemEvent);
|
|
oMenuItem.clickEvent.subscribe(onMenuItemEvent);
|
|
oMenuItem.keyDownEvent.subscribe(onMenuItemEvent);
|
|
oMenuItem.keyUpEvent.subscribe(onMenuItemEvent);
|
|
oMenuItem.keyPressEvent.subscribe(onMenuItemEvent);
|
|
|
|
}
|
|
|
|
oMenu.render(document.body);
|
|
|
|
oMenu.show();
|
|
|
|
|
|
// Focus the first MenuItem instance
|
|
|
|
oMenu.getItem(0).focus();
|
|
|
|
|
|
// Disable the third MenuItem instance
|
|
|
|
oMenu.getItem(2).cfg.setProperty("disabled", true);
|
|
|
|
|
|
// Subscribe to the menu's DOM-related events
|
|
|
|
oMenu.mouseOverEvent.subscribe(onMenuEvent);
|
|
oMenu.mouseOutEvent.subscribe(onMenuEvent);
|
|
oMenu.mouseDownEvent.subscribe(onMenuEvent);
|
|
oMenu.mouseUpEvent.subscribe(onMenuEvent);
|
|
oMenu.clickEvent.subscribe(onMenuEvent);
|
|
oMenu.keyDownEvent.subscribe(onMenuEvent);
|
|
oMenu.keyUpEvent.subscribe(onMenuEvent);
|
|
oMenu.keyPressEvent.subscribe(onMenuEvent);
|
|
|
|
|
|
var oLogs = document.createElement("div");
|
|
oLogs.id = "logs";
|
|
|
|
document.body.appendChild(oLogs);
|
|
|
|
var oLogReader = new YAHOO.widget.LogReader("logs");
|
|
|
|
}
|
|
|
|
|
|
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Example 10: Listening For DOM-Related Events <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
|
<p>This example demonstrates how to listen for DOM-related events. Interaction with the Menu will result in event information being output to the console. <em>Please note</em>: Disabled MenuItem instances do not fire DOM events. This is demonstrated with the MenuItem named "MenuItem 2."</p>
|
|
|
|
</body>
|
|
</html> |