將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對話框附加到文本字段，並在用戶單擊其他內容時使其消失？

回答

相關問題