ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery プラグイン サイズ変更可能

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

巴扎黑
リリース: 2017-06-29 09:27:30
オリジナル
1962 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート