Home Dojo Dojo-1.0.2 Dojo Menu and Menu Item
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Dojo Menu and Menu Item

Advertisement
Complete Java Server Faces (JSF) Tutorial - JSF Tutorials. JSF Tutorials at Rose India covers everything you need to know about JSF, This JSF Tutorial contains readable and interesting content organized in proper and sequential manner. Each concept has been explained by simple examples so that you can understand easily and implement immediately into your java web application. It provides coverage of key JSF concepts such as User Interface(UI) components, Renderers, Backing beans, Validators, Converters, Navigation, Event handling, Expession language, Messages etc...

Dojo Menu and Menu Item

         

In this section, you will learn about the menu and how to create it in dojo.

Menu : This is the widget models a context menu, otherwise known as a right-click or popup menu, and it appears in a ComboButton and DropDownButton widgets. If you click on the right button of the mouse then popup menu is appeared on the screen.

MenuItem widgets are an actual items in the menu. The PopupMenuItem is a MenuItem, but it displays a submenu or other widget to the right . A PopupMenuItems always have two child nodes: a tag with the displayed label (Using SPAN tag), and a widget to be popped up, typically a dijit.Menu widget.

 

 

Here is code of program:

<html>
<head>
<title>Menu Demo</title>
  <style type="text/css">
  @import "../resources/dojo.css";
  @import "../dijit/themes/tundra/tundra.css";
  
  </style>
  <script type="text/javascript" src="dojo.xd.js" 
   djConfig="parseOnLoad: true"></script>

  <script type="text/javascript">
 dojo.require("dojo.parser");
 dojo.require("dijit.form.Button");
 dojo.require("dijit.Menu");
 function call_function(choice) {
  alert(choice+" was clicked.");
  }
  function save_function() {
  alert("Save Button");
  }
  function save_as_function(choice) {
 alert("Save As Button");
  }
 </script>
</head>
<body class="tundra">
<b>Creating DropDownButtons</b><br>
<div dojoType="dijit.form.ComboButton" onclick="save_function">
  <span>File</span>
  <div dojoType="dijit.Menu" id="saveMenu" 
   toggle="fade" style="display: none;">
  <div dojoType="dijit.MenuItem"
 iconClass="dijitEditorIcon dijitEditorIconSave" 
  onclick="save_function">
  Save
  </div>
  <div dojoType="dijit.MenuItem" onclick="save_as_function">
  Save As
  </div>
  </div>
  </div>
<div dojoType="dijit.form.DropDownButton">
  <span>Edit</span>
  <div dojoType="dijit.Menu" id="Edit">
  <div dojoType="dijit.MenuItem" label="Copy"
  onclick="call_function('copy');"></div>
  <div dojoType="dijit.MenuItem" label="Cut" 
  onclick="call_function('cut');"></div>
  <div dojoType="dijit.MenuItem" label="Paste"
  onclick="call_function('paste');"></div>
  </div>
  </div>

  
<br><br><br><br><br><br>  
<h1>Submenu</h1>
  <style>
  .myIcon {
 background-image:
  url
(
http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/images/checkmark.gif);
 background-position: -16px 0px;
 width: 16px;
 height: 16px;
  }
  </style>
 
  <div dojoType="dijit.Menu" id="submenu1"
 contextMenuForWindow="true">
  <div dojoType="dijit.MenuItem" iconClass="myIcon"
 onClick="alert('Hello world');">Enabled Item</div>
  <div dojoType="dijit.PopupMenuItem" id="submenu2">
  <span>Submenu</span>
  <div dojoType="dijit.Menu">
  <div dojoType="dijit.MenuItem"
   onClick="alert('Submenu 1!')">
Submenu Item One</div>

  <div dojoType="dijit.MenuItem"
   onClick="alert('Submenu 2!')">
Submenu Item Two</div>

  </div>
  </div>
  </div>
</body>
</html>

Here is code of program:

Submenu:

 

 

Advertisement

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Ask Questions?    Discuss: Dojo Menu and Menu Item  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com