dojo Menu

最新推荐文章于 2021-02-03 17:10:06 发布

原创最新推荐文章于 2021-02-03 17:10:06 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Dojo #UP #HTML

Dojo 专栏收录该内容

13 篇文章

订阅专栏

本文展示了一个使用Dojo Toolkit创建的按钮组件测试案例。该测试包括一个带有下拉菜单的组合按钮，通过JavaScript进行初始化，并定义了点击事件的响应行为。此示例演示了如何集成Dojo的dijit.Menu和dijit.form.Button组件。


<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Dojo Button Widget Test</title>

<link id="themeStyles" rel="stylesheet" href="../../scripts/dijit/themes/claro/claro.css">

<script type="text/javascript" src="../../scripts/dojo/dojo.js" djConfig="parseOnLoad: true"></script>

		<script type="text/javascript">
			dojo.require("dijit.dijit"); // optimize: load dijit layer

			dojo.require("dijit.Menu");

			dojo.require("dijit.form.Button");

			dojo.require("dojo.parser");

			dojo.ready(function(){
				var myMenu = new dijit.Menu();
				var mItemA = new dijit.MenuItem({lable:"mItemA",iconClass:"",onClick:function(){ console.log("not actually saving anything, just a test!"); }});
				myMenu.addChild(mItemA);
				console.dir(mItemA);
				var button1 = new dijit.form.ComboButton({label: "hello world",dropDown : myMenu,dropDownPosition:["above"], optionsTitle:"save options", onClick:function(){alert("clicked combo save"); },
			iconClass:"plusBlockIcon"});
				dojo.body().appendChild(button1.domNode);


				var mItemB = new dijit.MenuItem({lable:"mItemA",iconClass:"",onClick:function(){ console.log("not actually saving anything, just a test!"); }});


				myMenu.addChild(mItemB);
			})


		</script>
	</head>
<body class="claro"  style="padding-top:100px">

<button id="combo_above" data-dojo-type="dijit.form.ComboButton" data-dojo-props='dropDownPosition:["above"], optionsTitle:"save options", onClick:function(){ console.log("clicked combo save"); },
			iconClass:"plusBlockIcon"'>
		<span>Up</span>
		<span data-dojo-type="dijit.Menu">
			<span data-dojo-type="dijit.MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconSave",
				onClick:function(){ console.log("not actually saving anything, just a test!"); }'>Save</span>
			<span data-dojo-type="dijit.MenuItem"
				data-dojo-props='onClick:function(){ console.log("not actually saving anything, just a test!"); }'>Save As</span>
		</span>
	</button>


</body>
</html>