IE中的Dojo工具提示diaglog和下拉按钮问题

时间:2011-10-20 18:09:34

标签: internet-explorer dojo

我有一系列工具提示对话框和下拉按钮,实质上是创建一个树状结构来查询数据。

这在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>

任何人都知道为什么会这样?

感谢您的帮助,

埃里克

1 个答案:

答案 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});
});