Jquery ui 从主要错误调整大小
Jquery ui resizing from top bugs
当我尝试从顶部调整元素大小时(即使它看起来正在调整大小时),我注意到底部被调整了。
HTML :
<div class="resizeme" style="background:yellow;">Resize me from the top</div>
JS
$(".resizeme").resizable({
handles: "n,s,e,w"
});
jsfiddle :
http://jsfiddle.net/mody5/4x3r8vsq/
我该如何纠正?
通过调整大小,您是在更改高度和宽度,但并未更改可调整大小元素中内容的定位或对齐方式。
因此,可调整大小的元素确实按预期运行,只是在没有参考点的情况下看起来很奇怪。把它想象成从你抓住的手柄上拉伸它,另一边保持不变,而你抓住的边缘移动。
试试这个:
$(document).ready(function() {
$(".resizeme").resizable({
handles: "n,s,e,w"
});
});
.resizeme {
position: relative;
top:20px;
background: yellow;
padding: 6px;
height: 100px;
width: 200px;
}
#top {
position: fixed;
top: 28px;
background: red;
}
#bottom {
position: fixed;
bottom: 60px;
background: blue;
}
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="resizeme">
</div>
<span id="top">Resize me from the top</span><span id="bottom">Resize me from the bottom</span>
当我尝试从顶部调整元素大小时(即使它看起来正在调整大小时),我注意到底部被调整了。
HTML :
<div class="resizeme" style="background:yellow;">Resize me from the top</div>
JS
$(".resizeme").resizable({
handles: "n,s,e,w"
});
jsfiddle :
http://jsfiddle.net/mody5/4x3r8vsq/
我该如何纠正?
通过调整大小,您是在更改高度和宽度,但并未更改可调整大小元素中内容的定位或对齐方式。
因此,可调整大小的元素确实按预期运行,只是在没有参考点的情况下看起来很奇怪。把它想象成从你抓住的手柄上拉伸它,另一边保持不变,而你抓住的边缘移动。
试试这个:
$(document).ready(function() {
$(".resizeme").resizable({
handles: "n,s,e,w"
});
});
.resizeme {
position: relative;
top:20px;
background: yellow;
padding: 6px;
height: 100px;
width: 200px;
}
#top {
position: fixed;
top: 28px;
background: red;
}
#bottom {
position: fixed;
bottom: 60px;
background: blue;
}
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="resizeme">
</div>
<span id="top">Resize me from the top</span><span id="bottom">Resize me from the bottom</span>