8

私はjqueryuiのサイズ変更可能なdivを持っています。幅だけをサイズ変更可能にし、高さを自動のままにして、コンテンツに合わせて div が拡大または縮小するようにします。東のハンドルのみを表示して css を使用するようにheight:auto設定すると、幅だけが変更されてもサイズ変更後に高さも設定されます。次のように、毎回サイズ変更イベントで高さを自動に設定する必要があります。

resize: function(event, ui) {
    $(this).css('height', 'auto');
}

高さが設定されないようにします。東のハンドルのみを使用する場合に高さが設定されないようにするより良い方法はありますか?

4

1 に答える 1

0

縦横比とハンドル プロパティを設定してみてください。

    $( "#resizable" ).resizable({
        aspectRatio: 16 / 9,
                    handles: 'e'
    });

上記は、コンテナの東側にハンドルがあるだけで、16/9 アスペクト比に自動的にサイズ変更されるコンテナを作成します。

http://jqueryui.com/demos/resizable/#option-containmentのドキュメント サイトの説明を次に示します。

文字列として指定する場合は、'n、e、s、w、ne、se、sw、nw、all' のいずれかのコンマ区切りリストにする必要があります。必要なハンドルは、プラグインによって自動生成されます。

オブジェクトとして指定された場合、次のキーがサポートされます: { n、e、s、w、ne、se、sw、nw }。指定された any の値は、そのハンドルとして使用するサイズ変更可能な要素の子要素に一致する jQuery セレクターである必要があります。ハンドルがサイズ変更可能の子でない場合は、DOMElement または有効な jQuery オブジェクトを直接渡すことができます。

コード例

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

$( ".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' );
于 2011-08-05T21:32:51.047 に答える