oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui/docs/menu/overview-summary-menuitem.js.html
JT Smith 4f68a0933c added YUI and YUI-ext 
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
2006-11-07 23:15:57 +00:00

847 lines
27 KiB
HTML
Raw Blame History

<html>
<head>
<title>JavaScript Documentation - menuitem.js</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1>JavaScript Documentation</h1>
<h3><a href="./index.html">Yahoo! Menuing Library</a></h3>
<div class="breadcrumbs">
<a href="./index.html">Yahoo! Menuing Library</a>
&gt;
<strong>menuitem.js</strong>
</div>
</div>
<div id="body">
<div class="nav">
<div class="module resources">
<ul class="content">
<li><a href="overview-tree.html">Tree View</a></li>
<li><a href="index-all.html">Element Index</a></li>
</ul>
</div>
<div class="module">
<h4><a href="./allclasses-noframe.html">Classes</a></h4>
<ul class="content">
<li>
<a href="YAHOO.widget.ContextMenu.html">
YAHOO.widget.ContextMenu</a>
</li>
<li>
<a href="YAHOO.widget.ContextMenuItem.html">
YAHOO.widget.ContextMenuItem</a>
</li>
<li>
<a href="YAHOO.widget.Menu.html">
YAHOO.widget.Menu</a>
</li>
<li>
<a href="YAHOO.widget.MenuBar.html">
YAHOO.widget.MenuBar</a>
</li>
<li>
<a href="YAHOO.widget.MenuBarItem.html">
YAHOO.widget.MenuBarItem</a>
</li>
<li>
<a href="YAHOO.widget.MenuItem.html">
YAHOO.widget.MenuItem</a>
</li>
<li>
<a href="YAHOO.widget.MenuModule.html">
YAHOO.widget.MenuModule</a>
</li>
<li>
<a href="YAHOO.widget.MenuModuleItem.html">
YAHOO.widget.MenuModuleItem</a>
</li>
</ul>
</div>
<div class="module">
<h4><a href="./overview-summary.html">Files</a></h4>
<ul class="content">
<li>
<a href="overview-summary-contextmenu.js.html">
contextmenu.js</a>
</li>
<li>
<a href="overview-summary-contextmenuitem.js.html">
contextmenuitem.js</a>
</li>
<li>
<a href="overview-summary-menu.js.html">
menu.js</a>
</li>
<li>
<a href="overview-summary-menubar.js.html">
menubar.js</a>
</li>
<li>
<a href="overview-summary-menubaritem.js.html">
menubaritem.js</a>
</li>
<li>
<a href="overview-summary-menuitem.js.html">
menuitem.js</a>
</li>
<li>
<a href="overview-summary-menumodule.js.html">
menumodule.js</a>
</li>
<li>
<a href="overview-summary-menumoduleitem.js.html">
menumoduleitem.js</a>
</li>
</ul>
</div>
</div>
<div class="main">
<h2>menuitem.js</h2>
<div class="meta">
</div>
<div class="quick-links">
<strong>Quick Links:</strong>&nbsp;
<a href="#classSummary">Class Summary</a> |
<a href="#source">Source Code</a>
</div>
<div class="section class summaries">
<h3><a name="classSummary">Class Summary</a> <span class="top">[<a href="#top">top</a>]</span></h3>
<div class="content">
<table border="1" cellpadding="3" cellspacing="0">
<tr>
<td class="name">
<a href="YAHOO.widget.MenuItem.html">YAHOO.widget.MenuItem</a>
</td>
<td class="overview">The MenuItem class allows you to create and modify an item for a Menu instance.</td>
</tr>
</table>
</div>
</div>
<div class="section source">
<h3><a name="source">Souce Code</a> <span class="top">[<a href="#top">top</a>]</span></h3>
<pre class="sourceview">
<span class="comment">/**
* <span class="attrib">@class</span> The MenuItem class allows you to create and modify an item for a
* Menu instance. MenuItem extends YAHOO.widget.MenuModuleItem to provide a
* set of default mouse and key event behaviors.
* <span class="attrib">@constructor</span>
* <span class="attrib">@extends</span> YAHOO.widget.MenuModuleItem
* <span class="attrib">@base</span> YAHOO.widget.MenuModuleItem
* <span class="attrib">@param</span> {String or HTMLElement} p_oObject String or HTMLElement
* (either HTMLLIElement, HTMLOptGroupElement or HTMLOptionElement) of the
* source HTMLElement node.
* <span class="attrib">@param</span> {Object} p_oConfig The configuration object literal containing
* the configuration for a MenuItem instance. See the configuration
* class documentation for more details.
*/</span>
YAHOO.widget.MenuItem = <span class="reserved">function</span>(p_oObject, p_oConfig) {
YAHOO.widget.MenuItem.superclass.constructor.call(
<span class="reserved">this</span>,
p_oObject,
p_oConfig
);
};
YAHOO.extend(YAHOO.widget.MenuItem, YAHOO.widget.MenuModuleItem);
<span class="comment">/**
* The MenuItem class's initialization method. This method is automatically
* called by the constructor, and sets up all DOM references for
* pre-existing markup, and creates required markup if it is not
* already present.
* <span class="attrib">@param</span> {String or HTMLElement} p_oObject String or HTMLElement
* (either HTMLLIElement, HTMLOptGroupElement or HTMLOptionElement) of the
* source HTMLElement node.
* <span class="attrib">@param</span> {Object} p_oConfig The configuration object literal containing
* the configuration for a MenuItem instance. See the configuration
* class documentation for more details.
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>.init = <span class="reserved">function</span>(p_oObject, p_oConfig) {
<span class="reserved">if</span>(!<span class="reserved">this</span>.SUBMENU_TYPE) {
<span class="reserved">this</span>.SUBMENU_TYPE = YAHOO.widget.Menu;
}
<span class="reserved">if</span>(!<span class="reserved">this</span>.SUBMENU_ITEM_TYPE) {
<span class="reserved">this</span>.SUBMENU_ITEM_TYPE = YAHOO.widget.MenuItem;
}
<span class="comment">/*
Call the init of the superclass (YAHOO.widget.MenuModuleItem)
Note: We don't pass the user config in here yet
because we only want it executed once, at the lowest
subclass level.
*/</span>
YAHOO.widget.MenuItem.superclass.init.call(<span class="reserved">this</span>, p_oObject);
<span class="comment">
// Add event handlers to each "MenuItem" instance</span>
<span class="reserved">this</span>.keyDownEvent.subscribe(<span class="reserved">this</span>._onKeyDown, <span class="reserved">this</span>, true);
<span class="reserved">this</span>.mouseOverEvent.subscribe(<span class="reserved">this</span>._onMouseOver, <span class="reserved">this</span>, true);
<span class="reserved">this</span>.mouseOutEvent.subscribe(<span class="reserved">this</span>._onMouseOut, <span class="reserved">this</span>, true);
<span class="reserved">this</span>.clickEvent.subscribe(<span class="reserved">this</span>._onClick, <span class="reserved">this</span>, true);
var oConfig = <span class="reserved">this</span>.cfg;
<span class="reserved">if</span>(p_oConfig) {
oConfig.applyConfig(p_oConfig, true);
}
oConfig.fireQueue();
};
<span class="comment">
// Constants</span>
<span class="comment">/**
* Constant representing the path to the image to be used for the checked state.
* <span class="attrib">@final</span>
* <span class="attrib">@type</span> String
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>.CHECKED_IMAGE_PATH =
<span class="literal">"nt/ic/ut/bsc/menuchk8_nrm_1.gif"</span>;
<span class="comment">/**
* Constant representing the path to the image to be used for the selected
* checked state.
* <span class="attrib">@final</span>
* <span class="attrib">@type</span> String
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>.SELECTED_CHECKED_IMAGE_PATH =
<span class="literal">"nt/ic/ut/bsc/menuchk8_hov_1.gif"</span>;
<span class="comment">/**
* Constant representing the path to the image to be used for the disabled
* checked state.
* <span class="attrib">@final</span>
* <span class="attrib">@type</span> String
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>.DISABLED_CHECKED_IMAGE_PATH =
<span class="literal">"nt/ic/ut/bsc/menuchk8_dim_1.gif"</span>;
<span class="comment">/**
* Constant representing the alt text for the image to be used for the
* checked image.
* <span class="attrib">@final</span>
* <span class="attrib">@type</span> String
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>.CHECKED_IMAGE_ALT_TEXT = <span class="literal">"Checked."</span>;
<span class="comment">/**
* Constant representing the alt text for the image to be used for the
* checked image when the item is disabled.
* <span class="attrib">@final</span>
* <span class="attrib">@type</span> String
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>.DISABLED_CHECKED_IMAGE_ALT_TEXT =
<span class="literal">"Checked. (Item disabled.)"</span>;
<span class="comment">
// Private properties</span>
<span class="comment">/**
* Reference to the HTMLImageElement used to create the checked
* indicator for a MenuItem instance.
* <span class="attrib">@private</span>
* <span class="attrib">@type</span> {HTMLImageElement}
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>._checkImage = null;
<span class="comment">
// Private event handlers</span>
<span class="comment">/**
* "keydown" Custom Event handler for a MenuItem instance.
* <span class="attrib">@private</span>
* <span class="attrib">@param</span> {String} p_sType The name of the event that was fired.
* <span class="attrib">@param</span> {Array} p_aArgs Collection of arguments sent when the event
* was fired.
* <span class="attrib">@param</span> {YAHOO.widget.MenuItem} p_oMenuModule The MenuModule instance that
* fired the event.
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>._onKeyDown =
<span class="reserved">function</span>(p_sType, p_aArgs, p_oMenuItem) {
var Event = YAHOO.util.Event;
var oDOMEvent = p_aArgs[0];
var oParent = <span class="reserved">this</span>.parent;
var oConfig = <span class="reserved">this</span>.cfg;
var oMenuItem;
switch(oDOMEvent.keyCode) {
case 38: // Up arrow
case 40: // Down arrow
<span class="reserved">if</span>(
<span class="reserved">this</span> == oParent.activeItem &amp;&amp;
!oConfig.getProperty(<span class="literal">"selected"</span>)
) {
oConfig.setProperty(<span class="literal">"selected"</span>, true);
}
<span class="reserved">else</span> {
var oNextItem = (oDOMEvent.keyCode == 38) ?
<span class="reserved">this</span>.getPreviousEnabledSibling() :
<span class="reserved">this</span>.getNextEnabledSibling();
<span class="reserved">if</span>(oNextItem) {
oParent.clearActiveItem();
oNextItem.cfg.setProperty(<span class="literal">"selected"</span>, true);
oNextItem.focus();
}
}
Event.preventDefault(oDOMEvent);
break;
case 39: // Right arrow
oParent.clearActiveItem();
oConfig.setProperty(<span class="literal">"selected"</span>, true);
<span class="reserved">this</span>.focus();
var oSubmenu = oConfig.getProperty(<span class="literal">"submenu"</span>);
<span class="reserved">if</span>(oSubmenu) {
oSubmenu.show();
oSubmenu.setInitialSelection();
}
<span class="reserved">else</span> <span class="reserved">if</span>(
YAHOO.widget.MenuBarItem &amp;&amp;
oParent.parent &amp;&amp;
oParent.parent instanceof YAHOO.widget.MenuBarItem
) {
oParent.hide();
<span class="comment">
// Set focus to the parent MenuItem if one exists</span>
oMenuItem = oParent.parent;
<span class="reserved">if</span>(oMenuItem) {
oMenuItem.focus();
oMenuItem.cfg.setProperty(<span class="literal">"selected"</span>, true);
}
}
Event.preventDefault(oDOMEvent);
break;
case 37: // Left arrow
<span class="comment">
// Only hide if this this is a MenuItem of a submenu</span>
<span class="reserved">if</span>(oParent.parent) {
oParent.hide();
<span class="comment">
// Set focus to the parent MenuItem if one exists</span>
oMenuItem = oParent.parent;
<span class="reserved">if</span>(oMenuItem) {
oMenuItem.focus();
oMenuItem.cfg.setProperty(<span class="literal">"selected"</span>, true);
}
}
Event.preventDefault(oDOMEvent);
break;
}
};
<span class="comment">/**
* "mouseover" Custom Event handler for a MenuItem instance.
* <span class="attrib">@private</span>
* <span class="attrib">@param</span> {String} p_sType The name of the event that was fired.
* <span class="attrib">@param</span> {Array} p_aArgs Collection of arguments sent when the event
* was fired.
* <span class="attrib">@param</span> {YAHOO.widget.MenuItem} p_oMenuModule The MenuModule instance that
* fired the event.
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>._onMouseOver =
<span class="reserved">function</span>(p_sType, p_aArgs, p_oMenuItem) {
var oParent = <span class="reserved">this</span>.parent;
var oConfig = <span class="reserved">this</span>.cfg;
var oActiveItem = oParent.activeItem;
<span class="comment">
// Hide any other submenus that might be visible</span>
<span class="reserved">if</span>(oActiveItem &amp;&amp; oActiveItem != <span class="reserved">this</span>) {
oParent.clearActiveItem();
}
<span class="comment">
// Select and focus the current MenuItem instance</span>
oConfig.setProperty(<span class="literal">"selected"</span>, true);
<span class="reserved">this</span>.focus();
<span class="comment">
// Show the submenu for this instance</span>
var oSubmenu = oConfig.getProperty(<span class="literal">"submenu"</span>);
<span class="reserved">if</span>(oSubmenu) {
oSubmenu.show();
}
};
<span class="comment">/**
* "mouseout" Custom Event handler for a MenuItem instance.
* <span class="attrib">@private</span>
* <span class="attrib">@param</span> {String} p_sType The name of the event that was fired.
* <span class="attrib">@param</span> {Array} p_aArgs Collection of arguments sent when the event
* was fired.
* <span class="attrib">@param</span> {YAHOO.widget.MenuItem} p_oMenuModule The MenuModule instance that
* fired the event.
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>._onMouseOut =
<span class="reserved">function</span>(p_sType, p_aArgs, p_oMenuItem) {
var oConfig = <span class="reserved">this</span>.cfg;
var oSubmenu = oConfig.getProperty(<span class="literal">"submenu"</span>);
oConfig.setProperty(<span class="literal">"selected"</span>, false);
<span class="reserved">if</span>(oSubmenu) {
var oDOMEvent = p_aArgs[0];
var oRelatedTarget = YAHOO.util.Event.getRelatedTarget(oDOMEvent);
<span class="reserved">if</span>(
!(
oRelatedTarget == oSubmenu.element ||
YAHOO.util.Dom.isAncestor(oSubmenu.element, oRelatedTarget)
)
) {
oSubmenu.hide();
}
}
};
<span class="comment">/**
* "click" Custom Event handler for a MenuItem instance.
* <span class="attrib">@private</span>
* <span class="attrib">@param</span> {String} p_sType The name of the event that was fired.
* <span class="attrib">@param</span> {Array} p_aArgs Collection of arguments sent when the event
* was fired.
* <span class="attrib">@param</span> {YAHOO.widget.MenuItem} p_oMenuModule The MenuModule instance that
* fired the event.
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>._onClick =
<span class="reserved">function</span>(p_sType, p_aArgs, p_oMenuItem) {
<span class="reserved">function</span> findRoot(p_oMenu) {
var oItem = p_oMenu.parent; // The parent MenuItem instance
<span class="reserved">if</span>(oItem) {
var oParentMenu = oItem.parent;
<span class="reserved">if</span>(
oParentMenu &amp;&amp;
(oParentMenu instanceof YAHOO.widget.Menu) &amp;&amp;
oParentMenu.cfg.getProperty(<span class="literal">"position"</span>) == <span class="literal">"dynamic"</span>
) {
<span class="reserved">return</span> findRoot(oParentMenu);
}
}
<span class="reserved">return</span> p_oMenu;
}
var oRoot = findRoot(<span class="reserved">this</span>.parent);
var sURL = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"url"</span>);
<span class="reserved">if</span>(
(sURL.substr((sURL.length-1),1) == <span class="literal">"#"</span>) &amp;&amp;
oRoot &amp;&amp;
oRoot.cfg.getProperty(<span class="literal">"position"</span>) == <span class="literal">"dynamic"</span>
) {
oRoot.hide();
}
};
<span class="comment">
// Event handlers for configuration properties</span>
<span class="comment">/**
* Event handler for when the "checked" configuration property of
* a MenuItem instance changes.
* <span class="attrib">@param</span> {String} p_sType The name of the event that was fired.
* <span class="attrib">@param</span> {Array} p_aArgs Collection of arguments sent when the
* event was fired.
* <span class="attrib">@param</span> {YAHOO.widget.MenuItem} p_oItem The MenuItem instance
* that fired the event.
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>.configChecked =
<span class="reserved">function</span>(p_sType, p_aArgs, p_oItem) {
var Dom = YAHOO.util.Dom;
var bChecked = p_aArgs[0];
var oEl = <span class="reserved">this</span>.element;
var oConfig = <span class="reserved">this</span>.cfg;
var oImg;
<span class="reserved">if</span>(bChecked) {
var me = <span class="reserved">this</span>;
<span class="reserved">function</span> preloadImage(p_sPath) {
var sPath = me.imageRoot + p_sPath;
<span class="reserved">if</span>(!document.images[sPath]) {
var oImage = document.createElement(<span class="literal">"img"</span>);
oImage.src = sPath;
oImage.name = sPath;
oImage.id = sPath;
oImage.style.display = <span class="literal">"none"</span>;
document.body.appendChild(oImage);
}
}
preloadImage(<span class="reserved">this</span>.CHECKED_IMAGE_PATH);
preloadImage(<span class="reserved">this</span>.SELECTED_CHECKED_IMAGE_PATH);
preloadImage(<span class="reserved">this</span>.DISABLED_CHECKED_IMAGE_PATH);
oImg = document.createElement(<span class="literal">"img"</span>);
oImg.src = (<span class="reserved">this</span>.imageRoot + <span class="reserved">this</span>.CHECKED_IMAGE_PATH);
oImg.alt = <span class="reserved">this</span>.CHECKED_IMAGE_ALT_TEXT;
var oSubmenu = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"submenu"</span>);
<span class="reserved">if</span>(oSubmenu) {
oEl.insertBefore(oImg, oSubmenu.element);
}
<span class="reserved">else</span> {
oEl.appendChild(oImg);
}
Dom.addClass([oEl, oImg], <span class="literal">"checked"</span>);
<span class="reserved">this</span>._checkImage = oImg;
<span class="reserved">if</span>(oConfig.getProperty(<span class="literal">"disabled"</span>)) {
oConfig.refireEvent(<span class="literal">"disabled"</span>);
}
<span class="reserved">if</span>(oConfig.getProperty(<span class="literal">"selected"</span>)) {
oConfig.refireEvent(<span class="literal">"selected"</span>);
}
}
<span class="reserved">else</span> {
oImg = <span class="reserved">this</span>._checkImage;
Dom.removeClass([oEl, oImg], <span class="literal">"checked"</span>);
<span class="reserved">if</span>(oImg) {
oEl.removeChild(oImg);
}
<span class="reserved">this</span>._checkImage = null;
}
};
<span class="comment">/**
* Event handler for when the "selected" configuration property of
* a MenuItem instance changes.
* <span class="attrib">@param</span> {String} p_sType The name of the event that was fired.
* <span class="attrib">@param</span> {Array} p_aArgs Collection of arguments sent when the
* event was fired.
* <span class="attrib">@param</span> {YAHOO.widget.MenuItem} p_oItem The MenuItem instance
* that fired the event.
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>.configSelected =
<span class="reserved">function</span>(p_sType, p_aArgs, p_oItem) {
YAHOO.widget.MenuItem.superclass.configSelected.call(
<span class="reserved">this</span>, p_sType, p_aArgs, p_oItem
);
var oConfig = <span class="reserved">this</span>.cfg;
<span class="reserved">if</span>(!oConfig.getProperty(<span class="literal">"disabled"</span>) &amp;&amp; oConfig.getProperty(<span class="literal">"checked"</span>)) {
var bSelected = p_aArgs[0];
var sSrc = <span class="reserved">this</span>.imageRoot + (bSelected ?
<span class="reserved">this</span>.SELECTED_CHECKED_IMAGE_PATH : <span class="reserved">this</span>.CHECKED_IMAGE_PATH);
<span class="reserved">this</span>._checkImage.src = document.images[sSrc].src;
}
};
<span class="comment">/**
* Event handler for when the "disabled" configuration property of
* a MenuItem instance changes.
* <span class="attrib">@param</span> {String} p_sType The name of the event that was fired.
* <span class="attrib">@param</span> {Array} p_aArgs Collection of arguments sent when the
* event was fired.
* <span class="attrib">@param</span> {YAHOO.widget.MenuItem} p_oItem The MenuItem instance
* that fired the event.
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>.configDisabled =
<span class="reserved">function</span>(p_sType, p_aArgs, p_oItem) {
YAHOO.widget.MenuItem.superclass.configDisabled.call(
<span class="reserved">this</span>, p_sType, p_aArgs, p_oItem
);
<span class="reserved">if</span>(<span class="reserved">this</span>.cfg.getProperty(<span class="literal">"checked"</span>)) {
var bDisabled = p_aArgs[0];
var sAlt = <span class="reserved">this</span>.CHECKED_IMAGE_ALT_TEXT;
var sSrc = <span class="reserved">this</span>.CHECKED_IMAGE_PATH;
var oImg = <span class="reserved">this</span>._checkImage;
<span class="reserved">if</span>(bDisabled) {
sAlt = <span class="reserved">this</span>.DISABLED_CHECKED_IMAGE_ALT_TEXT;
sSrc = <span class="reserved">this</span>.DISABLED_CHECKED_IMAGE_PATH;
}
oImg.src = document.images[(<span class="reserved">this</span>.imageRoot + sSrc)].src;
oImg.alt = sAlt;
}
};
<span class="comment">
// Public methods</span>
<span class="comment">/**
* Initializes the class's configurable properties which can be changed using
* the MenuModule's Config object (cfg).
*/</span>
YAHOO.widget.MenuItem.<span class="reserved">prototype</span>.initDefaultConfig = <span class="reserved">function</span>() {
YAHOO.widget.MenuItem.superclass.initDefaultConfig.call(<span class="reserved">this</span>);
<span class="comment">
// Add configuration properties</span>
<span class="reserved">this</span>.cfg.addProperty(
<span class="literal">"checked"</span>,
{
value: false,
handler: <span class="reserved">this</span>.configChecked,
validator: <span class="reserved">this</span>.cfg.checkBoolean,
suppressEvent: true,
supercedes:[<span class="literal">"disabled"</span>]
}
);
};</pre>
</div>
</div>
</div>
<div id="footer">
<hr />
Copyright &copy; 2006 Yahoo! Inc. All rights reserved.
<br /><br />
Documentation generated by <a href="http://jsdoc.sourceforge.net/">
JSDoc</a>
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink