Context menu (DHTMLSuite.contextMenu)
Specifications
- Widget/Class name: DHTMLSuite.contextMenu
- Demo: demo-context-menu.html
- Css: [THEMES_FOLDER]/css/menu-bar.css and [THEMES_FOLDER]/css/menu-item.css
Configuration
To use this script, include the contextMenu widget with lines like this:
<script type="text/javascript" src="../js/separateFiles/dhtmlSuite-common.js"></script>
<script type="text/javascript">
DHTMLSuite.include("contextMenu");
</script>
The context menu is based on the menu bar widget. It displays a vertical menu bar when you right click on elements on your page.
We will look at an example where we attach a context menu to two div elemens. This is the CSS and HTML markup for these two elements:
<style type="text/css">
#div1{
width:500px;
height:120px;
background-color:#AAA;
}
#div2{
width:500px;
height:120px;
background-color:#BBB;
}
</style>
<div id="div1">
There's a context menu attached to this element.
</div>
<div id="div2">
There's a context menu attached to this element.
</div>
Step 1: Create the menuModel object.
First, we create two different menu models, i.e. the datasources for the context menu. You can look at the menu bar article if you need more information regarding how to do this. In our example, we have created these two models:
<ul id="menuModel" style="display:none">
<li id="50000"jsFunction="saveWork()"
itemIcon="../images/disk.gif"><a href="#" title="Open the file menu">File</a>
<ul width="150">
<li id="500001" jsFunction="saveWork()"
itemIcon="../images/disk.gif"><a href="#" title="Save your work">Save</a></li>
<li id="500002"><a href="#">Save As</a></li>
<li id="500004" itemType="separator"></li>
<li id="500003"><a href="#">Open</a>
<ul width="130">
<li id="5000031"><a href="#">Project</a>
<li id="5000032"><a href="#">Template</a>
<li id="5000033"><a href="#">File</a>
</ul>
</li>
</ul>
</li>
<li id="50001"><a href="#">View</a>
<ul width="130">
<li id="500011"><a href="#">Source</a></li>
<li id="500012"><a href="#">Debug info</a></li>
<li id="500013"><a href="#">Layout</a></li>
</ul>
</li>
<li id="50003" itemType="separator"></li>
<li id="50002"><a href="#">Tools</a></li>
<li id="50006"><a href="#">Project</a></li>
</ul>
<script type="text/javascript">
// Menu items for the first context menu
var menuModel = new DHTMLSuite.menuModel();
menuModel.addItemsFromMarkup('menuModel');
menuModel.init();
// Menu items for the second element
var menuModel2 = new DHTMLSuite.menuModel();
menuModel2.addItem(1,'Save','../images/disk.gif','',false,'saveItem');
menuModel2.addItem(2,'Open','../images/open.gif','',false);
menuModel2.addSeparator(0);
menuModel2.addItem(3,'Save as','','',false);
menuModel2.addItem(4,'PDF','','',3);
menuModel2.addItem(5,'RTF','','',3);
menuModel2.init();
One of the menu models have been created from existing <UL><LI> markup, the other one by Javascript alone.
Step 2: Create the contextMenu object
We are now ready to create our contextMenu object and attach it to elements on our web page. In our example, I want to display menu items from "menuModel" as context menu for "element1" and "menuModel2" for "element2".
This is the code:
var contextMenu = new DHTMLSuite.contextMenu();
contextMenu.setWidth(130);
contextMenu.attachToElement(false,'element1',menuModel);
contextMenu.attachToElement(false,'element2',menuModel2);
Here, I have used the attachToElement method to attach the context menu to element with id "element1" and "element2". The second argument to this method specifies which menuModel to use for this element.
It's also important to notice that you should only have one contextMenu object per page.
