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

動的なサイズ変更ができなくなり、フルスクリーン、ミッドスクリーン、および最小化にサイズ変更することを選択しました。次のコードを参照してください。

ジャバスクリプト

//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 に答える