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('正常搜索')">正常搜索 </div>
<div dojoType="dijit.MenuItem" onClick="alert('模糊搜索')">模糊搜索 </div>
</div>
</div>
</div>
点右键测试菜单
</body>
</html>
如果想为菜单添加图标,使用iconClass="dijitEditorIconCut" 在MenuItem上面。
demo: http://www.dojocn.cn/dojo/demo/15_menu.html
介绍一下使用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('正常搜索')">正常搜索 </div>
<div dojoType="dijit.MenuItem" onClick="alert('模糊搜索')">模糊搜索 </div>
</div>
</div>
</div>
点右键测试菜单
</body>
</html>
如果想为菜单添加图标,使用iconClass="dijitEditorIconCut" 在MenuItem上面。
demo: http://www.dojocn.cn/dojo/demo/15_menu.html
来源:oschina
链接:https://my.oschina.net/u/98809/blog/9465