Dojo - Come creare una finestra di dialogo ToolTip sul collegamento clicca su

Question

Come dice il titolo. Voglio creare TooltipDialog, dopo aver fatto clic sul collegamento e caricato il contenuto personalizzato in quella finestra di dialogo. Il corpo del tooltip è un segnaposto completo, non ho fatto alcuna logica server per gestirlo. Finora ho ottenuto fino a questo punto:

  PreviewThread: function (ThreadID) { 

      var tooltip = new dijit.TooltipDialog({ 
       href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation 
      }); 
     }, 

<a href="javascript:Jaxi.PreviewThread(@thread.ThreadID)" class="preview-thread" id="@tp.ToString()">Preview</a> 

Il punto non è nemmeno come caricare contenuti, nella finestra di dialogo, ma come per aprirlo in primo luogo?

Dopo più googling e il processo & errore ho finalmente avuto modo di questo:

  PreviewThread: function (ThreadID) { 

      var tooltip = new dijit.TooltipDialog({ 
       href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation, 
       closable: true 
      }); 
      dojo.query(".thread-preview").connect("onclick", function() { 
       dijit.popup.open({ popup: tooltip, around: this }); 
      });    
     }, 

E 'in qualche modo lavorare. ToolTipDialog si apre, ma .. Devo fare clic due volte e non riesco a chiudere la finestra di dialogo dopo aver fatto clic all'esterno di esso, o dopo il mouseleave.

Ok questo, intenzione di iniziare a guardare come log dev, ma speriamo che salvare gli altri un po 'headchace:

sono finalmente riuscito a popup è dove voglio:

  PreviewThread: function (ThreadID) { 

      var tooltip = new dijit.TooltipDialog({ 
       href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation, 
       closable: true 
      }); 

      dijit.popup.open({ popup: tooltip, around: dojo.byId("thread-preview-" + ThreadID) }); 
     }, 
<a href="javascript:Jaxi.PreviewThread(@thread.ThreadID)" id="@tp.ToString()" >Click Me</a> 

Si noti che ho' m usando Asp .NET MVC. Ora unica cosa rimasta è quella di chiudere bel niente in maniera facile da usare ..

Answer 1

Ci sono due modi per quanto ne so si può fare questo, e nessuno dei due è molto elegante tbh :-P

Il primo è quello di utilizzare dijit.popup.open() e close() per mostrare e nascondere la finestra di dialogo. In questo caso, è necessario fornire le coordinate desiderate. Vedo che forniscono solo la funzione PreviewThread con un ID di thread, ma assumendo dovete aggiungere anche sull'oggetto dell'evento, si può fare:

PreviewThread: function (ThreadID, event) { 

    Jaxi.tooltip = new dijit.TooltipDialog({ 
     href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation 
    }); 
    dijit.popup.open({ 
     popup: Jaxi.tooltip, 
     x: event.target.pageX, 
     y: event.target.pageY 
    }); 
} 

Quando si utilizza questo metodo, si hanno anche per chiudere manualmente il popup, ad esempio quando si fa clic su qualcosa all'esterno. Ciò significa che hai bisogno di un riferimento alla tua descrizione del tooltip da qualche parte, ad esempio Jaxi.tooltip come ho fatto sopra. (Nota a margine: dijit.TooltipDialog è in realtà un singleton, quindi non ci saranno molti suggerimenti nascosti nella tua pagina). Di solito finisco con qualcosa di simile per nascondere le finestre di dialogo dei suggerimenti.

dojo.connect(dojo.body(), "click", function(event) 
{ 
    if(!dojo.hasClass(event.target, "dijitTooltipContents")) 
     dijit.popup.close(Jaxi.tooltip); 
}); 

Questo ovviamente non funziona per voi, quindi dovrete capire qualcosa che si adatta alle vostre disposizioni particolari.

Il secondo modo consiste nell'utilizzare il dijit.form.DropDownButton, ma come se si trattasse di un collegamento. Non ho intenzione di entrare nei dettagli di questo, basta istanziare un DropDownButton sulla tua pagina e usare Firebug per modificarlo fino a che non assomigli ai tuoi link regolari. FYC, link to DropDownButton reference guide.

Answer 2

Si può provare:

PreviewThread: function (ThreadID) { 

     var tooltip = new dijit.TooltipDialog({ 
      href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation, 
      closable: true, 
      onMouseLeave: function(){dijit.popup.close(tooltip);} 
     }); 

     dijit.popup.open({ popup: tooltip, around: dojo.byId("thread-preview-" + ThreadID) }); 
}, 

Questo chiude la finestra di dialogo, non appena si Moove il mouse fuori della finestra di dialogo.

Controllare le API per tutti gli eventi possibili: http://dojotoolkit.org/api/