Dojo - Jak programowo utworzyć okno dialogowe ToolTip na łączu kliknij

Question

Jak mówi tytuł. Chcę utworzyć TooltipDialog, po kliknięciu łącza i załadowaniu niestandardowej treści do tego okna dialogowego. Treść podpowiedzi jest kompletnym symbolem zastępczym, po prostu nie zrobiłem żadnej logiki serwera, aby sobie z tym poradzić. Do tej pory mam do tego punktu:

  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> 

Nie chodzi nawet jak załadować zawartość, do dialogu, ale jak otworzyć go w pierwszej kolejności?

Po więcej googling i procesu & błędu I w końcu do tego:

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

To jakoś działa. ToolTipDialog otwiera, ale .. Muszę kliknąć dwa razy i nie mogę zamknąć okna dialogowego po kliknięciu poza nim lub po myszy.

Ok to zacznie wyglądać jak dzienniku dev, ale mam nadzieję, że będzie to zaoszczędzić innym trochę headchace:

końcu udało mi się popup go gdzie chcę:

  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> 

Należy zauważyć, że I” m przy użyciu Asp .NET MVC. Teraz pozostaje już tylko zamknąć cholerstwa w przyjazny dla użytkownika sposób ..

Answer 1

Istnieją dwa sposoby AFAIK można to zrobić, a nie jeden jest bardzo elegancki tbh :-P

Pierwszym jest użycie dijit.popup.open() i close(), aby pokazać i ukryć okno dialogowe. W tym przypadku musisz podać żądane współrzędne. widzę, że tylko podać funkcję PreviewThread z id wątku, ale zakładając, że również dołączać obiektu zdarzenia, można zrobić:

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

Kiedy używasz tej metody, trzeba także ręcznie blisko popup, na przykład po kliknięciu czegoś na zewnątrz. Oznacza to, że potrzebujesz gdzieś odniesienia do twojej diody narzędziowej, na przykład Jaxi.tooltip, tak jak zrobiłem to powyżej. (Nota boczna: dijit.TooltipDialog jest w rzeczywistości singletonem, więc na twojej stronie nie będzie wielu ukrytych podpowiedzi). Zwykle kończę z czymś podobnym do ukrywania okien dialogowych z podpowiedziami.

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

Może to oczywiście nie zadziałać, więc musisz wymyślić coś, co pasuje do Twojego konkretnego układu.

Drugi sposób polega na użyciu dijit.form.DropDownButton, ale stylizowaniu go tak, jakby był łączem. Nie zamierzam wdawać się w szczegóły na ten temat, wystarczy utworzyć instancję DropDownButton na twojej stronie i użyć narzędzia Firebug, aby zmodyfikować go tak, aby wyglądał jak zwykłe linki. FYC, link to DropDownButton reference guide.

Answer 2

Możesz spróbować:

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

To będzie zamknąć okno jak najszybciej moove myszką z okna.

Sprawdź API dla wszystkich możliwych zdarzeń: http://dojotoolkit.org/api/