portlet jQuery UI

Question

Sto cercando di creare pannelli che possono essere trascinati, ridimensionabili, pieghevoli, chiudibili e che possono essere ingranditi e ridotti a icona come segue.

Voglio anche una scroll per il contenuto del portlet, se il ridimensionamento trabocca il contenuto. Quando imposto lo overflow:auto, il rotolo arriva anche se il contenuto non sta straripando.

.portlet { 
    position: absolute; 
    overflow:auto !important; 
} 

si può avere guardare oltre il mio codice e demo qui panel code
Qualsiasi aiuto sarà apprezzato. Grazie in anticipo!!

Answer 1

Cambia il tuo codice css come segue.

.portlet { 
    position: absolute; 
} 
.portlet-content { 
    overflow:auto !important; 
} 

Answer 2

Ho scavato intorno ed ho trovato questo Tutorial- Create a Windows-like Interface with jQuery UI

Ecco l'jsFiddle e il code-

var _init = $.ui.dialog.prototype._init; 
    $.ui.dialog.prototype._init = function() { 
     _init.apply(this, arguments); 

     var dialog_element = this; 
     var dialog_id = this.uiDialogTitlebar.next().attr('id'); 

     this.uiDialogTitlebar.append('<a href="#" id="' + dialog_id + 
     '-minbutton" class="ui-dialog-titlebar-minimize ui-corner-all">'+ 
     '<span class="ui-icon ui-icon-minusthick"></span></a>'); 

     $('#dialog_window_minimized_container').append(
      '<div class="dialog_window_minimized ui-widget ui-state-default ui-corner-all" id="' + 
      dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() + 
      '<span class="ui-icon ui-icon-newwin"></div>'); 

     $('#' + dialog_id + '-minbutton').hover(function() { 
      $(this).addClass('ui-state-hover'); 
     }, function() { 
      $(this).removeClass('ui-state-hover'); 
     }).click(function() { 
      dialog_element.close(); 
      $('#' + dialog_id + '_minimized').show(); 
     }); 

     $('#' + dialog_id + '_minimized').click(function() { 
      $(this).hide(); 
      dialog_element.open(); 
     }); 
    }; 

     $(document).ready(function() { 
      $('#create_button').button().click(function() { 
       var create_dialog = $('#dialog_window_1'); 
       var create_button = $(this); 
       if(create_dialog.dialog('isOpen')) { 
        create_button.button('option', 'label', 'Create a new Window'); 
        create_dialog.dialog('close'); 
       } else { 
        create_button.button('option', 'label', 'Close Window'); 
        create_dialog.dialog('open'); 
       } 
      }); 

      $('#dialog_window_1').dialog({ 
       width: 'auto', 
       height: 'auto', 
       autoOpen : false, 
       buttons: [ 
        { 
         text: 'Create', 
         click: function() { 
          var div_count = $('.dialog_window').length + 1; 
          var div_id = 'dialog_window_' + div_count; 
          var div_title = $('#new_window_title').val(); 
          var div_content = $('#new_window_content').val(); 
          var buttons = new Array(); 
          if($('#alertbutton').is(':checked')) { 
           buttons.push({ 
            text: 'ALERT', 
            click: function() { 
             alert('ALERTING from Dialog Widnow: ' + div_title); 
            } 
           }); 
          } 

          if($('#closebutton').is(':checked')) { 
           buttons.push({ 
            text: 'CLOSE', 
            click: function() { 
             $('#' + div_id).dialog('close'); 
            } 
           }); 
          } 

          $('body').append('<div class="dialog_window" id="' + div_id + '">' + div_content + '</div>'); 

          var dialog = $('#' + div_id).dialog({ 
           width: 'auto', 
           height: 'auto', 
           title : div_title, 
           autoOpen : true, 
           buttons: buttons 
          }); 
         } 
        } 
       ] 
      }); 
      $('#buttonlist').buttonset(); 
     });` 

Answer 3

La cosa che sta causando le barre di scorrimento in jsFiddle è il ui-resizable-handle elementi.

L'aggiunta di queste dichiarazioni CSS dovrebbe rimuovere le barre di scorrimento fino a quando non sono necessari e non sembra influenzare la funzionalità della maniglia di trascinamento

.ui-resizable-s { bottom: 0 !important } 
.ui-resizable-e { right: 0 !important } 

Ecco una versione aggiornata jsFiddle

Per inciso. Sebbene sembrino comportarsi meglio se rimuovi il link del foglio di stile jQuery presente nell'area HTML jsFiddle, rimuoverlo altera le loro posizioni iniziali. Quindi l'ho lasciato con l'aspettativa che funzioni correttamente per te nel tuo codice attuale.