这个3窗格分割器出了点问题

时间:2014-03-05 03:18:52

标签: javascript jquery jquery-ui

我正在尝试调整容器内的3个窗格,调整大小时,它们不应超过容器的宽度(不要离开它)。
但是在这个片段http://jsfiddle.net/KXsrd/中,当我调整第二个元素时,它会成功减少下一个元素,或者根据方向增加。但有时候它会导致下一个兄弟掉到容器下面,虽然当我扩展它时,下一个兄弟会减小它的大小,它会一直“震动”......

这是主要功能:

   $(function () {

        $('.col').each(function (e, u) {
            $(u).data({ow: $(u).width()});
        })
        $(".col").resizable(
                {
                    handles: 'e',
                    start: function (e) {

                    },
                    resize: function (e, ui) {

                        var el = ui.element;
                        var parent = el.parent();
                        var next = el.next();
                        var siblings = el.siblings();
                        var siblingsWidth = (function () {
                            var totalWidth = 0;
                            _.each(siblings, function (el) {
                                totalWidth += $(el).width();
                            });
                            return totalWidth;
                        })();
                        var currentSize = ui.size;

                        if (currentSize.width > $(el).data('ow')) {
                            next.css({width: '-=' + (currentSize.width - $(el).data('ow'))});
                        } else {
                            next.css({width: '+=' + (  $(el).data('ow') - currentSize.width )});
                        }
                        if (currentSize.width + siblingsWidth >= $(parent).width()) {

                            $(el).width($(parent).width() - siblingsWidth)

                        }
                        $(el).data({ow: currentSize.width});

                    },
                    stop: function (e, ui) {

                    }
                });
    });

任何帮助将不胜感激.. (PS。我为可调整大小的窗格尝试了很多插件。但它们只能在2个窗格上工作)

0 个答案:

没有答案