Dojo - Cách lập trình Hộp thoại ToolTip trên liên kết, hãy nhấp vào

Question

Như tiêu đề cho biết. Tôi muốn tạo TooltipDialog, sau khi tôi nhấp vào liên kết và tải nội dung tùy chỉnh vào hộp thoại đó. Phần thân tooltip là trình giữ chỗ hoàn chỉnh, tôi chưa thực hiện bất kỳ logic máy chủ nào để xử lý điều này. Cho đến nay tôi đã nhận đến thời điểm này:

  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> 

Điểm thậm chí không làm thế nào để tải nội dung, vào hộp thoại, nhưng làm thế nào để mở nó ở nơi đầu tiên?

Sau hơn googling và thử nghiệm & lỗi cuối cùng tôi đã đến đây:

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

Nó bằng cách nào đó làm việc. ToolTipDialog mở ra, nhưng .. Tôi phải bấm hai lần và tôi không thể đóng hộp thoại sau khi bấm vào bên ngoài nó, hoặc sau khi mouseleave.

Ok này, sẽ bắt đầu trông giống như log dev, nhưng hy vọng nó sẽ tiết kiệm được những người khác một số headchace:

Cuối cùng tôi quản lý để bật lên nó, nơi tôi muốn:

  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> 

Lưu ý rằng tôi m sử dụng Asp .NET MVC. Bây giờ chỉ điều còn lại là đóng damn thing theo cách thân thiện với người dùng ..

Answer 1

Có afaik hai cách bạn có thể làm điều này, và không ai là rất thanh lịch tbh :-P

Đầu tiên là để sử dụng dijit.popup.open() và close() để hiển thị và ẩn hộp thoại. Trong trường hợp này, bạn phải cung cấp tọa độ mong muốn. Tôi thấy rằng bạn chỉ cung cấp chức năng PreviewThread của bạn với một thread id, nhưng giả sử bạn cũng tack trên đối tượng sự kiện, bạn có thể làm:

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

Khi bạn đang sử dụng phương pháp này, bạn cũng phải tự đóng cửa sổ bật lên, ví dụ khi một cái gì đó bên ngoài được nhấp vào. Điều này có nghĩa là bạn cần tham chiếu đến chú giải công cụ của bạn ở đâu đó, ví dụ: Jaxi.tooltip như tôi đã làm ở trên. (Lưu ý phụ: dijit.TooltipDialog thực sự là một singleton, do đó sẽ không có nhiều chú giải công cụ ẩn xung quanh trang của bạn). Tôi thường kết thúc với một cái gì đó như thế này cho ẩn hộp thoại tooltip của tôi.

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

Điều này có thể không phù hợp với bạn, vì vậy bạn sẽ phải tìm ra điều gì đó phù hợp với sắp xếp cụ thể của mình.

Cách thứ hai là sử dụng dijit.form.DropDownButton, nhưng tạo kiểu cho nó như thể nó là một liên kết. Tôi sẽ không đi vào chi tiết về điều này, chỉ cần nhanh chóng một DropDownButton trên trang của bạn và sử dụng Firebug để tinh chỉnh nó cho đến khi nó trông giống như các liên kết thường xuyên của bạn. FYC, link to DropDownButton reference guide.

Answer 2

Bạn có thể thử:

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

này sẽ đóng hộp thoại ngay sau khi bạn Moove chuột ra khỏi hộp thoại.

Kiểm tra các API cho tất cả các sự kiện có thể: http://dojotoolkit.org/api/