开发者

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

开发者 https://www.devze.com 2023-04-09 02:26 出处:网络
I\'m placing a textbox in the titlebar of my jQuery UI dialog. Unfortunately, it is disabled (or otherwise unclickable) when in the titlebar.

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

精彩评论

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

关注公众号