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

Question

我喜欢jQuery DatePicker小部件.用户非常友好,当用户点击我的Web应用程序中的日期字段时,用户会看到一个允许她选择日期的对话框.

更糟糕的是,日期选择器是如此不引人注目的方式.如果用户不想使用日期选择器,她可以轻松地自己键入日期.此外,当用户点击不是datepicker的任何内容或将焦点转移到另一个字段时,datepicker会自动消失.

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

我希望在选择字段时,对话框会自动显示在文本字段下方.我希望它在用户将焦点转移到其他位置后自动消失.

为了实现这一点,我.focus在jQuery中为文本字段事件附加了一个处理程序,以使对话框显示.这很好.:-)

我已经尝试为.blur事件添加处理程序,以便在用户转到其他位置时自动关闭对话框.但是,仅打开对话框会导致blur事件触发,关闭它: - /

此外,我不知道如何使对话框直接显示在文本字段下面,与datepicker的方式相同.

如何在文本字段旁边显示jQuery对话框并像datepicker一样消失？

Answer 1

请参阅以下示例.

首先,要使对话框显示在输入下方,请使用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();
});

在上面,我通过将输入的最高值添加到输入的高度加上4px缓冲区来定位对话框.

其次,要隐藏对话框,请在文档中附加单击处理程序,如果事件目标是对话框或输入,则不会隐藏对话框.像这样:

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

见例子.