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

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

4 голосов
/ 02 февраля 2011

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

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

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

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

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

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

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

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

Ответы [ 3 ]

5 голосов
/ 02 февраля 2011

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

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

См. Пример.

1 голос
/ 02 февраля 2011

Если вы хотите использовать актуальные функции 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/

1 голос
/ 02 февраля 2011

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

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

...