如何解决如何使用jquery ui设置自定义调整大小句柄?
| 我正在使用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;
}
});
});
这样可以在正确的位置产生正确的手柄,但是当我尝试调整大小时,它什么也不做!任何人都可以看到问题所在,或提出更好的方法来做到这一点吗?
谢谢!
解决方法
根据http://esbueno.noahstokes.com/post/426818005/jquery-ui-resizable-custom-handle-syntax,您的自定义句柄语法错误。这对我有用:
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/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。