Dojo: cómo crear programáticamente Diálogo de información sobre herramientas en el enlace, haga clic en

Question

, como dice el título. Quiero crear TooltipDialog, después de hacer clic en el enlace y cargar contenido personalizado en ese cuadro de diálogo. El cuerpo de información sobre herramientas es marcador de posición completo, simplemente no he hecho ninguna lógica de servidor para manejar esto. Hasta el momento llegué a este 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> 

El punto no es aún la forma de cargar el contenido, en diálogo, pero la forma de abrirlo en el primer lugar?

Después de más googlear y el juicio & error por fin llegué a esto:

  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 }); 
      });    
     }, 

es de alguna manera de trabajar. Se abre ToolTipDialog, pero ... Tengo que hacer clic dos veces y no puedo cerrar el cuadro de diálogo después de hacer clic fuera de él, o después de mouseleave.

Ok esto, va a empezar a ver como el registro de dev, pero espero que salvar a otros alguna headchace:

fin he conseguido emergente es donde quiero:

  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> 

Tenga en cuenta que yo' m usando Asp .NET MVC. Ahora lo único que queda es cerrar maldita cosa en manera fácil de usar ..

Answer 1

Hay dos maneras que yo sepa que puede hacer esto, y ninguno de los dos es muy elegante TBH :-P

La primera es utilizar dijit.popup.open() y close() para mostrar y ocultar el diálogo. En este caso, debe proporcionar las coordenadas deseadas. veo que sólo proporciona su función PreviewThread con un ID del tema, pero asumiendo también virar en el objeto de evento, que puede hacer:

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 
    }); 
} 

Al utilizar este método, también se tiene que cerrar manualmente la ventana emergente, por ejemplo, cuando se hace clic en algo externo. Esto significa que necesita una referencia a su tooltip dijit en algún lugar, por ejemplo Jaxi.tooltip como lo hice anteriormente. (Nota al margen: dijit.TooltipDialog es en realidad un singleton, por lo que no habrá muchas herramientas ocultas en su página). Por lo general, termino con algo como esto para ocultar mis diálogos de información sobre herramientas.

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

Por supuesto, esto puede no funcionar para usted, por lo que tendrá que averiguar algo que se adapte a su disposición particular.

La segunda forma es usar dijit.form.DropDownButton, pero con un estilo como si fuera un enlace. No voy a entrar en detalles sobre esto, simplemente instale un DropDownButton en su página y use Firebug para ajustarlo hasta que se vea como sus enlaces regulares. FYC, link to DropDownButton reference guide.

Answer 2

Puede intentar:

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) }); 
}, 

esto se cerrará el cuadro de diálogo tan pronto como se MOOVE el ratón fuera de la ventana de diálogo.

Comprobar la API para todos los eventos posibles: http://dojotoolkit.org/api/