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/
精彩评论