标签: jquery-ui-resizable

我目前在以下页面上工作:

使用以下代码在jQuery中修改了divResizable $().ready()

 $("#divResizable").resizable({ handles: 'e' });
 $("#divResizable").bind("resize", function (event, ui) {
      $('#divContent').width(850 -(ui.size.width - 175));
 });

正如您所看到的,当divResizable变小时,我尝试增加divContent的宽度,反之亦然.但是,使用此代码,divContent并不总是"增长"到左侧,它有时会延伸到不相关的div的右侧,这不会使调整大小看起来很好.

是否有更复杂的方法输入让这两个div的宽度对应？

我能想到的是将divContent的宽度设置为

(start of irrelevant - divResizable.width) == 850px
  ^ e.g 1025px          ^ e.g. 175px

我究竟会用jQuery做到这一点？

我正在尝试使用Jquery Splitter http://www.methvin.com/jquery/splitter/

如果拆分器窗格是静态的,但我需要在其中动态添加窗格,它可以正常工作.此外,我还需要动态删除这些窗格.如何删除拆分器绑定并在其中添加动态拆分区域？

请从这里查看http://01webdesigner.com/Inam/SplitterTest.htm

重新调整大小仅适用于上一个动态添加的区域.

请帮忙

使用jQuery UI Resizable我试图阻止基于各种规则的大小调整.对于绝对定位的元素,内置的包含功能似乎不能正常工作,我还需要比这更灵活的东西.

有这样的事情:

$( ".selector" ).resizable({ resize : function(event, ui) { /* ??? */ } });

如何告诉"ui"对象防止调整大小？

谢谢.

我有一个可调整大小的div,它位于已设置为alsoResize的元素集上.

在视觉上,可调整大小的元素是alsoResize元素的边界框.

我希望能够按可调整大小的div的比例调整alsoResize元素的大小.UI的默认行为使每个元素在调整大小时具有固定的左侧和顶部位置:

http://jsfiddle.net/digitaloutback/SrPhA/2/

但我想调整每个AR元素的左侧和顶部,以便在调整大小时使用边界框进行缩放.

我首先想到通过改变alsoResize插件不会太麻烦.这是我添加到resize的内容:_alsoResize:

// Get the multipliers
var scaleX = self.size.width / os.width;
var scaleY = self.size.height / os.height;

newElW = ( parseInt(el.css('width')) * scaleX );
newElH = ( parseInt(el.css('height')) * scaleY );
newElL = ( parseInt(el.css('left')) * scaleX );
newElT = ( parseInt(el.css('top')) * scaleY );

el.css({ width: newElW, height: newElH, left: newElL, top: newElT });

如你所见,盒子有些滞后:

http://jsfiddle.net/digitaloutback/SrPhA/4/

有些东西似乎在膨胀这些数字并且无法弄清楚,任何建议都会受到赞赏.脚本和浏览器之间可能存在小数位差异？

如何在Dialog上使用jQuery Resizable中的Helper功能(仅在容器调整大小时显示框架)？

我有一个jqueryui重新调整大小的div.我只希望宽度可以重新调整大小并且高度保持自动,以便div随内容增长或缩小.如果我将其设置为仅显示东部手柄并使用css height:auto,则在调整大小后,即使仅更改宽度,也会设置高度.我必须每次都将高度设置为自动调整大小事件,如下所示:

resize: function(event, ui) {
    $(this).css('height', 'auto');
}

防止高度被设定.当只使用东手柄时,是否有更好的方法来防止高度设置？

当滚动可调整大小的div时,我有一个问题是让南手柄卡在底部,使用jquery ui resizable函数将自定义div设置为句柄,调整大小功能正在工作,但是当我使用滚动条时手柄移动有了内容,我希望它保持在div的底部:

这是html:

<div class="Container">
  <h2>Title</h2>

  <div class="Content">
   a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a long text...a long text...a long text...
  a long text...a long text...a …

我正在使用JQuery UI来实现可调整大小/可拖动的元素.现在我想为这些元素定义一个包含,限制正好调整三个(!)边的大小/拖动.例如,看看这个JSFiddle示例.您可以看到包含的元素只能在父级区域内调整大小/拖动.

我想要实现的是元素可以超过底部阈值并移动到父级的底部边界之外.然而,调整大小/拖动仍应限制在父母的边界规定的顶部,右侧和左侧.

所以这个修改是我提出的:

// resizable/draggable option
resize/drag : function(event, ui) {
    expandParent("#parentElement", "#dragElement");
}

function expandParent(parentName, childName) {
    var dragEl = $(childName);
    var dragElTop = parseInt(dragEl.css("top"), 10);
    var dragElHeight = parseInt(dragEl.css("height"), 10);
    var dragElBottom = dragElTop + dragElHeight;
    var parentEl = $(parentName);
    var parentElBottom = parseInt(parentEl.css("height"));
    if(parentElBottom <= dragElBottom + 20) {
        parentEl.css("height", "+=2");
    }
}

如果您使用底部边框,您会注意到如果子项太靠近父项的下边框,则父项的区域会扩展.不幸的是,这在20像素后停止.然后,您必须释放鼠标按钮并再次调整大小/拖动以进一步扩展该区域.你知道为什么会这样吗？

我已经设置了一个跟踪鼠标事件的功能document,即使我只需要鼠标专门用于重新尺寸检测目的,至少此时...

var BoolMouseDown = false;
var BoolResizing = false;
document.body.onmousedown = function () {
    BoolMouseDown = true;
};
document.body.onmouseup = function () {
    BoolMouseDown = false;
};

在ui上

sideNote:目标是获取鼠标下每个元素的数据,以便它可以转换为一个新的(div)部分,它在征服者中幸存下来

// called function on resiz event

var ValueCurSourceCellId = "";
var ValueCurDestCellId = "";
function CurCellIdSet(val) {
     if (BoolMouseDown) {
        ValueCurDestCellId = val;
        BoolMouseDown = false;
    }
    else {
        if (BoolResizing) {
            ValueCurDestCellId = val;
        }
        ValueCurSourceCellId = val;
    }
}


var BoolHasCollided  = false;
$(gitem11)
.mouseover(function () { …

看起来在调整HTML元素大小时,windows的resize事件也会被触发.

因为我想在调整元素大小时执行不同的逻辑,并且当窗口调整大小时,是否有一种非hackish方式来处理它？

http://jsfiddle.net/CPUwW/1/

$(function(){
    $(window).on('resize', function(){        
          // This event gets fired when the #my_element div gets resized, event if
          // window doesn't get resized itself
          $('#text').text(++resizes);
    });

    $('#my_element').resizable();    
});

换句话说,问题是当我调整元素大小时,即使它们的大小没有改变,resize事件也会被所有父元素触发