回答
如上所述,您可以使用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;
}
@Randy干得好。这里有一个更完整的例子,完成你开始的工作:http://jsfiddle.net/j2JU6/440/ – Yarin 2013-07-19 16:05:07
谢谢,作品完美的家伙 – rusllonrails 2015-05-30 10:47:02
再次..此答案很好 - 但您需要使用CSS添加“Box Handles”您的自己。它并不难。 – ppumkin 2012-07-11 15:56:47
- 1. 调整大小的元素
- 2. 元素的调整大小
- 3. 在调整窗口大小时调整UI元素的大小
- 4. 调整具有边框的html元素
- 5. JavaScript调整iframe的大小但iframe中的元素具有相对大小
- 6. 创建可通过从角落拖动来调整大小的svg元素
- 7. 在窗口调整大小元素宽度调整大小jquery
- 8. 调整窗口上的html元素的大小调整大小
- 9. 子DOM元素没有调整大小
- 10. 元素没有正确调整大小
- 11. 调整jQuery中的元素大小/ javascript
- 12. 具有可调整大小的元素的可调整大小的jQuery UI小部件
- 13. 使用Java中的角落调整ImageIcon大小
- 14. jQuery-UI可调整大小,调整子元素大小
- 15. jQuery-UI可调整大小,调整所有子元素的大小
- 16. 在jQuery中调整特定元素调整大小选项Resize
- 17. 调整SVG元素的组的大小
- 18. 调整大小时缩小/扩大子元素的大小
- 19. 自动调整元素大小的角度指令
- 20. 使用jscrollpane调整元素的大小
- 21. 使调整大小的元素动态
- 22. 调整UI元素的大小Cocoa
- 23. 嵌套可调整大小的元素
- 24. 调整滚动元素的大小
- 25. 可调整大小的HTML元素
- 26. jQuery调整CSS元素的大小
- 27. 调整uniform.js div.selector元素的大小
- 28. 元素大小调整后的事件
- 29. 如何使用jQuery调整大小来调整iFrame中的元素大小?
- 30. 在调整浏览器大小时调整Unity WebPlayer元素的大小
的手柄CSS!使用插入到插件中的ID。让自己一个人变得容易。只需使用jcrops CSS文件作为示例 – ppumkin 2012-07-11 15:55:54