JQuery UI 1.10.2 - 如何在对话框中看到调整大小句柄？

Question

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

<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

这里有一些事情导致了这个问题,其中一个可能是一个bug.

首先,你有意识地隐藏了东南手柄,但是所有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设置为您提供的值作为options参数,但typeof handles = 'object'对我来说,所以jQueryUI正在使用三元组的else部分.