我如何在動態位置顯示一個jqueryUI

Question

我想在單擊按鈕時在按鈕旁邊顯示一個jquery對話框。

我有：

<input type="button" name="test" value="i" 
onclick="$('<div></div>').html('test message').dialog(
{title: 'Test Dialog',modal: false, width: 200, height:140, resizable:false});" 
/>

我不認為我可以在json定義中進行函數調用？

我可以使用jquery（從事件中）獲取鼠標的位置，並且很高興將其用作顯示位置或按鈕的位置。

任何建議歡迎。

Answer 1

首先，如果可能的話，可以在標記之外進行操作，這樣會容易得多，因此：

<input type="button" name="test" value="i" 
onclick="$('<div></div>').html('test message').dialog(
{title: 'Test Dialog',modal: false, width: 200, height:140, resizable:false});" 
/>

將會：

<input type="button" name="test" value="i" />

使用此腳本：

$(function() {
  $("input[name='test']").click(function() {
    $('<div></div>').html('test message')
       .dialog({title: 'Test Dialog',
                modal: false, 
                width: 200, 
                height:140, 
                resizable:false});
  });
}); 

---

然后，我們可以添加定位，比如說要在按鈕的右側，然后使用.offset()獲取按鈕的位置，然后添加.outerWidth()使其顯示在右側，如下所示：

$(function() {
  $("input[name='test']").click(function() {
    var pos = $(this).offset(),
        top = pos.top - $(document).scrollTop(); //minus amount scrolled down
    $('<div></div>').html('test message')
       .dialog({title: 'Test Dialog',
                modal: false, 
                width: 200, 
                height:140, 
                position: [pos.left + $(this).width(), top],
                resizable:false});
  });
}); 

您可以在此處嘗試一個示例 ，它具有我上面具有的確切標記和代碼， 這是一個測試版本，以確保它可以與scrolling一起使用 。