jQueryのUIのインスタンス - ズーム（サイズ変更可能）
要素のサイズを変更するには、マウスを使用しています。
サイズ変更可能な相互作用の詳細については、APIドキュメントを参照してください。 サイズ変更可能なウィジェット（サイズ変更可能なウィジェットを） 。
デフォルトの機能
任意のDOM要素のサイズを変更できる機能を有効にします。 所望の幅または高さに右または下の境界線にマウスをドラッグします。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのスケーリング（サイズ変更可能） - デフォルトの機能</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#resizable {幅：150ピクセル、高さ150ピクセル;パディング：0.5em;}
#resizable H3 {テキスト整列：センター;マージン：0;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#resizable」）.resizable（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "サイズ変更が可能な"クラス= "UIウィジェットコンテンツ」>
<H3クラス= "UIウィジェットヘッダ">ズーム（サイズ変更可能）</ H3>
</ DIV>
</ BODY>
</ HTML>
アニメーション
使用するanimateオプション（ブール）アニメーションの挙動をスケーリングできます。 このオプションをtrueに設定すると、目的の場所へのアウトラインドラッグは、要素のサイズを調整するためにアニメーション化されたときにドラッグを停止します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのスケーリング（サイズ変更可能） - アニメ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#resizable {幅：150ピクセル、高さ150ピクセル;パディング：0.5em;}
#resizable H3 {テキスト整列：センター;マージン：0;}
.ui-サイズ変更可能なヘルパー{ボーダー：1pxの破線のグレー;}
</スタイル>
<スクリプト>
$（関数（）{
.resizable $（ "#resizable」）（{
アニメーション：真
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "サイズ変更が可能な"クラス= "UIウィジェットコンテンツ」>
<H3クラス= "UIウィジェットヘッダ">アニメーション</ H3>
</ DIV>
</ BODY>
</ HTML>
ズーム領域を制限
定義されたスケーリングの境界。 使用containmentなど、親DOM要素またはjQueryのセレクターを指定するオプションを「ドキュメント。」。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのスケーリング（サイズ変更可能） - 制限ズームエリア</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#container {幅：300ピクセル、高さ300ピクセル;}
#containerさh3 {テキスト整列：センター;マージン：0;マージン底：10pxの;}
#resizable {のbackground-position：トップ左;幅：150ピクセル、高さ150ピクセル;}
#resizable、#container {パディング：0.5em;}
</スタイル>
<スクリプト>
$（関数（）{
.resizable $（ "#resizable」）（{
封じ込め：「#container」
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "コンテナ"クラス= "UIウィジェットコンテンツ」>
<H3クラス= "UIウィジェットヘッダ">リミット</ H3>
<div idは= "サイズ変更可能な"クラス= "UIステートのアクティブ">
<H3クラス= "UIウィジェットヘッダ">ズーム（サイズ変更可能）</ H3>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
遅延スタート
delay遅延（ミリ秒）は、スケーリングオプションを開始します。 distanceオプション押されるとスケーリングを許可する前に、指定されたピクセルにカーソルをドラッグします。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのスケーリング（サイズ変更可能） - 遅延スタート</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#resizable、＃のresizable2 {幅：150ピクセル、高さ150ピクセル;パディング：0.5em;}
#resizable H3、＃のresizable2さh3 {テキスト整列：センター;マージン：0;}
</スタイル>
<スクリプト>
$（関数（）{
.resizable $（ "#resizable」）（{
遅延：1000
}）;
$（ "＃Resizable2」）.resizable（{
距離：40
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<H3クラス= "ドキュメント">時間遅延（ミリ秒）：</ H3>
<DIVのID = "サイズ変更が可能な"クラス= "UIウィジェットコンテンツ」>
<H3クラス= "UIウィジェットヘッダ">時間</ H3>
</ DIV>
<H3クラス= "ドキュメント">距離遅延（ピクセル）：</ H3>
<DIVのID = "resizable2"クラス= "UIウィジェットコンテンツ」>
<H3クラス= "UIウィジェットヘッダ">距離</ H3>
</ DIV>
</ BODY>
</ HTML>
アシスタント
設定することによりhelperのみ輪郭要素を表示するには、ズームCSSクラスにオプションを、。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのスケーリング（サイズ変更可能） - アシスタント</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#resizable {幅：150ピクセル、高さ150ピクセル;パディング：0.5em;}
#resizable H3 {テキスト整列：センター;マージン：0;}
.ui-サイズ変更可能なヘルパー{ボーダー：2PX点線＃00F;}
</スタイル>
<スクリプト>
$（関数（）{
.resizable $（ "#resizable」）（{
ヘルパー：「UI-サイズ変更可能なヘルパー」
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "サイズ変更が可能な"クラス= "UIウィジェットコンテンツ」>
<H3クラス= "UIウィジェットヘッダ">アシスタント</ H3>
</ DIV>
</ BODY>
</ HTML>
最大/最小サイズ
使用maxHeight 、 maxWidth 、 minHeightとminWidthオプションが最大または最小要素サイズ変更可能な高さまたは幅を制限します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのスケーリング（サイズ変更可能） - 最大/最小サイズ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#resizable {幅：200pxの;高さ：150ピクセル;パディング：5pxの;}
#resizable H3 {テキスト整列：センター;マージン：0;}
</スタイル>
<スクリプト>
$（関数（）{
.resizable $（ "#resizable」）（{
maxHeight：250、
maxWidth：350、
minHeight：150、
minWidth：200
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "サイズ変更が可能な"クラス= "UIウィジェットコンテンツ」>
<H3クラス= "UIウィジェットヘッダ">ズームイン/アウト</ H3>
</ DIV>
</ BODY>
</ HTML>
縦横比を維持
現在のアスペクト比を維持したり、縦横比のスケーリングに新しい制限を設定します。 設定aspectRatioオプションは、trueで、必要に応じて（例えば、4/3）新しいレートを実現します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIはスケーリング（サイズ変更可能） - アスペクト比を維持する</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#resizable {幅：160ピクセル;高さ：90PX;パディング：0.5em;}
#resizable H3 {テキスト整列：センター;マージン：0;}
</スタイル>
<スクリプト>
$（関数（）{
.resizable $（ "#resizable」）（{
アスペクト比：16/9
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "サイズ変更が可能な"クラス= "UIウィジェットコンテンツ」>
<H3クラス= "UIウィジェットヘッダ">維持アスペクト比</ H3>
</ DIV>
</ BODY>
</ HTML>
グリッドにスナップ
サイズ変更可能な要素がグリッドに整列されます。 gridサイズオプショングリッドセル（ピクセルの高さと幅）を設定します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのスケーリング（サイズ変更可能） - グリッドにスナップ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#resizable {幅：150ピクセル、高さ150ピクセル;パディング：0.5em;}
#resizable H3 {テキスト整列：センター;マージン：0;}
</スタイル>
<スクリプト>
$（関数（）{
.resizable $（ "#resizable」）（{
グリッド：50
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "サイズ変更が可能な"クラス= "UIウィジェットコンテンツ」>
<H3クラス= "UIウィジェットヘッダ">グリッド</ H3>
</ DIV>
</ BODY>
</ HTML>
同期ズーム
エッジの要素をクリックしてドラッグすることで、同時に複数の要素のサイズを変更します。 alsoResizeオプションは、共有セレクタを通過しました。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのスケーリング（サイズ変更可能） - 同期ズーム</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#resizable {のbackground-position：左上;}
#resizable、#also {幅：150ピクセル、高さ120ピクセル;パディング：0.5em;}
#resizable H3、H3 #also {テキスト整列：センター;マージン：0;}
#also {マージントップ：1EM;}
</スタイル>
<スクリプト>
$（関数（）{
.resizable $（ "#resizable」）（{
alsoResize：「#also "
}）;
$（ "#also」）.resizable（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "サイズ変更が可能な"クラス= "UIウィジェットヘッダ">
<H3クラス= "UI-状態-アクティブ">ズーム</ H3>
</ DIV>
<DIV ID = "も"クラス= "UIウィジェットコンテンツ」>
<H3クラス= "UIウィジェットヘッダ">ズーム同期</ H3>
</ DIV>
</ BODY>
</ HTML>
テキストボックス
スケーラブルなテキストボックス。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのスケーリング（サイズ変更可能） - ボックス</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.ui-サイズ変更可能な-SE {
底：17px;
}
</スタイル>
<スクリプト>
$（関数（）{
.resizable $（ "#resizable」）（{
ハンドル： "SE"
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<テキストエリアのID = "サイズ変更が可能な"行= "5" colsの= "20"> </ TEXTAREA>
</ BODY>
</ HTML>
視覚フィードバック
設定することで、 ghostオプションがtrueの場合、要素はズーミング、代わりの実際の要素を表示する時に半透明で表示することができます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのスケーリング（サイズ変更可能） - 視覚的なフィードバック</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#resizable {幅：150ピクセル、高さ150ピクセル;パディング：0.5em;}
#resizable H3 {テキスト整列：センター;マージン：0;}
.ui-サイズ変更可能なゴースト{ボーダー：1pxの破線のグレー;}
</スタイル>
<スクリプト>
$（関数（）{
.resizable $（ "#resizable」）（{
ゴースト：真
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "サイズ変更が可能な"クラス= "UIウィジェットコンテンツ」>
<H3クラス= "UIウィジェットヘッダ">ゴースト</ H3>
</ DIV>
</ BODY>
</ HTML>