6

调整大小手柄不会显示在对话框或我尝试在对话框内调整大小的任何内容中。我知道这是设计使它们在主题中被禁用，但我如何让它们可见？我需要在对话内容中看到它们，而对话内容也不会受到伤害。

<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/

4

3 回答 3

5

这里有几件事导致了这个问题，其中之一可能是一个错误。

首先，您是正确的，故意隐藏了东南手柄，但是所有8 个手柄仍然作为对话框中的元素存在。这是个好消息，因为您可以添加以下 CSS 来恢复se手柄。绕过故意隐藏有点麻烦，您可能需要调整right和bottom定位以满足您的需求。

.ui-dialog .ui-resizable-se {
    right:0 !important;
    bottom:0 !important;
    background-position: -64px -224px !important;
}

其他抓取器似乎在设计上没有与之相关的风格。我检查的所有主题都没有任何可见的样式（除了cursor）。.ui-resizable-在jquery-ui.css中搜索以查看此内容。

这在文档中有所涵盖，但仅在生成您自己的句柄的上下文中提及。现有的主题支持没有任何明确的内容。幸运的是，所有句柄共享一个类，因此我们可以通过添加使它们全部可见：

.ui-resizable-handle {
    background-color:lightblue;
}

或者只是一侧，例如：

.ui-resizable-s {
    background-color:lightblue;
}

我提到的可能的错误与控制句柄元素的生成有关。有问题的代码$('#bar').resizable({handles:'sw,se,e'});应该是正确的，并且只产生 3 个句柄元素，但总是出现所有 8 个。

在 (v1.10.2) 的_makeResizable函数中，jquery-ui.js该行：

resizeHandles = typeof handles === "string" ? handles : "n,e,s,w,se,sw,ne,nw";

应该将正确的 resizeHandles 设置为您作为选项参数提供的值，但typeof handles = 'object'对我来说，所以 jQueryUI 使用的是三元组的 else 部分。

于 2013-04-17T14:41:55.163 回答
3

在css文件中，我不得不改变：

.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px;
}

至：

.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: 3px;
    bottom: 3px;
}
于 2013-04-25T19:27:44.860 回答
1

或者您只是忘记包含所需的 css

<script src="js/jquery-ui.min.js"></script>

检查这个

UPD 他们确实有句柄，只是在默认主题下不可见。这不是特定于 jQuery UI 的东西。许多可调整大小的窗口都以这种方式工作。

于 2016-07-04T15:02:54.040 回答