Question

Dijit的Newstarter。我希望有一个页面是多个对话框将在同一页面中共存。写完之后：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>widgets</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" media="screen">
    <style>
        #dialog { min-width: 300px; }
    </style>
    <!-- load dojo and provide config via data attribute -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
            data-dojo-config="has:{'dojo-debugging-messages':true}, parseOnLoad: false, foo: 'bar', async: true">

    </script>
            <script>
            function load_widgets()
            {
                    similar_users_widget();
                    in_silico_widget();

                    require([ "dijit/focus" ], function(focusUtil){
                      var activeElement = focusUtil.curNode; // returns null if there is no focused element
                      alert(activeElement);
                    });                        
            }

            function in_silico_widget()
            {
                // Require the registry, parser, Dialog, and wait for domReady
                require(["dijit/registry", "dojo/parser", "dijit/Dialog", "dojo/domReady!",'dojo/_base/json'], function(registry, parser)
                {
            dojo.parser.parse();
            var dialog = registry.byId("in_silico_dialog");
                            var content = "Another widget";

            dialog.set("content", '<pre>' + 'Test<br>' + content + '</pre>');
            dialog.show();
                });
            }

            function similar_users_widget()
            {
                var json;

                require(["dojo/_base/xhr"], function(xhr)
                {
                    // get some data, convert to JSON
                    xhr.get({
                        url:"http://localhost:8080/DojoPlay/SocialNetworkAnalysis?op=retrieve_similar_users",
                        handleAs:"json",
                        load: function(data){
                           json = data;
                        }
                    });
                });

                // Require the registry, parser, Dialog, and wait for domReady
                require(["dijit/registry", "dojo/parser", "dijit/Dialog", "dojo/domReady!",'dojo/_base/json'], function(registry, parser)
                {
            dojo.parser.parse();
            var dialog = registry.byId("similar_users_dialog");
                            var content = "";

                            var h = json.people[0];
                            for (var k in h) {
                                // use hasOwnProperty to filter out keys from the Object.prototype
                                if (h.hasOwnProperty(k)) {
                                    content+="key is: " + k + ", value is: " + h[k] + "\n";
                                }
                            }

            dialog.set("content", '<pre>' + 'Test<br>' + content + '</pre>');
            dialog.show();
                });
            }

            require([ "dijit/focus" ], function(focusUtil){
              var handle = focusUtil.watch("curNode", function(name, oldValue, newValue){
                console.log("Focused node was", oldValue, "now is", newValue);
             });
            });

    </script>
</head>
    <body class="claro" onload="load_widgets();">
    <h1>Demo: widgets</h1>
    <div id="similar_users_dialog" data-dojo-type="dijit.Dialog" data-dojo-props="title: 'User suggestions'"></div>
    <div id="in_silico_dialog" data-dojo-type="dijit.Dialog" data-dojo-   props="title: 'In-silico dialog'"></div>                
</body>
</html>

页面加载正常，但第一个窗口小部件加载在另一个窗口之上，我无法单击第二个窗口小部件。只有在关闭第一个窗口时，页面才会关注同一个窗口小部件（然后我可以使用它）。

我是否可以在不关闭其中任何一个的情况下以某种方式加载和使用这两个小部件？谢谢大家

Answer 1

它不是焦点，而是z-index的“问题”。一个对话框是模态的，并且不希望任何其他对象同时具有焦点，因此它会自动提升到你无法点击的底层。

考虑这个小提琴并弄乱它：http://jsfiddle.net/seeds/Z8Afg/2/

只要在对话框中调用.show（），就可以使用以下代码。你唯一需要知道的是'dia1'和'dia2';

var dia1 = registry.byId("similar_users_dialog");
var dia2 = registry.byId("in_silico_dialog");
dia1.show()    
dia2.show();
var index1 = dojo.style(dia1.domNode, "zIndex");
var index2 = dojo.style(dia2.domNode, "zIndex");
var lowerindex = Math.min(parseInt(index1), parseInt(index2));
console.log('indexes:', index1, index2, lowerindex)
// get underlay from dialog which is topmost (the latter .show() call)
underlay = dojo.byId(dia2.underlayAttrs.dialogId + dia2.underlayAttrs["class"]).parentNode;
// set underlay zIndex to 1 lower then the minimum (first dialog to receive .show() call)
dojo.style(underlay, "zIndex", lowerindex - 1)

Dijit Widgets在同一页面上

1 个答案: