将jQuery对话框附加到文本字段，并在用户单击其他内容时使其消失？

我喜欢jQuery DatePicker小部件。当用户点击我的Web应用程序中的日期字段时，用户会看到一个允许她选择日期的对话框，这非常方便用户使用。将jQuery对话框附加到文本字段，并在用户单击其他内容时使其消失？

什么更好的是日期选择器是如此不显眼的方式。如果用户不想使用日期选择器，她可以轻松地自行输入日期。此外，当用户点击任何不是日期选择器或将焦点移到另一个字段时，日期选择器会自动消失。

我想要做的是与jQuery对话框具有相同的功能。基本上，我想创建一个对话框，其中包含一些用户可以用来为文本字段选择值的小部件。

我希望对话框在选择字段时自动出现在文本字段下。我希望它在用户将焦点转移到其他地方后自动消失。

为了做到这一点，我在jQuery中的文本字段.focus事件中附加了一个处理程序，以使对话框显示。这工作正常。 :-)

我已经尝试在.blur事件中添加一个处理程序，以便在用户去其他地方时自动关闭对话框。然而，只是打开对话框导致blur事件触发，关闭它： -/

此外，我不知道有什么办法使对话框直接出现在文本字段下，就像datepicker一样。

如何使jQuery对话框出现在文本字段旁边并像日期选择器一样正常消失？

来源

2011-02-02 Daniel Allen Langdon

See example of the following here.

首先，使对话框出现在输入下，使用position:absolute和jQuery的.offset()方法来找到问题的输入的位置值分配给对话框的位置。例如：

$('#input').focus(function(e){ 
    var $t = $(this), 
     $d = $('#dialog'), 
     to = $t.offset(); 

    $d.css({ 
     'position':'absolute', 
     'top':to.top + $t.height() + 4, 
     'left':to.left 
     }) 
     .show(); 
});

在上文中，我通过将输入的顶部值加到输入的高度加上一个4像素缓冲器位于对话框。

其次，如果事件目标是对话框或输入，则隐藏对话框，将单击处理程序附加到不隐藏对话框的文档。像这样：

$(document).click(function(e){ 
    if (e.target.id !== "dialog" && e.target.id !== "input") { 
     $('#dialog').hide(); 
    } 
}

See example.

来源

2011-02-02 20:33:57 mVChr

这似乎是我的浏览器返回`16`的`$（'＃输入'）.height（）`，但`$（'＃input'）。left`是未定义的，就像`top`一样。 – 2011-02-02 20:53:15

`$（'＃input'）。offset（）。left`和`.top` – mVChr 2011-02-02 21:38:42

我不能直接回答。但我第一次尝试是来查找的DatePicker如何做它似乎对我的位置here

的伎俩，需要，而不是从一开始就摆在那里的时候动态生成的小部件。

来源

2011-02-02 20:34:53

如果你想用实际的jQuery UI的对话功能，这里有一个方法：

$('#main').find('input').click(function(e) { 
    var $box = $('<div class="box" />').html('In dialog'); // make a dialog 
    var xpos = $(this).position().left; // get position of clicked field 
    var ypos = $(this).position().top + 20; 
    $box.dialog({ // trigger the dialog 
     position: [xpos, ypos], // position it relative to clicked object 
     close: function() { // destroy on close for neatness 
      $(this).dialog('destroy'); 
     } 
    }).mouseleave(function() { // if you mouseout: 
     $(this).dialog('close'); // close the dialog 
    }); 
});

例子：http://jsfiddle.net/redler/dAr69/

来源

2011-02-02 20:55:30

将jQuery对话框附加到文本字段，并在用户单击其他内容时使其消失？

回答

相关问题