标签: jquery-ui-resizable

我注意到jQuery UI的可调整大小的句柄位于页面中所有其他元素之上.我使用Chrome的开发人员工具进行了检查,发现他们自动获得了100的z-index.有没有办法禁用它,只是给它们与可调整大小的元素相同的z-index？谢谢.

看起来在调整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事件也会被所有父元素触发

调整大小句柄不显示在对话框或任何我尝试在对话框内重新声明的内容中.我知道这是设计它们在主题中被禁用,但我如何让它们可见？我需要在对话框内容中看到它们,对话框的内容也不会受到影响.

<p><a href="#dialog">Dialog</a>
<div id="dialog" style="display:none;">
  <p>foobar</p>
    <div style="width:100px; height:100px; border:1px solid;" id="bar">BAR</div>
</div>
<script>
    $(function(){
      $('a[href=#dialog]').click( function(e) {   
        e.preventDefault(); 
          $('#dialog').dialog({
              open: function() {
                   $('#bar').resizable({handles:'sw,se,e'});   
              }
          });
      });
    });
</script>

也在JSFiddle中:http://jsfiddle.net/s22nx/

我正在使用bootstrap 3和jquery-ui,我在调整对话框大小时遇到​​问题.

我正在使用bootstrap的网格系统,也没有几个样式,所以我无法删除库或使用Jquery.noConflict().

使用jquery-ui我创建了一个内部有iframe的对话框,无需bootstrap即可正常运行但是当包含该css时,在调整对话框几次后,右边距会增加.

我创建了一个显示问题的jsfiddle.

$('a#pop').on('click', function (e)
{
    e.preventDefault();
    var page = $(this).attr("href");
    var pagetitle = $(this).attr("title");
    var myDialog = $('<div></div>')
    .html('<iframe style="border: 0; " src="' + page + '" width="100%" height="100%"></iframe>')
    .dialog({
        autoOpen: false,
        modal: false,
        height: 500,
        width: 600,
        title: pagetitle,
        open: function (event, ui)
        {
            myDialog.css('overflow', 'hidden');
        }
     });
     myDialog.dialog('open');
});

http://jsfiddle.net/dani2688/6m4VN/

有没有人知道如何在不删除引导程序的情况下解决这个问题？

我还发现了一个jquery-bootstrap库,但问题也出现了. https://github.com/addyosmani/jquery-ui-bootstrap

使用这个css,边距看起来不错,但是在对话框调整几次之后,内容的增长超过了框架.

.ui-dialog .ui-dialog-content {
    -webkit-box-sizing: initial;
    -moz-box-sizing:initial;
     box-sizing: initial;`
 }

使用这个问题,右边距的问题是固定的,但不是底部的问题,并且由于某些奇怪的原因使用#ui-id-*不能解决问题,我需要把特定的id放在不好的地方,因为每个都有变化时间我打开一个新的对话框.

.ui-dialog *{
    box-sizing: border-box;
 }

#ui-id-1{
    width: 100% !important;
} …

当您将一个元素浮动到右侧，然后使用 jQuery UI 的可调整大小小部件使其从左边缘调整大小时，奇怪的事情开始发生。

我把这个放在一起：

http://jsfiddle.net/nicholasstephan/kCduV/2/

如果您调整“侧边栏”的大小，您会立即看到我在说什么。

我在这里做错了什么？

我更愿意保留 float:right，以便左栏自行处理。

我在我的一个模板中有一个DOM元素,我想使用jqueryUi调整大小.长和短是<div>我的模板中有一个名为"test" 的元素....除此之外,我尝试添加脚本实际上在多个地方进行大小调整,但我已经让自己完全转过身来.

我曾经想过,一个指令可能是正确的事情......或者因为我使用jqueryui而不是真正的角度类型的东西,我可以通过将脚本放入我的模板或控制器......但他们到目前为止,由于多种原因,我都失败了...

无论如何..回到原点......

在angularJs应用程序中,如何实际实现jqueryuiresizable()库中的功能.

作为补充,我已经看了下面的答案,并编写了以下代码:

HTML:

<div resizable on-resize="resize()"> Test </div>

指示:

angular.module('tffullscreen.directives').

directive('resizable', function() {
    return {
        restrict: 'A',
        scope: {
        callback: '&onResize'
    },
    link: function postLink(scope, elem, attrs) {
        elem.resizable();
        elem.on('resizestop', function (evt, ui) {
            if (scope.callback) { scope.callback(); }
        });
        window.e = elem;
    }
    };
});

控制器:

$scope.resize = function () {
    console.log("RESIZED FUNCTION CALLED IN CONTROLLER");
};

这里的问题是,这是在加载模板时在我的屏幕上呈现的内容:

<div resizable="" on-resize="resize()" class="ng-isolate-scope ui-resizable"> 
Test 
<div class="ui-resizable-handle ui-resizable-e" style="z-index: …

我正在使用jQuery resizable来调整div的大小,我只想调整它的高度.

我设法只在拖动底部帮助器时调整大小:

$('div').resizable({
   handles: 's',
});

但如果我按住Shift键,宽度会发生变化.见http://jsfiddle.net/6p20qjmr/3/

如何禁用此行为？

编辑: div容器宽度可能会在初始调整大小后调整.

我有一个可调整大小的内容，它也可以滚动（简单的溢出：滚动，没有插件）。滚动时，底部手柄将保持其原始位置，并与其余文本一起向上滚动，而不是底部。

试图添加孩子等，也在谷歌和这里搜索。

提前致谢 ：）

编辑：这是代码（使用jquery 2.1.3和jquery-ui 1.11.4）：

javascript：

 $("#slide-panel-container").resizable({
   handles: 's'
 });

 $("#info-window").resizable({
   handles: 'e'
 });

CSS：

.frontControllers {
  position: absolute;
  border: 1px solid #ccc;
  width: 342px;
}
#slide-panel-container {
  overflow-y: auto;
  overflow-x: hidden;
}
.ui-resizable-handle {
  background-color: red;
}

HTML：

<body>
  <div id="info-window" class="container-fluid form-group frontControllers">
    <div id="info-sum-container" class="row">
      <div class="col-xs-8">
        <div class="row">
          <h1>Flight Unlimited</h1>
        </div>
      </div>
    </div>
    <div id="info-full" class="collapse row side-outer-container">
      <div id="slide-panel-container" class="col-xs-12">
        <div class="row">
          <p>Flight Unlimited is a 1995 flight simulator video game developed and …

我有以下代码：

<table>
    <tr>
        <td id="parent">
            <div id="child"></div>
        </td>
    </tr>
</table>

我的JavaScript代码：

$('#child' ).resizable({
    animate: true,
    helper: '.ui-resizable-helper',
    maxWidth: 500,
    maxHeight: 500,     
    aspectRatio: true
});

使用上面的代码，我的可调整大小功能div可以按预期工作，但是当我添加containment选项时，将divs width和height调整0为时，无论在任何方向进行调整。

   $('#child' ).resizable({
        animate: true,
        helper: '.ui-resizable-helper',
        maxWidth: 500,
        maxHeight: 500,     
        aspectRatio: true,
        containment: '#parent'
    });

为什么会这样呢？是虫子吗？

看起来 jQuery UI Resizable 似乎不适用于 CSS 网格布局。当开始调整元素大小时，它会向右跳转添加 CSS 网格的偏移量。

$('#resize').resizable();

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
}

.grid_cell {
  background-color: white;
  border: 1px solid gray;
  text-align: center;
}

#resize {
  background-color: grey;
  position: absolute;
  width: 100%;
  text-align: center;
  grid-column-start: 2;
  grid-column-end: 3
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div class="grid">
  <div class='grid_cell'>
    grid cell
  </div>
  <div class="grid_cell">
    grid cell
  </div>
  <div id="resize">
    resize me!
  </div>
</div>

JSFiddle

https://jsfiddle.net/Bensky/91bgbfxg/11/

知道如何解决吗？