版权声明:本文为博主原创文章,转载请标明出处,非常感谢! https://blog.csdn.net/joyous/article/details/82818221
Dojo 是一套非常强大的 js 前端框架,拥有丰富的控件和灵活的可操作性,这里介绍 dojo 控件中 toolbar 的创建和相应的设置,在 dojo 框架路径正常的情况下,直接复制代码到 apache 或者 nginx 之类的 http 服务器目录中,确保代码中的 dojo 的路径与实际路径相符,代码在 Google Chrome 测似通过,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dojo 1.14.1 Test Toolbar</title>
<!-- 注意与实际路径的调整 -->
<!-- dojo css 1.14.1-->
<link rel="stylesheet" href="scripts/dojo/1.14.1-mini/dojo/resources/dojo.css" />
<link rel="stylesheet" href="scripts/dojo/1.14.1-mini/dijit/themes/claro/claro.css" />
</head>
<!-- 注意与实际路径的调整 -->
<!-- dojo core, parseOnLoad: true -->
<script type="text/javascript" charset="utf-8" src="/speedacc/scripts/dojo/1.14.1-mini/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: false, locale:'zh-cn'"></script>
<script type="text/javascript">
// 创建 toolbar 控件,
function Toolbar()
{
require([ "dijit/Toolbar", "dijit/form/Button", "dojo/_base/array", "dojo/domReady!" ], function(Toolbar, Button, array)
{
// 创建 toolbar 对象, 注意页面上的 id=“toolbar” 的标签一定要向符
var toolbar = new Toolbar(
{}, "my_toolbar");
// 循环向 toolbar 添加 button
array.forEach([ "insert", "delete", "first", "next", "previous", "last" ], function(label, index, items)
{
// 默认 icon
var icon = "dijitEditorIcon dijitEditorIconInsertImage";
// 默认 disable 状态
var disabled = true;
// button insert
if (label == "insert")
{
// 设置按钮 icon
icon = "dijitEditorIcon dijitEditorIconNewPage";
// 允许按钮有效
disabled = false;
}
// button delete
else if (label == "delete")
{
icon = "dijitEditorIcon dijitEditorIconHiliteColor";
// 允许按钮有效
disabled = false;
}
else if (label == "first")
{
icon = "dijitEditorIcon dijitEditorIconUnlink";
}
else if (label == "next")
{
label = "next";
icon = "dijitEditorIcon dijitEditorIconInsertImage";
}
else if (label == "previous")
{
icon = "dijitEditorIcon dijitEditorIconInsertImage";
}
else if (label == "last")
{
icon = "dijitEditorIcon dijitEditorIconInsertImage";
}
// 创建一个按钮
var button = new Button(
{
label : label,
buttonTag : label,
showLabel : false,
iconClass : icon,
disabled : disabled,
// 事件处理
onClick : function(event)
{
button = this;
// 根据标签分类事件处理
if (button.label == "insert")
{
console.info("button click on insert");
}
else if (label == "delete")
{
console.info("button click on delete");
}
else if (label == "first")
{
console.info("button click on first");
}
else if (label == "next")
{
}
else if (label == "previous")
{
}
else if (label == "last")
{
}
},
});
// button.set("iconClass", "dijitEditorIcon dijitEditorIconPaste");
toolbar.addChild(button);
});
});
}
</script>
<body>
<div id="my_toolbar"></div>
</body>
<script type="text/javascript">
Toolbar();
</script>
</html>
运行代码,测试结果
事件测试,显示正确。