制作可拖动的jquery对话框，隐藏标题栏

Make draggable jquery dialog, with the titlebar hidden

本文关键字：对话框 隐藏 标题栏 jquery 拖动      更新时间：2023-09-26

我希望创建一个没有标题栏的对话框，仍然可以通过内容窗格拖动。我可能会将可拖动事件附加到按钮/句柄上，但我更愿意在不需要它的情况下拖动对话框，并在内容窗格上将光标更改为正确的可拖动指针。

这里是迄今为止简化的代码

$('#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>");
}
                });

如果你所做的只是删除使它成为对话框的东西，为什么你需要一个对话框窗格?

创建一个没有标题的对话框

var dialog = {
     init: function(){
          $('#prototypeCalendarDialog').draggable().resizeable();
          return this;
     },
     runOpen: function(){
         //in here put all your dialog open options
         return this;
     }
}
dialog.init().runOpen();

把它放到你的CSS中

.ui-dialog-titlebar{
 display:none !important;
}
相关文章：