0

ツールチップ ウィジェットを動的に生成された dom ノードに接続するために、dojo のイベント委任を使用しています。

Dojo サイトでは、イベント委譲について次のように説明しています。

「イベント委任の背後にある考え方は、関心のある個々のノードのイベントにリスナーをアタッチする代わりに、より高いレベルのノードに単一のリスナーをアタッチすることです。これにより、キャッチしたイベントのターゲットをチェックして、それらがバブルしたかどうかを確認します対象の実際のノードから; その場合、ハンドラーのロジックが実行されます。」

以下は私のコードの実装です。それは美しく機能します...ただし、ツールチップは最初のマウスオーバーイベントの後にのみ表示されます。最初にノードにマウスオーバーすると、イベントは完全に発生しますが、ツールチップはレンダリングされません。結果として発生するマウスオーバー イベントのみが表示されます。最初のマウスオーバー イベントで、Firebug コンソールを監視し、xhr.get がデータベースに移動して正しいデータを取得することを確認できます。ツールチップをコメントアウトして単純な alert() を入れると、最初はうまくいきます。

最初のマウスオーバー イベントでツールチップを表示する方法について何か提案はありますか? 前もって感謝します！

<div class="col_section" id="my_groups">
    <div class="col_section_label">My Groups</div>
    <ul>
    <?php
        foreach($myGroups as $grp) {
            echo '<li><a class="myGroupLink" id="grp'.$grp['grp_id'].'">'.$grp['name'].'</a></li>';
        }
    ?>
    </ul>
</div>

<script>
    require(["dojo/on",
         "dojo/dom",
         "dijit/Tooltip",
         "dojo/_base/xhr",
         "ready!"], function(on, dom, Tooltip, xhr) {

    // Get Group ToolTip
    var myObject = {
        id: "myObject",
        onMouseover: function(evt){
            var grp_id = this.id;
            var content = '';
            xhr.get({
                url: "getGrpInfo.php",
                handleAs: "json",
                content: {
                    grp_id: grp_id,
                    content: "tooltip"
                },
                load: function(info) {
                    if(info == 0) {
                        content  = '<div class="grpToolTip">';
                        content += '    Information about this group is confidential';
                        content += '</div>';
                    } else {
                        content  = '<div class="grpToolTip">';
                        content += '    <img src="../ajax/getimg.php?id='+info.logo_id+'" />';
                        content += '    <div style="text-align:center">'+info.name+'</div>';
                        content += '</div>';
                    }

                    new Tooltip({
                        connectId: [grp_id],
                        label: content
                    });
                },
                error: function() {}
            });
        }
    };
    var div = dom.byId("my_groups");
    on(div,".myGroupLink:mouseover",myObject.onMouseover);
});
</script>
4

2 に答える 2

2

イベントが発生した時点では存在しないためTooltip、最初は表示されません。onmouseoveronmouseover

dijit/Tooltipインスタンスは自分のマウスイベントを自分で管理するので、onmouseover/を管理するonmouseout必要はありません。データをプリロードしたくない、またはツールチップが表示されるたびにデータをロードしたいので、おそらくそうしました。

インスタンスのほかに、ツールチップdijit/Tooltipを使用Tooltip.show(innerHTML, aroundNode, position)しTooltip.hide(aroundNode)て表示できますが、その場合は、マウスイベントを自分で管理する必要があります。これは、UXの観点からは、単一のツールチップを表示したくないため、次のことを行う必要があるためです。

  1. 情報がロードされていることを示すツールチップを表示します。

  2. 次に、次のいずれかを行います。

    • ユーザーがまだノードにカーソルを合わせている場合は、XHRで読み込まれた情報を表示します
    • XHRをキャンセルし、ツールチップを非表示にしますmouseout

実例は次のとおりです：http：//jsfiddle.net/phusick/3hmds/

require([
    "dojo/dom",
    "dojo/on",
    "dojo/_base/xhr",
    "dijit/Tooltip",
    "dojo/domReady!"
], function(
    dom,
    on,
    xhr,
    Tooltip
) {

    on(dom.byId("groups"), ".group-link:mouseover", function(e) {
        var target = e.target;
        Tooltip.show("Loading...", target);

        var def = xhr.post({
            url: "/echo/html/",
            content: { html: target.textContent},
            failOk: true,

            load: function(data) {
                Tooltip._masterTT.xhr = null;
                Tooltip._masterTT.containerNode.innerHTML = data;
                Tooltip._masterTT.domNode.width = "auto";
             },
            error: function(e) {
                if (e.dojoType != "cancel") {
                    console.error(e);
                }
            }
        });

        Tooltip._masterTT.xhr = def;            
    });

    on(dom.byId("groups"), ".group-link:mouseout", function(e) {
        var target = e.target;        
        Tooltip.hide(target);
        if (Tooltip._masterTT.xhr) {
            Tooltip._masterTT.xhr.cancel();
        }
    });    
});​
于 2012-06-08T14:25:34.980 に答える
1

いつものように、私は問題を考えすぎていました。ページが読み込まれたときにツールチップを作成するだけではなく、イベントの登録に重点を置いていました。だから、それは本当にばかげて簡単です：

  1. ノードのクエリ

  2. それらを繰り返し処理し、各ノードを指すツールチップを作成します。

    var myGroupsList = query("a.myGroupLink");    // query nodes based on class
array.forEach(myGroupsList,function(entry,i){ // iterate through

    var grp_id = entry.id;
    var content = '';
    xhr.get({                                 // get data via xhr.get
        url: "getGrpInfo.php",
        handleAs: "json",
        content: {
            grp_id: grp_id,
            content: "tooltip"
        },
        load: function(info) {
            if(info == 0) {
                content  = '<div class="grpToolTip">';
                content += '    Information about this group is confidential';
                content += '</div>';
            } else {
                content  = '<div class="grpToolTip">';
                content += '    <img src="../ajax/getimg.php?id='+info.logo_id+'" />';
                content += '    <div style="text-align:center">'+info.name+'</div>';
                content += '</div>';
            }

            new Tooltip({                     // create tooltip
                connectId: [entry.id],
                label: content
            });
        },
        error: function() {}
    });
});
于 2012-06-08T15:48:26.327 に答える