Диагностические подсказки Dojo и проблемы с выпадающими кнопками в IE - PullRequest
2 голосов
/ 20 октября 2011

У меня есть ряд диалоговых окон и выпадающих кнопок, которые по сути создают древовидную структуру для запроса данных.

Это прекрасно работает в chrome и firefox, но в IE, если я выберу Disease 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 голосов
/ 29 апреля 2012

Будет кашлять dijit / PopupMenuItem !!

Проблема заключается в том, что декларативный tooltipdialog не является 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});
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...