jquery ui可調整大小的左手柄調整大小

我在我的項目中使用了jquery-ui-resizable插件。jquery ui可調整大小的左手柄調整大小

默認情況下，當你使一個DOM對象jquery-ui-resizable時，可調整大小的句柄將出現在右下角，我需要左下角的可重新調整的句柄。

---編輯---

一兩件事，它不應該被使用右邊框重新可觀的，但應該使用左邊框重新可觀。

enter image description here

2011-07-29 Imran Naqvi

您應該使用handles

supported: { n, e, s, w, ne, se, sw, nw }.

這將創建您指定的側手柄。默認值是

'e, s, se'

代碼示例

初始化與指定的手柄選項調整大小。

$(".selector").resizable({ handles: 'n, e, s, w' });

在init之後獲取或設置句柄選項。

//getter 
var handles = $(".selector").resizable("option", "handles"); 
//setter 
$(".selector").resizable("option", "handles", 'n, e, s, w');

來源

2011-07-29 10:16:56

+1，謝謝@Ahmed爲您的答覆，我認爲它會工作。請讓我試試。 –

附加艾哈邁德的回答是： jQueryUI的不包括爲SW-手柄一個圖標，也爲SW-句柄不應用圖標類。您可以使用一些CSS來添加一個圖標：

#resizable .ui-resizable-sw{background:url(path/to/custom_icon.gif) no-repeat;}

來源

2011-07-29 10:33:59

+1，謝謝@ Dr.Molle，我已經明白了。 –

做大小調整從四面八方下面的代碼還可以用於

 var resizeOpts = { 
     handles: "all" ,autoHide:true 
    }; 
$(".selector").resizable(resizeOpts);

和自動隱藏等於真正意味着握圖標會自動隱藏，當鼠標指針從dom對象中移除。

來源

2011-10-15 16:56:43

我一直在尋找這個軟件解決方案。我需要做的就是在調用resizable（）之後，將ui-icon類添加到創建的div中。

$("#wproof").resizable({handles: "w, sw, s"}); 
$('.ui-resizable-sw').addClass('ui-icon ui-icon-gripsmall-diagonal-sw');

然後通過取它在圖像定義圖標/ UI-icons_222222_256x240.png 它是在底部具有小9X9區域。做一個.png文件（旋轉！）和樣式添加到給定的類：

<style> 
.ui-icon-gripsmall-diagonal-sw { 
    background-image: url(your 9x9 icon.png); } 
.ui-resizable-sw { 
    bottom: 1px; 
    left: 1px; 
} 
</style>

底部和左側在jQuery的UI CSS設置爲-5px

來源

2012-07-11 17:50:26 adamreith

好像標準光標屬性是什麼使用的UI CSS

.ui-resizable-sw { 
cursor: sw-resize; 
height: 7px; 
width: 100%; 
top: -5px; 
left: 0; 
}

而且似乎光標不顯示和可調整大小沒有爲一個用於定位的元件的側啓用 - 例如：使用左定位一個div：20像素頂：20像素不會使尺寸調整這些左側和頂側

我在添加所有句柄後發現了這個，但是他們都沒有出現！更新：顯然我的應用程序內有一些問題導致我的問題。在JSFiddle上測試所有的句柄按預期工作，使用相同版本的JQuery ..... argggggg

來源

2013-07-13 23:36:51 alQemist

jquery ui可調整大小的左手柄調整大小

回答

相關問題