0

Dijit 的新手。我希望有一个页面，多个对话框将共存于同一页面中。写完之后：

<!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>

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

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

4

1 回答 1

0

与其说是焦点，不如说是 z-indexes 的“问题”。对话框是模态的，并且不希望任何其他人同时具有焦点，因此它会在您无法单击的底层上提升自己。

考虑一下这个小提琴并弄乱它：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)
于 2012-05-13T10:33:28.997 回答