| |
| How To use the OnClientClick property
|
|
| | |
What is the OnClientClick property
The value of this property should specify a Javascript code to execute when the
item is clicked:
<oem:EasyMenu id="Easymenu1" runat="server">
<Components>
<oem:MenuItem InnerHtml="test on client click" ID="menuItem1"
OnClientClick="alert('this is a test message');" ></oem:MenuItem>
</Components>
</oem:EasyMenu>
The Javascript code can make use of four parameter passed by EasyMenu to the executing
function in OnClientClick:
· targetEl - a reference to the element to which
the menu is attached
· menuObject - a reference to the menu item that
was clicked
· menuEvent - the event that triggered the item
selection
· easyMenu - the menu to containing the items that
was clicked belongs to
| | |
Using the optional parameters of OnClientClick
<oem:EasyMenu id="Easymenu2" runat="server">
<Components>
<oem:MenuItem InnerHtml="Change to Red" ID="menuItem2"
OnClientClick="targetEl.style.backgroundColor='red';"></oem:MenuItem>
<oem:MenuItem InnerHtml="Change to Green" ID="menuItem3"
OnClientClick="targetEl.style.backgroundColor='green';"></oem:MenuItem>
<oem:MenuItem InnerHtml="Change to Blue" ID="menuItem4"
OnClientClick="targetEl.style.backgroundColor='blue';"></oem:MenuItem>
<oem:MenuSeparator ID="menuSeparator1"></oem:MenuSeparator>
<oem:MenuItem InnerHtml="Change this text" ID="menuItem5"
OnClientClick="menuObject.contentCell.innerHTML = prompt('Choose a new text', 'new text');"></oem:MenuItem>
<oem:MenuSeparator ID="menuSeparator2"></oem:MenuSeparator>
<oem:MenuItem InnerHtml="Show coords on click" ID="menuItem6"
OnClientClick="alert('Left: ' + menuEvent.clientX + '\r\n' + 'Top: ' + menuEvent.clientY);"></oem:MenuItem>
<oem:MenuSeparator ID="menuSeparator3"></oem:MenuSeparator>
<oem:MenuItem InnerHtml="Don't hide this menu" ID="menuItem7" AutoHideMenu="False"></oem:MenuItem>
<oem:MenuItem InnerHtml="Hide this menu" ID="menuItem8" AutoHideMenu="False"
OnClientClick="easyMenu.hideMenu(null, null, true);"></oem:MenuItem>
</Components>
</oem:EasyMenu>
The first three options will change the background color of the square that was right clicked,
while the fourth will allow you to choose a text for the clicked item and the fifth
will show you the coordonates of the mouse pointer upon the click on the item. The last item shows
you how to hide the menu when the AutoHideMenu option is set to false. The item before it shows
the default behavior if the AutoHideMenu is false and the menu isn't hidden by user code.
| | |
| "I am extremely impressed with your Suite" |
Markus Neuhoff |
| Grand Valley State University |
| | |
|
|
|
|
