回答
如上所述,您可以使用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