如何使用懸停和ajax內容的webui-popover

Question

我嘗試使用popover https://github.com/sandywalker/webui-popover。我需要'quora'彈出窗口功能：鏈接應該是可點擊的，但懸停應該顯示帶有加載內容的Ajax的彈出窗口。

---

我試過如下：

$(function(){ 
    function details_in_popup(link, div_id){ 
     $.ajax({ 
      url: link, 
      success: function(response){ 
       $('#'+div_id).html(response); 
      } 
     }); 
     return '<div id="'+ div_id +'">Loading...</div>'; 
    } 

    $('a.user_popover').livequery(function(){ 
     var link = 'your_url_there'; 
     $(this).webuiPopover({ 
     content: function(data){ 
      var div_id = "tmp-id-" + $.now(); 
      return details_in_popup(link, div_id); 
     }, 
     placement: 'bottom', 
     trigger: 'hover', 
     cache: false 
     }); 
    }) 
    }) 

Answer 1

您可以添加URL通過數據的Ajax請求屬性data-url或url參數時初始化WebUI中，然後設置trigger參數與懸停。

像這樣

(function($){ 
    $('a.user_popover').webuiPopover({ 
     title:'Sample', 
     placement: 'bottom', 
     trigger:'hover', 
     type:'async',//content type, values:'html','iframe','async' 
     url: 'your_url_there' 
    }); 
})(jQuery);