标签: jquery-ui-resizable

我发现的唯一解决方案是使用当前值设置最大和最小高度或宽度.

例:

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});

但这真的很难看,特别是如果我必须以编程方式更改元素的高度.

如何使jQuery UI Resizable也可以反向调整.

假设在html中有两个div标签,如果我向上调整意味着另一个东西必须向下调整大小

<script>
        $(function() {
        $("#resizable").resizable({alsoResize: ".myiframe"});

    });
</script>
<div id = "resizable">
        This is the resizable content...
</div>

<div class="myframe">
   This must resize in reverse direction...
</div>

我尝试了但没有用,请指导解决这个问题

我正在尝试创建webapp的整体布局.该应用程序是全屏的,有一个固定的标题和三列/窗格.中心窗格由两行组成:

通过使用鼠标拖动窗格边缘,窗格应该可以调整大小(请参见上图中的箭头).

在内容溢出的情况下,各个窗格应具有垂直滚动条,即没有全局浏览器窗口滚动条.

使用jQuery和jQuery UI Resizable,我创建了这个(部分工作)JSFiddle.

HTML:

<div class="header">
  Fixed header    
</div>
<div class="wrapper">
   <div class="inner-wrapper">
       <div class="left pane">Left</div>
       <div class="center pane">
           <div class="inner">
               <div class="top">Center top</div>
               <div class="bottom">Center bottom</div>
           </div>
       </div>
       <div class="right pane">Right</div>
   </div>
</div>

CSS:

html, body {
    height: 100%;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background-color: moccasin;  
}
.wrapper {
    position:absolute;
    top: 21px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: fuchsia;
}
.inner-wrapper,
.center.pane .inner { …

function makeResourceDrag(arrIndexID) {

    $('#imgA' + arrIndexID).resizable();

    $('#imgA' + arrIndexID).draggable({
        start: function(event, ui) {
            isDraggingMedia = true;
        },
        stop: function(event, ui) {
            isDraggingMedia = false;

            // Set new x and y
            resourceData[arrIndexID][4] = Math.round($('#imgA' + arrIndexID).position().left / currentScale);
            resourceData[arrIndexID][5] = Math.round($('#imgA' + arrIndexID).position().top / currentScale);

        }
    });

}

如果可以调整可调整行,这可以正常工作,但我希望这些图像可以拖动和调整大小,如果我尝试使相同的元素具有这两个属性,我会得到有趣的行为,有没有人知道如何使这个工作？

谢谢!

我有一个div元素,使jquery Resizable.它还具有Resize选项集,因此其他元素可以同时调整大小.

我想要做的是,以这种方式以编程方式设置此Resizable div元素的大小,即触发所有Resizable逻辑(特别是考虑到此另外的Resize选项).

我怎样才能做到这一点？

我在我的项目中使用jquery-ui-resizable插件.

默认情况下,当您创建一个DOM对象jquery-ui可调整大小时,可调整大小的句柄将显示在右下角,我需要左下角的可调整大小的句柄.

---编辑---

还有一件事,它不应该使用右边框重新调整大小,而应该使用左边框重新调整大小.

我正在使用jquery ui来允许我的页面元素可以调整大小,但我想设置自定义句柄.我已经尝试过我认为应该工作的东西,但事实并非如此.

基本的HTML是:

 <div id="element_x" class="resizable">
  <div id="overlay_x" class="element_buttons">
   <div id="resize_element_x" class="resize_element ui-resizable-handle ui-resizable-se"><img src="images/site/handle_resize.png" border=0 title="Resize this element" /></div>
  </div>
 </div>

我这样设置:

   var reposition = '';
   $(function() {
    $( ".resizable" ).resizable({
     containment: "#viewPage",
     handles: {"e,s,se" : { e: '.ui-resizable-e', s: '.ui-resizable-s', se: '.ui-resizable-se'}},
     resize: function(event, ui){
       reposition = ui.position;
     }
    });
   });

这会在正确的位置产生正确的手柄,但是当我尝试调整大小时,它什么都不做!任何人都可以看到什么是错的,或建议更好的方法来做到这一点？

谢谢!

是否可以使手柄更厚,更容易抓住？

例如,在下面的链接中,您会注意到我只在底部的div上有一个句柄,很难掌握使用鼠标,因为它似乎是1px高.是否可以使手柄高度为10px,因此它的外观和感觉就像图像被抓住了？

http://jsfiddle.net/rYFEY/25/

我试图附加一个div onClick,它既可拖动又可调整大小,带有句柄,用于调整div在所有4个角落的大小.

我已经能够使div可拖动并添加手柄......但是......只有div的底部,右侧和右下角实际上工作...顶部和其他角落在悬停时显示箭头...但不会调整div的大小!？!？!

<script>

$(document).ready(function() {

    //onClick append a resizable & draggable div with handles on all 4 corners
    $('#mega_wrap').click(function(e){

        //Define element css and positioning then add both draggable and resizable from jQuery UI
        var ele = $("<div>");
            ele.css({width:"100px", height:"100px", border:"3px dashed white", position:"absolute", left: e.pageX - 50, top: e.pageY -50});
            ele.draggable();
            ele.resizable();

        //Define elements handles and append them to the new div
        var eleHandleNE = $("<div class='ui-resizable-handle ui-resizable-ne' id='negrip'>");
        var eleHandleSE = $("<div class='ui-resizable-handle ui-resizable-se' id='segrip'>");
        var eleHandleSW = …

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

使用以下代码在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做到这一点？