jQuery यूआई पोर्टल

Question

मैं ऐसे पैनल बनाने की कोशिश कर रहा हूं जो खींचने योग्य, आकार बदलने योग्य, ढहने योग्य, बंद करने योग्य हैं और साथ ही साथ अधिकतम और न्यूनतम भी किया जा सकता है।

सामग्री को ओवरफ़्लो करने का आकार बदलने पर, मैं पोर्टलेट सामग्री के लिए स्क्रॉल भी चाहता हूं। जब मैं overflow:auto सेट करता हूं तो स्क्रॉल तब भी आती है जब सामग्री बहती न हो।

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

तुम मेरे कोड और डेमो यहाँ panel code
किसी भी मदद की सराहना की होगी अधिक देख सकते हैं। अग्रिम में धन्यवाद!!

Answer 1

अपने सीएसएस कोड को निम्नलिखित में बदलें।

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

Answer 2

मैं चारों ओर खोदा और यहाँ इस Tutorial- Create a Windows-like Interface with jQuery UI

पाया jsFiddle और 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

बात यह है कि ui-resizable-handle तत्वों है अपने jsFiddle में स्क्रॉलबार खड़ी कर रहा है है।

इन सीएसएस बयान जोड़ा जा रहा है, जब तक वे की जरूरत है स्क्रॉलबार को निकालना होगा और ड्रैग हैंडल की कार्यक्षमता

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

यहाँ प्रभावित करने के लिए नहीं लगता है एक अद्यतन jsFiddle

एक अलग रूप में के रूप में है। यद्यपि वे बेहतर व्यवहार करते प्रतीत होते हैं यदि आप jsFiddle HTML क्षेत्र में jquery स्टाइलशीट लिंक को हटाते हैं, तो इसे हटाने से उनकी प्रारंभिक स्थिति बदल जाती है। इसलिए मैंने इसे उम्मीद के साथ छोड़ दिया है कि यह आपके वास्तविक कोड में आपके लिए सही तरीके से काम करता है।