我想要一个自定义小部件，它允许一个元素调整大小，其高度和宽度受其父元素的限制。可调整大小的小部件上的包含选项允许这样做，但我需要一个额外的标准。我只需要允许元素在兄弟元素未使用的空间中调整大小...如果您在元素 .xyz 上使用可调整大小的小部件，它将限制 .xyz 到父元素边界，但会将元素 .xyz 的兄弟元素推到父元素边界！我怎样才能实施这个额外的标准？
如果您不明白我要做什么，我可能会更好地解释它，请告诉我。
我以前做过一次，但我对如何实现它并不满意。我在另一个论坛上发帖，但从未得到任何帮助。
编辑：
我能够以比我发布到 webdevelper.com 的方式更好的方式做到这一点。我将自定义 $.ui.plugin.add 方法附加到“可调整大小”小部件。现在我可以将可调整大小的小部件传递给“兄弟姐妹：父母”的选项，这允许我上面提到的标准。如果您知道更好的方法来做到这一点，请告诉我。我认为必须有一种更直接的方法来减少代码复制。我复制了整个遏制方法并将其用作我的兄弟姐妹方法。
function num(v) {
return parseInt(v, 10) || 0;
}
$.ui.plugin.add("resizable", "siblings", {
start: function() {
var element, p, co, ch, cw, width, height,
that = $(this).data("ui-resizable"),
o = that.options,
el = that.element,
oc = o.siblings,
ce = (oc instanceof $) ? oc.get(0) : (/parent/.test(oc)) ? el.parent().get(0)
: oc;
if (!ce) {
return;
}
that.containerElement = $(ce);
if (/document/.test(oc) || oc === document) {
that.containerOffset = {
left: 0,
top: 0
};
that.containerPosition = {
left: 0,
top: 0
};
that.parentData = {
element: $(document),
left: 0,
top: 0,
width: $(document).width(),
height: $(document).height() || document.body.parentNode.scrollHeight
};
}
// i'm a node, so compute top, left, right, bottom
else {
element = $(ce);
p = [];
//set the padding of the container element
$([ "Top", "Right", "Left", "Bottom" ]).each(function(i, name) {
p[i] = num(element.css("padding" + name));
});
//collection of sibling elements
var siblings = el.siblings();
var sHeight = 0;
siblings.each(function(){
console.log($(this).height());
var element = $("#" + this.id);
var marginHeight = parseInt(element.css("margin-top")) +
parseInt(element.css("margin-bottom"));
var borderHeight = parseInt(element.css("border-top-width")) +
parseInt(element.css("border-bottom-width"));
sHeight = sHeight + ($(this).height() + marginHeight + borderHeight);
});
that.containerOffset = element.offset();
that.containerPosition = element.position();
that.containerSize = {
height: ((element.innerHeight() - p[3]) - sHeight),
width: (element.innerWidth() - p[1])
};
co = that.containerOffset;
ch = that.containerSize.height;
cw = that.containerSize.width;
width = ($.ui.hasScroll(ce, "left") ? ce.scrollWidth : cw );
height = ($.ui.hasScroll(ce) ? ce.scrollHeight : ch);
that.parentData = {
element: ce,
left: co.left,
top: co.top,
width: width,
height: height
};
}
},
resize: function( event ) {
console.log("resizing");
var woset, hoset, isParent, isOffsetRelative,
that = $(this).data("ui-resizable"),
o = that.options,
co = that.containerOffset, cp = that.position,
pRatio = that._aspectRatio || event.shiftKey,
cop = {
top:0,
left:0
}, ce = that.containerElement;
if (ce[0] !== document && (/static/).test(ce.css("position"))) {
cop = co;
}
if (cp.left < (that._helper ? co.left : 0)) {
that.size.width = that.size.width + (that._helper ? (that.position.left -
co.left) : (that.position.left - cop.left));
if (pRatio) {
that.size.height = that.size.width / that.aspectRatio;
}
that.position.left = o.helper ? co.left : 0;
}
if (cp.top < (that._helper ? co.top : 0)) {
that.size.height = that.size.height + (that._helper ? (that.position.top -
co.top) : that.position.top);
if (pRatio) {
that.size.width = that.size.height * that.aspectRatio;
}
that.position.top = that._helper ? co.top : 0;
}
that.offset.left = that.parentData.left+that.position.left;
that.offset.top = that.parentData.top+that.position.top;
woset = Math.abs( (that._helper ? that.offset.left - cop.left : (that.offset.left
- cop.left)) + that.sizeDiff.width );
hoset = Math.abs( (that._helper ? that.offset.top - cop.top : (that.offset.top -
co.top)) + that.sizeDiff.height );
isParent = that.containerElement.get(0) === that.element.parent().get(0);
isOffsetRelative = /relative|absolute/.test(that.containerElement.css("position"));
if(isParent && isOffsetRelative) {
woset -= that.parentData.left;
}
if (woset + that.size.width >= that.parentData.width) {
that.size.width = that.parentData.width - woset;
if (pRatio) {
that.size.height = that.size.width / that.aspectRatio;
}
}
if (hoset + that.size.height >= that.parentData.height) {
that.size.height = that.parentData.height - hoset;
if (pRatio) {
that.size.width = that.size.height * that.aspectRatio;
}
}
},
stop: function(){
var that = $(this).data("ui-resizable"),
o = that.options,
co = that.containerOffset,
cop = that.containerPosition,
ce = that.containerElement,
helper = $(that.helper),
ho = helper.offset(),
w = helper.outerWidth() - that.sizeDiff.width,
h = helper.outerHeight() - that.sizeDiff.height;
if (that._helper && !o.animate && (/relative/).test(ce.css("position"))) {
$(this).css({
left: ho.left - cop.left - co.left,
width: w,
height: h
});
}
if (that._helper && !o.animate && (/static/).test(ce.css("position"))) {
$(this).css({
left: ho.left - cop.left - co.left,
width: w,
height: h
});
}
}
});
$(function(){
$( "#resizable1").resizable({
siblings: "parent"
});
});