3

私は次の構造を持っています http://img109.imageshack.us/img109/589/layoutwireframe.png

サイドバーの % で動作するようにサイズ変更が必要です。たとえば、SidebarTop セクションのサイズを変更した場合、SidebarBottom 部分も更新する必要があります。上部を大きくすると下部が減少し、逆になります。

同じブロックのサイズを変更する解決策を見つけましたが、これにより両方が増加します。私が必要とするのは、一方が増加し、他方が減少する場合です。

ありがとう！

4

2 に答える 2

3

jQueryがalsoResizeオプションを実装するために使用するコードを変更することで、サイズ変更を作成できReverseます。独自のalsoResizeReverseオプションを作成できます。次に、これを次のように簡単に使用できます。

$("#resizable").resizable({
    alsoResizeReverse: ".myframe"
});

また、alsoResizeReverseオプションを追加するためのコード：変更する必要があるのは、alsoResizeの名前をalsoResizeReverseに変更したり、デルタを追加する代わりに減算したりすることなどです（サイズ変更が逆になります）。元のalsoResizeコードは、このバージョンのjQuery UI（Google CDNの1.8.1）の2200行目から始まります。

コード（これはdocument.ready（）の外に置く必要があります）：

$.ui.plugin.add("resizable", "alsoResizeReverse", {

    start: function(event, ui) {

        var self = $(this).data("resizable"), o = self.options;

        var _store = function(exp) {
            $(exp).each(function() {
                $(this).data("resizable-alsoresize-reverse", {
                    width: parseInt($(this).width(), 10), height: parseInt($(this).height(), 10),
                    left: parseInt($(this).css('left'), 10), top: parseInt($(this).css('top'), 10)
                });
            });
        };

        if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.parentNode) {
            if (o.alsoResizeReverse.length) { o.alsoResize = o.alsoResizeReverse[0];    _store(o.alsoResizeReverse); }
            else { $.each(o.alsoResizeReverse, function(exp, c) { _store(exp); }); }
        }else{
            _store(o.alsoResizeReverse);
        }
    },

    resize: function(event, ui){
        var self = $(this).data("resizable"), o = self.options, os = self.originalSize, op = self.originalPosition;

        var delta = {
            height: (self.size.height - os.height) || 0, width: (self.size.width - os.width) || 0,
            top: (self.position.top - op.top) || 0, left: (self.position.left - op.left) || 0
        },

        _alsoResizeReverse = function(exp, c) {
            $(exp).each(function() {
                var el = $(this), start = $(this).data("resizable-alsoresize-reverse"), style = {}, css = c && c.length ? c : ['width', 'height', 'top', 'left'];

                $.each(css || ['width', 'height', 'top', 'left'], function(i, prop) {
                    var sum = (start[prop]||0) - (delta[prop]||0); // subtracting instead of adding
                    if (sum && sum >= 0)
                        style[prop] = sum || null;
                });

                //Opera fixing relative position
                if (/relative/.test(el.css('position')) && $.browser.opera) {
                    self._revertToRelativePosition = true;
                    el.css({ position: 'absolute', top: 'auto', left: 'auto' });
                }

                el.css(style);
            });
        };

        if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.nodeType) {
            $.each(o.alsoResizeReverse, function(exp, c) { _alsoResizeReverse(exp, c); });
        }else{
            _alsoResizeReverse(o.alsoResizeReverse);
        }
    },

    stop: function(event, ui){
        var self = $(this).data("resizable");

        //Opera fixing relative position
        if (self._revertToRelativePosition && $.browser.opera) {
            self._revertToRelativePosition = false;
            el.css({ position: 'relative' });
        }

        $(this).removeData("resizable-alsoresize-reverse");
    }
});

これがデモです：http：//jsfiddle.net/WpgzZ/

于 2013-02-20T08:06:41.693 に答える
2

サイズ変更およびドラッグ可能にすることができる小さなDIVを定義します。

<div id="resizeDiv"></div>

次に、ドキュメントに次のjQueryコードを追加します。

$('#resizeDiv')
    .draggable();
    .resizable();

jQueryの利点は、関数呼び出しを単純にチェーンできることです。最初に、DIVをドラッグ可能にする.draggable（）関数を呼び出し、次にresizable（）を呼び出しました。開始/停止/サイズ変更イベントでコールバック関数を定義することをお勧めします。そのためには、次のように定義します。

$('#resizeDiv')
    .resizable({
        start: function(e, ui) {
            alert('resizing started');
        },
        resize: function(e, ui) {

        },
        stop: function(e, ui) {
            alert('resizing stopped');
        }
    });

コールバック関数は2つの引数を取得することに注意してください。最初はイベントオブジェクトで、次はuiです。uiオブジェクトには次のフィールドがあります。

  • ui.helper –ヘルパー要素を含むjQueryオブジェクト

  • ui.originalPosition –サイズ変更を開始する前の{上、左}

  • ui.originalSize –サイズ変更を開始する前の{幅、高さ}

  • ui.position – {上、左}現在の位置

  • ui.size – {幅、高さ}現在のサイズ

于 2013-02-20T08:00:09.080 に答える