2016-07-14 8 views
2

Ich möchte dojo select in einem Dijit/TooltipDialog anzeigen. Die Artikel der dojo select werden dynamisch geladen. Also möchte ich diese select programmatisch hinzufügen. Der Inhalt von TooltipDialog kann ein Objekt sein, aber wählen Sie muss einen DomNode gehalten werden. Der Code ist:Wie "Auswahl" in Dojo Tooltipdialog Inhalt programmgesteuert hinzufügen?

<head> 
    <script> 
     require([ 
      "dojo/parser", 
      "dijit/form/Select", 
      "dijit/TooltipDialog", 
      "dojo/on", 
      "dojo/dom", 
      "dojo/_base/lang", 
      "dijit/popup", 
      "dojo/data/ObjectStore", 
      "dojo/store/Memory", 
      "dojo/domReady!" 
     ], function(parser,Select,TooltipDialog,on,dom,lang,popup, ObjectStore, Memory){ 
      parser.parse(); 
      var t={mySel:null}; 



      var store = new Memory({ 
       data: [ 
        { id: "foo", label: "Foo" }, 
        { id: "bar", label: "Bar" } 
       ] 
      }); 

      var os = new ObjectStore({ objectStore: store }); 

      t.mySel = new Select({ 
       store: os 
      }, "ttt"); 
      var myTooltipDialog = new TooltipDialog({ 
       content: t, 
       onMouseLeave: function(){ 
        popup.close(myTooltipDialog); 
       } 
      }); 
      on(dom.byId("mmm"),"mouseover" ,lang.hitch(this,function(e){ 

       popup.open({ 
        popup: myTooltipDialog, 
        orient: ["above-centered","above","below"], 
        around:dom.byId('mmm') 

       }); 
       t.mySel.startup(); 
      })); 
      t.mySel.on("change", function(){ 
       console.log("my value: ", this.get("value")) 
      }) 

     }) 
    </script> 

</head> 
<body class="claro"> 

    <div id="ttt" > tttt</div><br> 
    <div id="mmm" > tttt</div><br> 
</body> 
+0

Benötigen Sie so smt? Könnten Sie bitte mehr Ihre Frage ausarbeiten? https://jsfiddle.net/bbwtraeo/ – GibboK

+1

Sie haben es fast richtig gemacht. Ändern Sie einfach die Zeile 'content: t,' in 'content: t.mySel,'. Es sollte funktionieren. Wenn Sie jedoch versuchen, die Option im Dropdown-Menü mit der Maus zu ändern, tritt das Ereignis onMouseLeave auf und Sie können es nicht ändern. Sie können die Option jedoch mit der Tastatur ändern. –

+0

Wie @TKambi vorgeschlagen hat, macht 'content: t.mySel' die Magie. Wenn Sie Ihre Auswahl innerhalb eines Tooltips platzieren möchten, müssen Sie sie nicht im DOM platzieren, um sie zu erstellen. –

Antwort

0

Du assignign ein Objekt t Tooltip Inhalt kein domenode

so versuchen, diese Änderung vorzunehmen:

var myTooltipDialog = new TooltipDialog({ 
    content: t.mySel.domNode, 
    onMouseLeave: function() { 
     popup.close(myTooltipDialog); 
    } 
}