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

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

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

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

其他抓手似乎在设计上没有与之相关的风格。我检查过的themes没有任何可见样式（cursor除外）。在jquery-ui.css中搜索.ui-resizable-即可查看此内容。

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

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

或者只是一方，例如：

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

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

在jquery-ui.js（v1.10.2）的_makeResizable函数中，行：

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

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

Answer 2

在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;
}

Answer 3

或者您只是忘记包含必需的CSS

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

检查this

<强> UPD They do get handles, they're just not visible with the default theme. This isn't something specific to jQuery UI. Many resizable windows work this way.

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

3 个答案: