dojo 创建一个工具栏 toolbar 并完成相应的事件 onClick 处理

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>

运行代码，测试结果

事件测试，显示正确。

dojo 创建一个工具栏 toolbar 并完成相应的事件 onClick 处理

猜你喜欢