本文提供了一个使用Dojo框架创建Dijit按钮的示例代码，包括ToggleButton、ComboButton和DropDownButton，展示了如何在HTML中声明这些组件并配置属性。
这个dojo教程的作者吧我也是服了，似乎就是怎么不好用就怎么写这教程例子里面总是不写引用dojo.js这句，搞得人吧需要花更多的时间才可以搞定，完整代码如下。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Dijit Buttons</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<button id="toggle" data-dojo-type="dijit/form/ToggleButton"
data-dojo-props="iconClass: 'dijitCheckBoxIcon', checked: true">
Toggle
</button>
<div id="combo" data-dojo-type="dijit/form/ComboButton"
data-dojo-props="
optionsTitle: 'Save Options',
iconClass: 'dijitIconFile',
onClick: function(){ console.log('Clicked ComboButton'); }">
<span>Combo</span>
<div id="saveMenu" data-dojo-type="dijit/Menu">
<div data-dojo-type="dijit/MenuItem"
data-dojo-props="
iconClass: 'dijitEditorIcon dijitEditorIconSave',
onClick: function(){ console.log('Save'); }">
Save
</div>
<div data-dojo-type="dijit/MenuItem"
data-dojo-props="onClick: function(){ console.log('Save As'); }">
Save As
</div>
</div>
</div>
<div id="dropDown" data-dojo-type="dijit/form/DropDownButton"
data-dojo-props="iconClass: 'dijitIconApplication'">
<span>DropDown</span>
<div data-dojo-type="dijit/TooltipDialog">
This is a TooltipDialog. You could even put a form in here!
</div>
</div>
<script src="dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
<script>
// load requirements for declarative widgets in page content
require(["dijit/form/ToggleButton", "dijit/form/ComboButton", "dijit/Menu", "dijit/MenuItem", "dijit/form/DropDownButton", "dijit/TooltipDialog", "dojo/parser"]);
</script>
</body>
</html>
结果如下：三个按钮
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
