jQuery-只为一个句柄调整纵横比大小
jQuery - Resizable Aspect Ratio Just For One Handle
我只想保护纵横比不受一个句柄的影响。我试着用这个代码运行它,但它对我没有帮助。你有什么解决方案吗?
$( "#resizable").resizable({
handles: 'se,e,w',
aspectRatio: true,
start: function(e,ui) {
if (jQuery(e.originalTarget).hasClass("ui-resizable-se")) {
aspectRatio: false;
}
}
});
特别感谢任何解决方案。。
编辑:问题已解决。您可以在此处查看解决方案:https://stackoverflow.com/a/18101710/2572291
关于这个bug有很多问题没有得到解答。
以下是适用于您的解决方案:)
http://jsfiddle.net/882k9/
<script>
var changedRatio = "DK"; //DK->dont keep
var nowResizing = "NO";
$(function() {
$('#resizable').resizable({
start:function(event,ui){
nowResizing = "YES";
},
stop:function(event,ui){
nowResizing = "NO";
}
});
$(document).on('mouseenter', '.ui-resizable-e', function(){
if(changedRatio!="DK"){
if(nowResizing!="YES"){
var targetDiv = $(this).parent().attr("id");
dontKeep(targetDiv);
}
}
});
$(document).on('mouseenter', '.ui-resizable-se', function(){
if(changedRatio!="K"){
if(nowResizing!="YES"){
var targetDiv = $(this).parent().attr("id");
keep(targetDiv);
}
}
});
$(document).on('mouseenter', '.ui-resizable-s', function(){
if(changedRatio!="DK"){
if(nowResizing!="YES"){
var targetDiv = $(this).parent().attr("id");
dontKeep(targetDiv);
}
}
});
});
function dontKeep(val){
$("#"+val).resizable("destroy");
$("#"+val).resizable({
aspectRatio:false,
start:function(event,ui){
nowResizing = "YES";
},
stop:function(event,ui){
nowResizing = "NO";
}
});
changedRatio = "DK";
}
function keep(val){
$("#"+val).resizable("destroy");
$("#"+val).resizable({
aspectRatio:true,
start:function(event,ui){
nowResizing = "YES";
},
stop:function(event,ui){
nowResizing = "NO";
}
});
changedRatio = "K";
}
</script>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
一个对我有用的微小变化,可能是因为jQuery的更新版本。四个角的把手将保持纵横比,而两侧的把手则不会。
$elements.resizable({
handles: "all",
start: function(event, ui) {
var handle = $(this).data('ui-resizable').axis;
// We should maintain the aspect ratio for corners, not for sides
var maintain_aspect_ratio = (["n", "e", "s", "w"].indexOf(handle) == -1);
$(this).resizable( "option", "aspectRatio", maintain_aspect_ratio )
.data('ui-resizable')
._aspectRatio = maintain_aspect_ratio;
},
...
一个适用于我的的简单解决方案
var is_se = ($(this).data('uiResizable').axis == "se");
$(this).resizable( "option", "aspectRatio", is_se ).data('uiResizable')._aspectRatio = is_se;
我认为应该提供纵横比,而不是true
。
aspectRatio: 16 / 9
或
aspectRatio: 4 / 3
请参阅http://jqueryui.com/resizable/#aspect-比率
或
$( "#resizable:not(ui-resizable-se)").resizable({
handles: 'se,e,w',
aspectRatio: 16/9
});
相关文章:
- 链接上的IE10 jquery句柄单击事件不起作用
- 句柄未呈现
- 当页面居中时,带有inputfield的jQuery ui滑块句柄不起作用
- Node.js REST与MySQL句柄重新连接
- Node.js正确的回调错误句柄
- jQuery UI滑块-防止多个句柄重叠
- AngularJS:自定义 404 拦截器句柄 - 带有 URL 的响应
- 从扩展的 javascript 中获取 Firefox 浏览器窗口句柄
- 识别纯文本句子中的推特句柄
- 我可以更改CSS中文本区域调整大小句柄的设计吗
- Javascript正则表达式句柄/
- 在窗体内部单击jQuery句柄按钮
- 从 jquery UI 可调整大小的元素中删除句柄图像
- Jquery 可调整大小的销毁删除句柄元素
- jQuery-只为一个句柄调整纵横比大小
- contentitable:当使用句柄时触发图像调整大小的事件
- Jquery UI可调整大小的自动隐藏句柄
- 防止可调整ui大小的句柄自动触发溢出滚动条
- 如何使用句柄动态调整大小?没有ui
- 使用jquery resizable调整DIV上的句柄大小