Прикрепить диалоговое окно jQuery к текстовому полю и заставить его исчезнуть, когда пользователь щелкнет что-то еще?

Мне нравится виджет jQuery DatePicker. Очень удобно, когда пользователь щелкает поле даты в моем веб-приложении, пользователь видит диалоговое окно, позволяющее ему выбрать дату.

Что еще лучше, так это то, что средство выбора даты настолько ненавязчиво. Если пользователь не хочет использовать средство выбора даты, он может легко ввести дату самостоятельно. Кроме того, средство выбора даты автоматически исчезает, когда пользователь щелкает что-либо, не являющееся средством выбора даты, или перемещает фокус на другое поле.

Я хотел бы иметь ту же функциональность с диалоговым окном jQuery. По сути, я хочу создать диалог с некоторыми виджетами, которые пользователь может использовать для выбора значения для текстового поля.

Я хочу, чтобы диалоговое окно автоматически появлялось под текстовым полем при выборе поля. Я хочу, чтобы он автоматически исчезал после того, как пользователь переместил фокус в другое место.

Для этого я прикрепил обработчик к событию текстового поля .focus в jQuery, чтобы появилось диалоговое окно. Это прекрасно работает. :-)

Я попытался добавить обработчик к событию .blur, чтобы диалоговое окно автоматически закрывалось, когда пользователь уходит куда-то еще. Однако простое открытие диалогового окна вызывает срабатывание события blur, закрывая его :-/

Кроме того, я не знаю, как сделать так, чтобы диалоговое окно отображалось непосредственно под текстовым полем так же, как это делает средство выбора даты.

Как сделать так, чтобы диалоговое окно jQuery отображалось рядом с текстовым полем и исчезало соответствующим образом, как средство выбора даты?


datepicker jquery jquery-ui jquery-ui-datepicker jquery-ui-dialog
person Vivian River    schedule 02.02.2011    source источник

Ответы (3)


arrow_upward
5
arrow_downward

См. пример следующего здесь.

Во-первых, чтобы диалоговое окно отображалось под вводом, используйте 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();
    }
}

См. пример.

person mVChr    schedule 02.02.2011
comment
Похоже, мой браузер возвращает 16 вместо $('#input').height(), но $('#input').left не определено, как и top. - person Vivian River; 02.02.2011
comment
$('#input').offset().left и .top - person mVChr; 03.02.2011

arrow_upward
1
arrow_downward

я не могу дать прямой ответ. но моя первая попытка - посмотреть, как DatePicker справляется с позицией здесь

как мне кажется, виджет динамически генерируется по мере необходимости, а не размещается там с самого начала.

person Benjamin Seiller    schedule 02.02.2011

arrow_upward
1
arrow_downward

Если вы хотите использовать настоящие функции jQuery UI-Dialog, вот один из способов:

$('#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/

person Ken Redler    schedule 02.02.2011
comment
Как сделать так, чтобы диалоговое окно исчезало, если пользователь уходит от текстового поля с помощью клавиши [TAB]? - person Vivian River; 03.02.2011
comment
Вы можете активировать close в диалоговом окне для события blur... но похоже, что вы все ближе и ближе приближаетесь к требованию типа всплывающей подсказки. - person Ken Redler; 03.02.2011