如何使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