Блог

Главная - Вопросы по программированию - Создать перетаскиваемый диалог jquery со скрытой строкой заголовка

Создать перетаскиваемый диалог jquery со скрытой строкой заголовка

#javascript #jquery

#javascript #jquery

Вопрос:

Я хочу создать диалоговое окно без строки заголовка, которое все еще можно перетаскивать через панель содержимого. Возможно, я мог бы прикрепить событие перетаскивания к кнопке / дескриптору, но я бы предпочел перетаскивать диалоговое окно без необходимости в этом и изменить курсор на правильный указатель перетаскивания при наведении на панель содержимого..

вот код, который пока упрощен 

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

Ответ №1:

зачем вам нужна диалоговая панель, если все, что вы делаете, это удаляете элементы, которые делают ее диалоговой.

сделайте диалог без заголовка, вы можете сделать это:

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

dialog.init().runOpen();

Комментарии:

1. Хорошая мысль, но, возможно, ему это нужно, чтобы использовать другие параметры диалога.

2. @hussein приведенный выше код не идеален, но его можно полностью расширить

3. Рекомендации по корпоративному дизайну не всегда могут быть такими, какие вам нравятся, но вам все равно придется их придерживаться:-(

Ответ №2:

Поместите это в свой CSS

 .ui-dialog-titlebar{
 display:none !important;
}