1: Resizable コンポーネントは、選択した DOM 要素をサイズ変更可能なオブジェクト に変えることができます。つまり、調整ハンドルをドラッグすることでそのサイズを変更できます。
$(".selector").resizeable(options);
簡単な例:

コピーコードコードは次のとおりです。

< ;head> 

サイズ変更可能なコンポーネント
 < スクリプト言語="javascript" src="js/jquery-1.4.2.min.js">
<スクリプトタイプ="text/javascript" src="js/jquery. ui.core.js">

< ;script type="text/javascript" src="js/jquery.ui.mouse.js">

< ;img src="images/happy.gif" id="car" />

レンダリング:

実際、resizable() メソッドを呼び出した後、div 要素がターゲットオブジェクトの右枠、下枠、右下隅に追加され、ui-resizable-e、ui-resizable-s が追加されます。 ui-resizable-se クラスに順番に追加され、ドラッグハンドル

が形成されます。

2: 遅延調整

コードをコピーコードは次のとおりです:

サイズ変更可能なコンポーネント

< script type="text/javascript" src="js/jquery.ui.widget.js">

延迟调整

×

拖動最外边查看効果，パラメータ如下

 時間延長：500

 距離延長：20

3：動态调整效果
必要補助尺寸调整組片の下のプロパティ来实现：
* はヘルパープロパティ設定の CSS ですパターン型。この型は調整中に要素のサイズを表示し、操作終了後に元の要素のサイズを調整します
* ゴーストプロパティを true に設定し、調整中に半透明の補助要素を表示します
* 為animate プロパティ設定は true、元素の調整過程追加アニメーション画效果
* animateDuration プロパティ指定一值、アニメート設定アニメーション画过程持続的時間

复制代码代码如下:

サイズ変更可能なコンポーネント

< script type="text/javascript" src="js/jquery.ui.widget.js">

魔兽争霸

来源：知识宝库网 | 浏览次数：431052次 | 作成期間：2010-10-23

魔争霸は一款非常に有名な即時略語です。制作公司はアメリカの暴雪公司です。最新版は「魔兽争霸3：冰封王座」です。

現在は単一マシン游戏の中で非常に歓迎されている游戏、これを除いて、魔兽です

效果图：

4：尺寸调整組品の方法

尺寸调整組品の方法は4つあり、他们都是拖動構成要素と投射構成要素で共有されている、つまり無効化メソッド、有効化メソッド、破棄メソッドおよびオプションメソッド复制代码

 代码如下:


 // 禁止调整尺寸功能
 $(".selector").resizable('disable');
 // 重新激活对象の可调整尺寸功能
 $( ".selector").resizable('enable');
 //移除可调整尺寸功能
 $('.selector').resizable('destroy');
 //在初化後maxHeight プロパティの設定値は 480
 $('.selector').resizable('option', 'maxHeight', 480);
 // 初期化後に获取 maxHeight プロパティの値

$(' .selector').resizable('option', "maxHeight");

5:调整イベント回调関数

start: イベント类型sizestart, 开始開始拖アニメーション改变大時間触発
resize: イベント型resize, 拖動过中，鼠标每移動一像素就触開始一次

stop: イベント型resizestop, 停止拖動時間触発行复制代

代码如下:


 $("#droppable").droppable({ 
 eventName: function (event, ui) {
 // 特定の処理代，this 表示可调整尺寸的对象
 }

});
ui は追加情報を含む jQuery オブジェクトです。 jQuery オブジェクトには次のプロパティがあります。
helper: ドラッグ可能なヘルパー要素を表す jQuery オブジェクト
originalPosition:調整を開始する前の元のオブジェクトに対する要素の位置を示す、top 属性と left 属性を含むオブジェクト
originalSize: 調整を開始する前の要素のサイズを示す、width 属性と height 属性を含むオブジェクト
Position : 元のオブジェクトに対する現在の要素の位置を示す、top 属性と left 属性を含むオブジェクト
size: 現在の要素のサイズを示す、width 属性と height 属性を含むオブジェクト
簡単な例:

コードをコピーコードは次のとおりです:

< ;script type=" text/javascript" src="js/jquery.ui.core.js">

< script type="text /javascript" src="js/jquery.ui.resizable.js">