我使用jQuery UI来允许我的页面元素可调整大小,但我想设置自定义句柄。我已经试了我认为应该可行的方法,但是行不通。
基本html是:
<div id="element_x" class="resizable">
<div id="overlay_x" class="element_buttons">
<div id="resize_element_x" class="resize_element ui-resizable-handle ui-resizable-se"><img src="images/site/handle_resize.png" border=0 title="Resize this element" /></div>
</div>
</div>
我这样设置:
var reposition = '';
$(function() {
$( ".resizable" ).resizable({
containment: "#viewPage",
handles: {"e,s,se" : { e: '.ui-resizable-e', s: '.ui-resizable-s', se: '.ui-resizable-se'}},
resize: function(event, ui){
reposition = ui.position;
}
});
});
这会在正确的位置产生正确的句柄,但是当我尝试调整大小时,它什么也不做!哪里出了问题,或者有没有更好的方法?
您的自定义句柄语法错误。
var reposition = '';
$(function() {
$( ".resizable" ).resizable({
containment: "#viewPage",
handles: { 'e': '.ui-resizable-e', 's': '.ui-resizable-s', 'se': '.ui-resizable-se'},
resize: function(event, ui){
reposition = ui.position;
}
});
});
解决方案不是我的,但它确切地显示了问题和解决方案是什么:
<p><a href="http://bugs.jqueryui.com/ticket/4310">jQuery UI #4310</a> - Custom resizable handles do not work unless the ui-resizable-xy and ui-resizable-handle classes are added.</p>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div class="container">
<div class="border bottom_right ui-resizable-se ui-resizable-handle"></div>
</div>
<script>
$(function() {
$('.container').resizable({
handles: { se: '.bottom_right' }
});
});
</script>
对我来说它是有效的!:)
http://jsfiddle.net/tj_vantoll/pFfKz/