开发者

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;
}
0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜