1

我有一个 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/

这可能有助于解释我在寻找什么。

4

2 回答 2

0

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

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();
        }
于 2014-07-17T20:16:08.957 回答
0

我为你做了一个小的 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);
        }
    });
});

我希望这很清楚。如果没有，我将编辑并解释更多。

你也可以看到小提琴

于 2013-10-31T16:07:11.733 回答