如何在动态位置显示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}); 
    }); 
}); 

---

然后我们可以添加定位，比如y OU它希望将按钮的右侧，然后使用.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}); 
    }); 
}); 

You can try an example here，它有确切的标记和代码我已经在上面了，并且here's a test version to ensure it works with scrolling。