jQuery プラグイン サイズ変更可能

jQuery.resizable は、ユーザーに html dom のサイズ変更動作を提供するために jQuery に基づいて開発されたプラグインです。

たとえば、次の html dom があります:

境界線のサイズを変更する必要があります。オブジェクト、図の赤い部分は「ハンドル」で、マウスが「ハンドル」をドラッグすると、それに応じて p のサイズが変更されます。

まず、ここからソース コードをダウンロードできます: jQuery。 resizable.js

APIの紹介:

handler(String|Object): 一般的なウィンドウなどのドラッグハンドル、右下隅がドラッグハンドルです。ドラッグハンドルをクリックすると長さが変更され、オブジェクト全体の幅。デフォルト値は null で、'.resize' や '#resize' などの jQuery フィルター オブジェクト、または $('.resize') などの jQuery オブジェクトを指定する必要があります。 、
min(Object): json オブジェクト。幅と高さの 2 つのプロパティが含まれます。これらは、オブジェクトのサイズを変更する最小制限された長さと幅の値です。デフォルト値は { width: 0, height: です。 0 },
max(Object): json オブジェクト。幅と高さの 2 つの属性が変更されます。オブジェクト サイズの最大制限長と幅。デフォルト値は { width: $(document) です。 width(), height: $(document).height() },
onResize(Function): サイズ変更 プロセス中にイベントをトリガーするために、サイズ変更可能なプラグインはこのメソッドにパラメーターを渡します詳細については、ソース コードとデモを参照してください。デフォルトは次のとおりです: function() { },
onStop(Function): サイズ変更の最後にトリガー イベントがあり、サイズ変更可能なプラグインはパラメーターを渡します。このメソッドでは、ソース コードとデモで特定の内容を確認できます。デフォルトは次のとおりです: function() { }

Notes:

サイズが変更されるたびに onResize がトリガーされるため、Frequent と比較する必要があります。このイベントでは、過度に複雑なコンテンツを処理したり、dom オブジェクト を頻繁に取得したりしないようにしてください。これにより、オブジェクトのサイズが変化し、マウスの動きに追随できなくなります。これを処理するには、いくつかのヒントを使用できます (たとえば、width% の場合)。実行時は 2==0?)。

オンライン デモ: ライブ デモ

以上がjQuery プラグイン サイズ変更可能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。