如何使用jquery ui设置自定义调整大小句柄？

Question

我正在使用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;
     }
    });
   });

这会在正确的位置产生正确的手柄,但是当我尝试调整大小时,它什么都不做!任何人都可以看到什么是错的,或建议更好的方法来做到这一点？

谢谢!

Answer 1

根据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;
     }
    });
   });