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>

ページは正常に読み込まれますが、最初のウィジェットが他のウィジェットの上に読み込まれ、2 番目のウィジェットをクリックできません。最初のウィジェットを閉じるときにのみ、ページは同じウィジェットにフォーカスします (そして、それを使用できます)。

どちらか一方を閉じずに両方のウィジェットを何らかの方法でロードして使用できるようにすることはできますか? ありがとうございます

4

1 に答える 1

0

それはそれほど焦点ではなく、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)
于 2012-05-13T10:33:28.997 に答える