jquery-ui - JQuery UI 1.10.2 - 如何在对话框内看到调整大小的句柄？

Question

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

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

Answer 1

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

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

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

其他抓取器似乎按照设计没有与它们相关的风格。 themes 都没有我检查了任何可见的样式(除了 cursor )。搜索 .ui-resizable-在 jquery-ui.css看到这个。

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

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

或者只是一侧，例如:

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

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

在 _makeResizable函数在 jquery-ui.js (v1.10.2) 行:

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

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