用角落的框手柄调整元素大小

Question

在 Jcrop 中，选择裁剪区域后，会出现一个带有角落框柄的 div。

是否有可以构建这种框柄的 jQuery 插件？

- Mironline

---

这些句柄是CSS！带有插件钩入的ID。自己制作一个将很容易。只需使用jcrops CSS文件作为示例即可。 - Piotr Kula

Answer 1

你可以像上面提到的那样使用jQuery UI的resizable。我甚至为您设置了一个小工具！

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;
}

- Randy Gonzalez

---

不错的工作，@Randy。这里是一个更完整的示例，继续你开始的内容：http://jsfiddle.net/j2JU6/440/。 - Yarin

Answer 2

您可以使用jQuery UI Resizable插件： http://jqueryui.com/demos/resizable/ 使用"handles"参数使您的元素可通过其整个边框进行调整大小。

- Robert Kajic

---

再次强调，这个答案很好，但是你需要使用CSS自己添加“Box Handles”。这并不难。 - Piotr Kula