Dojo学习10 dijit.Menu

10. dijit.Menu
介绍一下使用dojo创建右键菜单,有的时候很有用的。
右键菜单的核心类是dijit.Menu,菜单类是dijit.MenuItem;
如果想要添加二级菜单,需要使用dijit.PopupMenuItem;
如果只是简单的右键菜单,还需要设置一下dijit.Menu属性,设置contextMenuForWindow="true"
下面这个是最简单的一个例子:
<html>
<head>
<title>测试菜单</title>
<style type="text/css">
 @import "../js/dojo/resources/dojo.css";
 @import "../js/dijit/themes/tundra/tundra.css";
</style> 
<script type="text/javascript"
 djConfig="parseOnLoad: true, isDebug: false"
 src="../js/dojo/dojo.js"></script>
<script type="text/javascript">
 dojo.require("dijit.Menu");
</script>
</head>
<body class="tundra">
<div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display: none;">
 <div dojoType="dijit.MenuItem" onClick="alert('复制');">复制</div>
 <div dojoType="dijit.MenuItem" onClick="alert('粘贴');">粘贴</div>
 <div dojoType="dijit.MenuSeparator"></div>
 <div dojoType="dijit.MenuItem" onClick="alert('添加新用户');">添加新用户</div>
 <div dojoType="dijit.PopupMenuItem">
  <span>搜索</span>
  <div dojoType="dijit.Menu" id="submenu2">
   <div dojoType="dijit.MenuItem" onClick="alert('正常搜索')">正常搜索&nbsp;&nbsp;</div>
   <div dojoType="dijit.MenuItem" onClick="alert('模糊搜索')">模糊搜索&nbsp;&nbsp;</div>
  </div>
 </div>
</div>
点右键测试菜单
</body>
</html>
如果想为菜单添加图标,使用iconClass="dijitEditorIconCut" 在MenuItem上面。
demo: http://www.dojocn.cn/dojo/demo/15_menu.html

你可能感兴趣的:(Dojo学习10 dijit.Menu)