jQuery ui Có thể thay đổi kích thước bằng các thanh cuộn

Question

Tôi đang cố gắng thay đổi kích thước trên div, nhưng trình xử lý resizer luôn nằm trong div tôi có thể có thanh cuộn ở đâu.

/////////// Sửa ///////////

tôi đã đạt được nó với JScrollPane nhưng sau khi sử dụng jScroll Tôi không thể thay đổi kích thước theo chiều ngang.
demo http://i53.tinypic.com/906rk9.png

Answer 1

Nó sẽ hoạt động, nếu bạn đặt trình bao bọc quanh phần tử được thay đổi kích thước và làm cho trình bao bọc này có thể thay đổi kích thước.

Tôi đang chơi xung quanh với ý tưởng đó và kết quả này dường như làm việc:

<script> 
$(document).ready(function() { 
$(".resizable") 
    .wrap('<div/>') 
    .css({'overflow':'hidden'}) 
     .parent() 
     .css({'display':'inline-block', 
       'overflow':'hidden', 
       'height':function(){return $('.resizable',this).height();}, 
       'width': function(){return $('.resizable',this).width();}, 
       'paddingBottom':'12px', 
       'paddingRight':'12px' 

      }).resizable() 
       .find('.resizable') 
        .css({overflow:'auto', 
         width:'100%', 
         height:'100%'}); 
}); 
</script> 

Test with jsfiddle

Answer 2

jQuery UI đội concider cuộn div thay đổi kích thước như một thiết kế xấu. Vì vậy, nó là "sẽ không sửa chữa tính năng:. http://bugs.jqueryui.com/ticket/9119 Cách giải quyết như Dr.Molle đã nêu - wrapper thay đổi kích thước cho div cuộn

Answer 3

Kiểm tra tùy chọn http://api.jqueryui.com/resizable/#option-alsoResize

này làm việc cho tôi

$(".responsive-table th").resizable({ 
       handles: "e", 
       containment: 'document', 
       alsoResize: ".responsive-table table" 
      });