我有一系列工具提示对话框和下拉按钮,实质上是创建一个树状结构来查询数据。
这在chrome和firefox中效果很好,但是在IE中,如果我选择疾病A,然后选择疾病B,它会关闭所有工具提示对话框和下拉按钮,并将选中的最后一个推到屏幕顶部并覆盖数据按钮。
代码:
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
.dijitPopup {
position:absolute !important;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.DropDownButton");
dojo.require("dijit.TooltipDialog");
dojo.require("dijit.form.Button");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<div dojoType="dijit.form.DropDownButton">
<span>
Data
</span>
<div dojoType="dijit.TooltipDialog">
Disease
<div dojoType="dijit.form.DropDownButton">
<span>
A
</span>
<div dojoType="dijit.TooltipDialog">
Year:
<div dojoType="dijit.form.DropDownButton">
<span>
1
</span>
<div dojoType="dijit.TooltipDialog">
<strong>Sex:</strong>
<div dojoType="dijit.form.Button">
<span>
Both combined
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Male
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Female
</span>
</div>
</div>
</div>
<div dojoType="dijit.form.DropDownButton">
<span>
2
</span>
<div dojoType="dijit.TooltipDialog">
<strong>Sex:</strong>
<div dojoType="dijit.form.Button">
<span>
Both combined
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Male
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Female
</span>
</div>
</div>
</div>
<div dojoType="dijit.form.DropDownButton">
<span>
3
</span>
<div dojoType="dijit.TooltipDialog">
<strong>Sex:</strong>
<div dojoType="dijit.form.Button">
<span>
Both combined
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Male
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Female
</span>
</div>
</div>
</div>
</div>
</div>
<div dojoType="dijit.form.DropDownButton">
<span>
B
</span>
<div dojoType="dijit.TooltipDialog">
Year:
<div dojoType="dijit.form.DropDownButton">
<span>
1
</span>
<div dojoType="dijit.TooltipDialog">
<strong>Sex:</strong>
<div dojoType="dijit.form.Button">
<span>
Both combined
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Male
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Female
</span>
</div>
</div>
</div>
<div dojoType="dijit.form.DropDownButton">
<span>
2
</span>
<div dojoType="dijit.TooltipDialog">
<strong>Sex:</strong>
<div dojoType="dijit.form.Button">
<span>
Both combined
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Male
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Female
</span>
</div>
</div>
</div>
<div dojoType="dijit.form.DropDownButton">
<span>
3
</span>
<div dojoType="dijit.TooltipDialog">
<strong>Sex:</strong>
<div dojoType="dijit.form.Button">
<span>
Both combined
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Male
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Female
</span>
</div>
</div>
</div>
</div>
</div>
<div dojoType="dijit.form.DropDownButton">
<span>
C
</span>
<div dojoType="dijit.TooltipDialog">
Year:
<div dojoType="dijit.form.DropDownButton">
<span>
1
</span>
<div dojoType="dijit.TooltipDialog">
<strong>Sex:</strong>
<div dojoType="dijit.form.Button">
<span>
Both combined
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Male
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Female
</span>
</div>
</div>
</div>
<div dojoType="dijit.form.DropDownButton">
<span>
2
</span>
<div dojoType="dijit.TooltipDialog">
<strong>Sex:</strong>
<div dojoType="dijit.form.Button">
<span>
Both combined
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Male
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Female
</span>
</div>
</div>
</div>
<div dojoType="dijit.form.DropDownButton">
<span>
3
</span>
<div dojoType="dijit.TooltipDialog">
<strong>Sex:</strong>
<div dojoType="dijit.form.Button">
<span>
Both combined
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Male
</span>
</div>
<div dojoType="dijit.form.Button">
<span>
Female
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
任何人都知道为什么会这样?
感谢您的帮助,
埃里克
答案 0 :(得分:0)
将 咳嗽 dijit / PopupMenuItem !!
问题在于声明性tooltipdialog不是声明它的parentNode的childNode而且只有一个!通过声明,这是可能的..然而,一旦失去焦点,该对话框将隐藏,并且此事件会冒泡。因此,一切都已关闭,单击的按钮将打开一个由折叠和隐藏的DOM节点定位的对话框。
弹出第一个对话框后,您会看到<body><div class=dijitPopup>....</div></body>
出现。当弹出一个新的工具提示对话框时,前一个将消失,请在jsfiddle中考虑这一点。不要只期望tooltipdialog中的这种行为 - 而是使用popupmenuitem:
require(["dijit/TooltipDialog", "dijit/popup"], function(dia) {
var a = new dia({content: 'abc'});
dijit.popup.open({popup: a, around: dojo.body()});
var b = new dia({content: 'def'});
dijit.popup.open({popup: b, around: a.domNode});
});