开发者

jQuery UI Dialog - Input textbox in the titlebar is disabled?

I'm placing a textbox in the titlebar of my jQuery UI dialog.

Unfortunately, it is disabled (or otherwise unclickable) when in the titlebar.

How can I change this so that my text box is enabled?

var $dialog = $('#dlgsearch')
    .dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        draggable: false,
        maxWidth:600,
     开发者_如何学编程   maxHeight: 500,
        width: 600,
        height: 500,
        title: 'Text Search:<input type="text" id="input_search" maxlength="255">'
    });
});


It looks like the title bar's draggable attribute (even when set to false) is causing the issue of not being able to focus on the textbox. One way around this is to simply add the textbox after the title bar area as soon as the dialog opens and then position it back to the top with absolute coordinates like so:

title: 'Text Search: ',
    open: function(event, ui) {
        $('.ui-dialog-titlebar').after('<input type="text" id="input_search" 
            maxlength="255" style="position:absolute;top:13px;left:135px;">');
     },

I set up an example here: http://jsfiddle.net/nemVr/2/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜