可resize的jQueryUI句柄

我需要像这张图片一样制作可resize的句柄。

更具体地说，我需要在我的

周围使用那些蓝点来允许从不同侧面resize。

目前我正在使用以下代码：

        $(function() { $('#elementResizable').resizable({ handles: { 'ne': '#negrip', 'se': '#segrip', 'sw': '#swgrip', 'nw': '#nwgrip' } }); });   #elementResizable { border: 1px solid #000000; width: 300px; height: 40px; overflow: hidden; } #nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip { width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; } #segrip { right: -5px; bottom: -5px; }    
 
Full Name
 Title 
 
 
 
 
   

结果我得到了这样的东西。

结果还可以，但是我需要不仅在角落里，而且在边框的中间制作手柄，就像在第一张图片中一样。

Answer 1

看看这个小提琴： http ： //jsfiddle.net/j2JU6/256/

HTML：

 
 
Full Name
 Title 
 
 
 
 
 
 
 
  

CSS：

 #elementResizable { border: 1px solid #000000; width: 300px; height: 40px; overflow: hidden; } #nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip { width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; } #nwgrip { left: -5px; top: -5px; } #negrip{ top: -5px; right: -5px; } #swgrip{ bottom: -5px; left: -5px; } #segrip{ bottom: -5px; right:-5px; } #ngrip{ top: -5px; left:50%; } #sgrip{ bottom: -5px; left: 50%; } #wgrip{ left:-5px; top:50%; } #egrip{ right:-5px; top:50%; } 

JavaScript的：

 $('#elementResizable').resizable({ handles: { 'nw': '#nwgrip', 'ne': '#negrip', 'sw': '#swgrip', 'se': '#segrip', 'n': '#ngrip', 'e': '#egrip', 's': '#sgrip', 'w': '#wgrip' } });