Make draggable jquery dialog, with the titlebar hidden
I am looking to create a Dialog with no titlebar that can still be draggable via the content-pane. I could possibly attach a draggable event to a button/handle but I would prefer to drag the dialog without the need for it and have the cursor change to the correct draggable pointer when over the content-pane..
heres the code so far simplified
$('#prototypeCalendarDialog').dialog({
autoOpen:true,
width:400,
height: 700,
show: "slide",
hide: "slide",
dialogClass: 'calendarDialog',
minWidth: 400,
minHeight: 500,
position: [0,112],
buttons: {
"Okay": function(){
$(this).dialog("close");
},
"Refresh": function() {
// refresh function here
},
"Next Day": function(){
// next day function here
}
},
open: function(){
var buttons = $('.calendarDialog .ui-dialog-buttonpane').children('button');
var titleBar = $('.calendarDialog .ui-dialog-titlebar').hide();
////ADD ICON CLASS ACCEPTANCE
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon-calendar');
////CHANGE THE BUTTONS DEFAULT STATE
$(buttons[0]).removeClass('ui-state-default').addClass('ui-state-submit');
////APPEND THE ICONS TO THE BUTTON
$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>");
$(buttons[1]).append("<span class='ui-icon ui-icon-refresh'></span>");
$(buttons[2]).append("<span class='ui-icon ui-icon-arrowthick-1-e'></span>");
}开发者_StackOverflow社区
});
why do you need a dialog pane if all you are doing is removing the things that make it a dialog.
do make a title-less dialog you can do this:
var dialog = {
init: function(){
$('#prototypeCalendarDialog').draggable().resizeable();
return this;
},
runOpen: function(){
//in here put all your dialog open options
return this;
}
}
dialog.init().runOpen();
Put this in your CSS
.ui-dialog-titlebar{
display:none !important;
}
精彩评论