2012-07-11 30 views
12

in Jcrop,选择裁剪区域后,会出现一个div,并在方框中显示方框。在角落中调整大小具有方框的元素

是否有任何jQuery插件,可以建立这种类型的箱子把手?

+0

的手柄CSS!使用插入到插件中的ID。让自己一个人变得容易。只需使用jcrops CSS文件作为示例 – ppumkin 2012-07-11 15:55:54

回答

18

如上所述,您可以使用jQuery UI的可调整大小。我甚至为你设置了一个小提琴!

http://jsfiddle.net/digitalaxis/j2JU6/

jQuery的

$('#element').resizable({ 
    handles: { 
    'ne': '#negrip', 
    'se': '#segrip', 
    'sw': '#swgrip', 
    'nw': '#nwgrip' 
    } 
}); 

HTML

<div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div> 
<div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div> 
<div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div> 
<div class="ui-resizable-handle ui-resizable-se" id="segrip"></div> 

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; 
} 
#segrip { 
    right: -5px; 
    bottom: -5px; 
} 
+3

@Randy干得好。这里有一个更完整的例子,完成你开始的工作:http://jsfiddle.net/j2JU6/440/ – Yarin 2013-07-19 16:05:07

+0

谢谢,作品完美的家伙 – rusllonrails 2015-05-30 10:47:02

2

您可以使用jQuery UI的大小可调整插件:

http://jqueryui.com/demos/resizable/

使用“把手”参数,使您的元素可以调整大小通过它的整个边界。

+0

再次..此答案很好 - 但您需要使用CSS添加“Box Handles”您的自己。它并不难。 – ppumkin 2012-07-11 15:56:47