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

我为您做了一个小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

Answer 2

我最终无法进行动态调整大小，并选择调整大小，全屏，最小化。请参阅以下代码：

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();
        }

如何使div可调整大小

2 个答案: