动态添加DropDownButton和TooltipDialog

最新推荐文章于 2025-03-28 19:00:00 发布

原创最新推荐文章于 2025-03-28 19:00:00 发布 · 6.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dojo #dropdown #dialog #button #div #html

Dojo 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Dojo库创建下拉对话框，并提供两种实现方式：一种是在HTML中直接定义DojoType，另一种是在JavaScript中动态创建组件。

今天想做一个弹出下拉对话框，看到Dojo的DropDownButton+TooltipDialog效果不错，稍微研究了一下。Dojo中自带的例子是在html标签中定义的DojoType，这种方法比较简单，但不是很灵活，使用方法如下：

首先导入dojo的文件以及默认的样式文件tundra.css

然后在script中引入需要的dojo包

dojo.require("dijit.Dialog");

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

然后在html中定义你需要的按钮和下拉对话框，只需要加上相应的dojoType

<body class="tundra"> //定义页面样式

<div dojoType="dijit.form.DropDownButton"> //定义按钮，使用dojoType注册DropDownButton
<span>Show Tooltip Dialog</span> //定义按钮显示的标签
<div dojoType="dijit.TooltipDialog" id="tooltipDlg"

title="Enter Login information">                             //定义下拉对话框内容，使用dojoType注册ToolTipDialog
   <label for="name">Name: </label>
   <input type="text" name="name" id="name">
    <button dojoType=dijit.form.Button type="submit">OK</button>
</div></body>

这样就完成了，效果如下：

不过我现在的页面是在mashup maker中运行的，而这个该死的玩意在导入dojo文件时居然没有parseOnLoad: true，因此不能直接解析页面上直接定义的dojo组件，因此我又研究了一下在js中动态添加DropDownButton+TooltipDialog。这种方法更加灵活一些。

这次不能直接在html中直接注册dojoType了，所以先定义两个普通的div

<div id="buttonDiv"> //按钮
<span>Show Tooltip Dialog</span>
</div>

<div style="display: none;">        //下拉对话框用个隐藏的div包起来，不然就直接显示出来了
<div id="TtDialog" >                     //下拉对话框
<label for="name">Name: </label>
   <input type="text" name="name" id="name">
    <button dojoType=dijit.form.Button type="submit">OK</button>
</div></div>

然后使用js动态定义这两个dojo组件：

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

var dialog = new dijit.TooltipDialog({
title: "TooltipDialog"
}, dojo.byId("TtDialog")); //将TtDialog注册为ToolTipDialog

dialog.onOpen = function(){                    //可定义一些事件
    console.debug("onOpen");

};

var params = { //定义一个数组用来注册DropDownButton，dropDown属性表示下拉的内容

name: "tooltipDialog",
dropDown: dialog
};

new dijit.form.DropDownButton(params, dojo.byId("buttonDiv")); //将bttonDiv注册为DropDownButton

完成。效果与之前完全相同。