javascript - サイズ変更するjquery uiサイズ変更可能な左下のハンドル

Question

プロジェクトで jquery-ui-resizable プラグインを使用しています。

デフォルトでは、DOM オブジェクト jquery-ui-resizable を作成すると、サイズ変更可能なハンドルが右下隅に表示されます。左下隅にサイズ変更可能なハンドルが必要です。

- - 編集 - -

もう1つ、右の境界線を使用してサイズを変更することはできませんが、左の境界線を使用してサイズを変更する必要があります。

Answer 1

を使用する必要がありますhandles

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

これにより、指定した側にハンドルが作成されます。デフォルト値は

'e, s, se'

コード例

ハンドル オプションを指定して、サイズ変更可能オブジェクトを初期化します。

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

init 後に、handles オプションを取得または設定します。

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

Answer 2

Ahmed の回答への追加: jQueryUI には sw-handle のアイコンが含まれておらず、sw-handle のアイコンクラスも適用されません。CSS を使用してアイコンを追加できます。

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

Answer 3

次のコードを使用して、すべての側からサイズ変更を行うこともできます

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

また、autoHide equal trueは、マウスポインタがdomオブジェクトから離れると、グリップアイコンが自動的に非表示になることを意味します。

Answer 4

このSWソリューションを探していました。それを機能させるために私がしなければならなかったのは、resizable() の呼び出しの直後に、作成された div に ui-icon クラスを追加することです。

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

次に、images/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に設定されています

Answer 5

標準のカーソル プロパティが UI CSS で使用されているようです

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

また、カーソルが表示されず、配置に使用される要素の側面でサイズ変更が有効になっていないようです。

すべてのハンドルを追加した後にこれを発見しましたが、それらはすべて表示されませんでした! 更新: どうやらアプリ内に問題があり、それが原因で問題が発生しているようです。JSFiddle でテストすると、同じバージョンの JQuery を使用してすべてのハンドルが期待どおりに動作します.....arggggggg