调整大小句柄不显示在对话框或任何我尝试在对话框内重新声明的内容中.我知道
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/
解决方法
这里有一些事情导致了这个问题,其中一个可能是一个bug.
首先,你有意识地隐藏了东南手柄,但是所有8 handles仍然作为对话框中的元素存在.这是个好消息,因为您可以添加以下CSS来恢复se句柄.绕过故意隐藏是一种黑客攻击,你可能想要调整右侧和底部位置以满足您的需求.
.ui-dialog .ui-resizable-se {
right:0 !important;
bottom:0 !important;
background-position: -64px -224px !important;
}
设计中的其他抓取器似乎没有与之相关的风格.我检查的themes都没有任何可见的样式(除了光标).在jquery-ui.css中搜索.ui-resizable-以查看此内容.
这在documentation中有所涉及,但仅在生成自己的句柄的上下文中提到.现有的主题支持没有明确的含义.幸运的是,所有句柄共享一个类,因此我们可以通过添加以下内容使它们全部可见：
.ui-resizable-handle {
background-color:lightblue;
}
或者只是一方,例如：
.ui-resizable-s {
background-color:lightblue;
}
我提到的可能的错误是控制句柄元素的生成.有问题的代码$(‘#bar’).resizable({handles：’sw,e’});应该是正确的,并且只产生3个句柄元素,但总是出现所有8个.
在jquery-ui.js(v1.10.2)的_makeResizable函数中：
resizeHandles = typeof handles === "string" ? handles : "n,e,s,w,sw,ne,nw";
应该将正确的resizeHandles设置为您提供的值作为options参数但是typeof handles =’object’对我来说,所以jQueryUI正在使用三元的else部分.
