jquery ui对话框中的dojo下拉按钮

问题描述

我在jquery ui对话框中放置了dojo下拉按钮。按钮的下拉列表不会显示在jquery ui对话框中，而是创建dojo按钮。我通过设置z-index超过1000来跟踪。你有任何建议这个问题。

这是我的代码

  // dojo库的链接
< script type =text / javascript> 
 
 
 // TraderView（CDS）开始操作按钮
 
 require（[dojo / ready，dijit / form / DropDownButton，dijit / DropDownMenu，dijit / MenuItem，dojo / dom]，function（ready，DropDownButton，DropDownMenu，MenuItem，dom）{
 ready（function（）{
 
 // for文件
 var menu = new DropDownMenu（）; 
 var menuItem1 = new MenuItem（{
 label：导出到Excel，
 
 onClick：function（） alert（'Export to Excel'）;} 
}）; 
 menu.addChild（menuItem1）; 
 
 var menuItem2 = new MenuItem（{
 label：导出到PDF，
 onClick：function（）{alert（'Export to PDF'）;} 
}）; 
 
 menu.addChild（menuItem2）; 
 
 var menuItem3 = new MenuItem（{
 label：术语表，
 onClick：function（）{alert（'Term Sheet'）;} 
}）; 
 
 menu.addChild（m enuItem3）; 
 
 var button = new DropDownButton（{
 label：Document，
 name：dcment，
 dropDown：menu，
 id：tvButton
}）; 
 
 dom.byId（dropDownButtonDc）。appendChild（button.domNode）; 
 
 
 
}）; 
 
 
}）; 
 
 
 // TraderView（CDS）结束操作按钮
< / script> 
  

解决方案

弹出 z-index 是为每个弹出式窗口计算的，因为您可以从弹出窗口打开一个弹出窗口，该子弹出应该在父弹出窗口之上。您可以做的是设置 _beginZIndex dijit / popup aka PopupManager - 即第一个弹出窗口的值 - 1005的值对我来说使用jQuery UI对话框。

一个工作的jsFiddle示例：

编辑： z-index：1005 在对话框DnD移动后似乎不够，所以我把那里10000安全。

  require（[
dojo / ready，
dojo / dom，
dijit / popup，
dijit / form / DropDownButton，
dijit / DropDownMenu，
dijit / MenuItem
]，function（
准备好，
 dom，
 PopupManager，
 DropDownButton，
 DropDownMenu，
 MenuItem 
）{
 
 ready（function（） {
 
 // set z-index 
 PopupManager._beginZIndex = 1005; 
 
v ar menu = new DropDownMenu（）; 
 var menuItem1 = new MenuItem（{
 label：导出到Excel，
 onClick：function（）{alert（'Export to Excel'）;} 
}）; 
 
 var menuItem2 = new MenuItem（{
 label：Export to PDF，
 onClick：function（）{alert（'Export to PDF'）;} 
}）; 
 
 var menuItem3 = new MenuItem（{
 label：术语表，
 onClick：function（）{alert（'Term Sheet'）;} 
} ）; 
 
 menu.addChild（menuItem1）; 
 menu.addChild（menuItem2）; 
 menu.addChild（menuItem3）; 
 
 var button = new DropDownButton（{
 label：Document，
 name：dcment，
 dropDown：menu，
 id： tvButton
}）; 
 
 button.startup（）; 
 button.placeAt（dom.byId（dropDownButtonDc））; 
 
 $（＃dialog1）。对话框（{title：dialog1}）; 
 
}）; 
}）; 
  

i placed dojo drop down button inside jquery ui dialog. The drop down list of button doesn't show in the jquery ui dialog, but dojo button is created. i tride by setting z-index more than 1000. do you have any suggesstion for this problem.

here is my code

  //links for dojo library
 <script type="text/javascript">


//beginning of TraderView(CDS) Actions Button

require(["dojo/ready", "dijit/form/DropDownButton", "dijit/DropDownMenu", "dijit/MenuItem", "dojo/dom"], function (ready, DropDownButton, DropDownMenu, MenuItem, dom) {
    ready(function () {

        //for document
        var menu = new DropDownMenu();
        var menuItem1 = new MenuItem({
            label: "Export to Excel",

            onClick: function () { alert('Export to Excel'); }
        });
        menu.addChild(menuItem1);

        var menuItem2 = new MenuItem({
            label: "Export to PDF",
            onClick: function () { alert('Export to PDF'); }
        });

        menu.addChild(menuItem2);

        var menuItem3 = new MenuItem({
            label: "Term Sheet",
            onClick: function () { alert('Term Sheet'); }
        });

        menu.addChild(menuItem3);

        var button = new DropDownButton({
            label: "Document",
            name: "dcment",
            dropDown: menu,
            id: "tvButton"
        });

        dom.byId("dropDownButtonDc").appendChild(button.domNode);



      });


   });


//end of TraderView(CDS) Actions Button
 </script>

解决方案

Popup z-index is calculated for every popup because you can open a popup from popup and that child popup ought to be above the parent popup. What you can do is to setup _beginZIndex of dijit/popup aka PopupManager - i.e. the value of the very first popup - the value of 1005 worked fine for me with jQuery UI dialog.

A working jsFiddle example: http://jsfiddle.net/phusick/q8V58/

EDIT: z-index: 1005 does not seem to be enough after the dialog is DnD moved, so I put there 10000 to be safe.

require([
    "dojo/ready",
    "dojo/dom",
    "dijit/popup",
    "dijit/form/DropDownButton",
    "dijit/DropDownMenu",
    "dijit/MenuItem"
], function(
    ready,
    dom,
    PopupManager,
    DropDownButton,
    DropDownMenu,
    MenuItem
) {

    ready(function() {

        // set z-index
        PopupManager._beginZIndex = 1005;

        var menu = new DropDownMenu();
        var menuItem1 = new MenuItem({
            label: "Export to Excel",
            onClick: function () { alert('Export to Excel'); }
        });

        var menuItem2 = new MenuItem({
            label: "Export to PDF",
            onClick: function () { alert('Export to PDF'); }
        });

        var menuItem3 = new MenuItem({
            label: "Term Sheet",
            onClick: function () { alert('Term Sheet'); }
        });

        menu.addChild(menuItem1);
        menu.addChild(menuItem2);
        menu.addChild(menuItem3);

        var button = new DropDownButton({
            label: "Document",
            name: "dcment",
            dropDown: menu,
            id: "tvButton"
        });

        button.startup();
        button.placeAt(dom.byId("dropDownButtonDc"));

        $("#dialog1").dialog({ title: "dialog1"});

    });
});​

这篇关于jquery ui对话框中的dojo下拉按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！