如何使div可调整大小

Question

我有一个div，我希望能够从其顶部调整大小并增加/减小其高度。我在互联网上发现了很多方法，人们正在使用这种方式来做到这一点，但由于某种原因，没有什么适合我的。我可以得到双箭头出现，但我的div或它的孩子的任何部分都不会移动。这里有一些事情我已经尝试：

$('#header').mousedown(function(){ 
    $('#container').resizable({ 
     handles: 'n, s'  
    });   
}); 

我也用这样的：

$container-results.resizable({ handles: 'n, e, s, w, ne, se, sw, nw' }); 

这

$("#container").resizable({ handles: 'n' }); 
var handles = $("#container").resizable("option", "handles"); 
$("#container").resizable("option", "handles", 'n') 

和CSS我试图

resize: vertical 

和还有其他一些方法，但没有任何结果它调整大小！帮助将不胜感激。

这里是一个简单的jsfiddle例如： http://jsfiddle.net/TCHdevlp/zpD2R/

我发现jsfiddles在页面的底部，这两个具有可调整大小的容器以及。

http://jsfiddle.net/J4bJ3/1/

http://jsfiddle.net/Zns4Q/

这可能有助于解释什么，我期待的。

Answer 1

我最终没有能够有一个动态调整大小和选择调整为全屏，中画面，并最小化。请看下面的代码：

JAVASCRIPT

//attach hide show functionality to results 
     $search_results.click(function() { 
       if($('#hide-info').children().first().hasClass('icon-resize-full')){ 
        $('#hide-info').children().first().removeClass('icon-resize-full').addClass('icon-resize-small'); 
        $('#hide-info').attr('title', 'Hide train info'); 
        $('#search-results-container').attr('style', 'bottom: 330px'); 
        $('#table-container').height('330px'); 
       } 
       $(this).toggleClass('visible'); 
       adjustSections(); 
       setTaskListHeight(); 

     }); 




function showInfo(){ 
      if($('#views').hasClass('minimized')){ 
       $("#hide-info").show(); 
       $("#views").removeClass("minimized").addClass("visible"); 
       $('#search-results-container').attr('style', 'bottom: 30px'); 
       infoState = 'vis'; 
      } 
      else if($('#views').hasClass('visible')){ 
       $("#show-info").hide(); 
       findRule('#views.visible').style.height='100%'; 
       $('#table-container').css('height','100%'); 
       $('#train-tab-content').css('height', 
         $('#table-container').height()-$('#train-tab-content').offset().top 
       ); 
       $('#summary-tab-container').css('height', 
         $('#table-container').height()-$('#train-tab-content').offset().top 
       ); 
       $('#search-results-container').attr('style', 'bottom: 30px'); 
      } 
      adjustSections(); 
      google.maps.event.trigger(map, 'resize'); 
      schedule.resizeTable(); 
     } 

     function hideInfo(){ 
      if(findRule('#views.visible').style.height == '330px'){ 
       $("#hide-info").hide(); 
       $("#show-info").show(); 
       $("#views").attr("class", "").addClass("minimized"); 
       findRule('#views.visible').style.height=''; 
       $('#search-results-container').attr('style', 'bottom: 330px'); 
      }else{ 
       $("#show-info").show(); 
       findRule('#views.visible').style.height='330px'; 
       $('#table-container').css('height'); 
       $('#tab-content').css('height','220px'); 
       $('#summary-tab-container').css('height','220px'); 
      } 
      setTaskListHeight(); 
      adjustSections(); 
      google.maps.event.trigger(map, 'resize'); 
      schedule.resizeTable(); 
     } 

Answer 2

我已经为你做了一个小小的jQuery演示。它可能不完美，但是它完成了这项工作。 这是你要找的东西吗？

$(document).ready(function(){ 
    // Create variable to see if mouse is down 
    var clicking = false; 

    $(document).mousedown(function(){ 
     clicking = true; 
    }); 

    $(document).mouseup(function(){ 
     clicking = false; 
    }) 

    // Function on mousemove 
    $(document).bind('mousemove', function(event){ 
     // Check if the mouse is within a 20px radius of the bottom of the div, and whether the mouse is down 
     if(event.pageY < (($('.resizable').offset().top + $('.resizable').height()) + 10) && event.pageY > (($('.resizable').offset().top + $('.resizable').height()) - 10) && clicking){ 
      // If it is, then drag div in height along with the mouse 
      $('.resizable').height(event.pageY - $('.resizable').offset().top); 
     } 
    }); 
}); 

我希望这很清楚。如果不是，我会编辑和解释更多。

而且你也可以只看到fiddle