要素をマウスを使ってサイズ変更が出来るよにします。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">リサイズ</h3>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Animate</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted gray; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
animate: true
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">アニメーション</h3>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Constrain resize area</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#container { width: 300px; height: 300px; }
#container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
#resizable { background-position: top left; width: 150px; height: 150px; }
#resizable, #container { padding: 0.5em; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
containment: "#container"
});
});
</script>
</head>
<body>
<div id="container" class="ui-widget-content">
<h3 class="ui-widget-header">コンテナ</h3>
<div id="resizable" class="ui-state-active">
<h3 class="ui-widget-header">リサイズ</h3>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Delay start</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#resizable, #resizable2 { width: 200px; height: 70px; padding: 0.5em; }
#resizable h3, #resizable2 h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
delay: 1000
});
$( "#resizable2" ).resizable({
distance: 40
});
});
</script>
</head>
<body>
<h3 class="docs">時間遅延 (ms):</h3>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">1秒遅延</h3>
</div>
<h3 class="docs">距離遅延 (px):</h3>
<div id="resizable2" class="ui-widget-content">
<h3 class="ui-widget-header">40px遅延</h3>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Helper</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 2px dotted #00F; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
helper: "ui-resizable-helper"
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">ヘルパー</h3>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Maximum / minimum size</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#resizable { width: 200px; height: 150px; padding: 5px; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
maxHeight: 250,
maxWidth: 350,
minHeight: 150,
minWidth: 200
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">リサイズ 最大・最小サイズ</h3>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Preserve aspect ratio</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#resizable { width: 160px; height: 90px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
aspectRatio: 16 / 9
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">アスペクト比 16/9 固定</h3>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Snap to grid</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
grid: 50
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">グリッド吸着</h3>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Synchronous resize</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#resizable { background-position: top left; }
#resizable, #also { width: 150px; height: 120px; padding: 0.5em; }
#resizable h3, #also h3 { text-align: center; margin: 0; }
#also { margin-top: 1em; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
alsoResize: "#also"
});
$( "#also" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-header">
<h3 class="ui-state-active">リサイズ</h3>
</div>
<div id="also" class="ui-widget-content">
<h3 class="ui-widget-header">同期リサイズ</h3>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Textarea</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
.ui-resizable-se {
bottom: 17px;
}
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
handles: "se"
});
});
</script>
</head>
<body>
<textarea id="resizable" rows="5" cols="20"></textarea>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Visual feedback</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-ghost { border: 1px dotted gray; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
ghost: true
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">ゴースト</h3>
</div>
</body>
</html>
jQuery UI Resizableプラグインは選択している要素をリサイズ可能な要素にします。
最大最小の幅や高さなど、様々な指定を行うことが出来ます。
(リサイズのドラッグをするためのつまみを持つようになります)
このウィジットはいくつかの機能的なCSSを必要とします。
このCSSが読み込めないと機能しないため、最初に必要とするCSSを読み込むようにしてください。
| オプション |
説明 |
| alsoResize |
型：Selector or jQuery or Element
初期値：false
リサイズしている要素と同期して同じようにリサイズさせたい要素を指定します。
$( ".selector" ).resizable({ alsoResize: "#mirror" });
// getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
// setter
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" );
|
| animate |
型：Boolean
初期値：false
リサイズ操作後に、そのサイズにアニメーションします。
|
| animateDuration |
型：Number or String
初期値："slow"
- Number
-
ミリ秒で指定します。
- String
-
"slow"と"fast"で指定します。
animateオプションでのアニメーション時間を指定します。
|
| animateEasing |
型：String
初期値："swing"
animateオプションでのアニメーションに適用するイージングを指定します。
|
| aspectRatio |
型:Boolean or Number
初期値:false
- Boolean
-
trueが指定されると、元の要素のアスペクト比が保持されます。
- Number
-
指定したアスペクト比を強要します。
リサイズされる要素のアスペクト比を、固定するか否かを指定します。
|
| autoHide |
型:Boolean
初期値:false
要素上にマウスポインタがない場合、つまみを隠すか否かを指定します。
|
| cancel |
型:Selector
初期値:"input,textarea,button,select,option"
指定した要素のリサイズをキャンセルします。
|
| containment |
型:Selector or Element or String
初期値:false
- Selector
-
リサイズ可能な範囲は、セレクターに指定した要素内に収められます。
要素が見つからなかった場合は、この設定は無効になります。
- Element
-
リサイズ可能な範囲は、指定した要素内に収められます。
- String
-
"parent"と"document"が指定可能です。
指定された要素または領域の境界内にサイズ変更を抑制します。
|
| delay |
型:Number
初期値:0
リサイズが開始されるまで、マウスを動かす必要のある時間をミリ秒単位で指定します。
要素をクリックしたときに意図しないリサイズを防ぐことができます。
|
| disabled |
型：Boolean
初期値：false
trueを指定すると、リサイズ要素を無効化します。
|
| distance |
型:Number
初期値:1
リサイズが開始されるまで、マウスを動かす必要のある距離をピクセル単位で指定します。
要素をクリックしたときに意図しないリサイズを防ぐことができます。
|
| ghost |
型:Boolean
初期値:false
trueが指定されると、リサイズ用の半透明なヘルパー要素が表示されるようになります。
|
| grid |
型:Array
初期値:false
[x, y]に指定した単位グリッドごとに、リサイズ時に要素が吸着するようになります。
|
| handles |
型:String or Object
初期値:"e, s, se"
リサイズのつまみをどのように設置するか指定します。
- String
-
n, e, s, w, ne, se, sw, nw, allの中からカンマ区切りで指定します。
(nはNorth、seはSouth Eastのように上を北とした方角に基づいた指定です。)
- Object
-
オブジェクトのキーとして次のものがサポートされています。{n, e, s, w, ne, se, sw, nw}
各値はリサイズ要素の子要素にマッチするセレクターである必要があります。
もし、リサイズ要素の子要素が指定出来ない場合、直接DOM要素かjQueryオブジェクトを渡すことができます。
|
| helper |
型:String
初期値:false
リサイズのためのドラッグ中に、リサイズ枠を表す代理の要素に追加されるclass名を指定します。
この要素のリサイズが完了すると、元の要素のサイズ変更が行われます。
|
| maxHeight |
型:Number
初期値:null
リサイズ可能な最大の高さを指定します。
|
| maxWidth |
型:Number
初期値:null
リサイズ可能な最大幅を指定します。
|
| minHeight |
型:Number
初期値:10
リサイズ可能な最小の高さを指定します。
|
| minWidth |
型:Number
初期値:10
リサイズ可能な最小の幅を指定します。
|
| メソッド | 説明 |
| destroy() |
リサイズの機能を完全に削除します。
$( ".selector" ).resizable( "destroy" );
|
| disable() |
リサイズを無効化します。
|
| enable() |
リサイズを有効にします。
|
| option( optionName ) |
戻り値：Object
optionNameに指定したオプションの現在の値を取得します。
- optionName
-
型：
String
取得したいオプションの名前を指定します。
|
| option() |
戻り値：PlainObject
オプションの各キーと値がペアとなったオブジェクトを返します。
|
| option( optionName, value ) |
引数のoptionNameのオプションに値を設定します。
- optionName
-
型：
String
設定したいオプションの名前を指定します。
- value
-
型：
Object
設定したい値を指定します。
|
| option( options ) |
オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。
- option
-
型：
Object
設定したいオプションのキーと名前のペアを指定します。
|
| widget() |
戻り値：Object
リサイズ要素を含めたjQueryオブジェクトを返します。
|
| イベント |
説明 |
| create( event, ui ) |
型：resizecreate
ドロップ受け入れ要素が生成された際にトリガされます。
$( ".selector" ).resizable({
create: function( event, ui ) {}
});
$( ".selector" ).on( "resizecreate", function( event, ui ) {} );
|
| resize( event, ui ) |
型：resize
リサイズのためのドラッグを続けている間トリガされます。
- ui.element
-
型:
jQuery
リサイズ要素のjQueryオブジェクトです。
- ui.helper
-
型:
jQuery
リサイズのヘルパー要素のjQueryオブジェクトです。
- ui.originalElement
-
型:
jQuery
リサイズされる前の要素のjQueryオブジェクトです。
- ui.originalPosition
-
型:
jQuery
リサイズされる前の要素のポジション情報を{top, left}の形式で格納したオブジェクトです。
- ui.originalSize
-
型:
jQuery
リサイズされる前の要素のポジション情報を{width, height}の形式で格納したオブジェクトです。
- ui.position
-
型:
Object
リサイズ後の要素のポジション情報を{top, left}の形式で格納したオブジェクトです。
- ui.size
-
型:
Object
リサイズ後の要素のポジション情報を{width, height}の形式で格納したオブジェクトです。
|
| start( event, ui ) |
型：resizestart
リサイズ操作を開始する際にトリガされます。
- ui.element
-
型:
jQuery
リサイズされる要素のjQueryオブジェクトです。
- ui.helper
-
型:
jQuery
リサイズのヘルパー要素のjQueryオブジェクトです。
- ui.originalElement
-
型:
jQuery
リサイズされる前の要素のjQueryオブジェクトです。
- ui.originalPosition
-
型:
jQuery
リサイズされる前の要素のポジション情報を{top, left}の形式で格納したオブジェクトです。
- ui.originalSize
-
型:
jQuery
リサイズされる前の要素のポジション情報を{width, height}の形式で格納したオブジェクトです。
- ui.position
-
型:
Object
現在の要素のポジション情報を{top, left}の形式で格納したオブジェクトです。
- ui.size
-
型:
Object
現在の要素のポジション情報を{width, height}の形式で格納したオブジェクトです。
|
| stop( event, ui ) |
型：resizestart
リサイズ操作を終了する際にトリガされます。
- ui.element
-
型:
jQuery
リサイズされる要素のjQueryオブジェクトです。
- ui.helper
-
型:
jQuery
リサイズのヘルパー要素のjQueryオブジェクトです。
- ui.originalElement
-
型:
jQuery
リサイズされる前の要素のjQueryオブジェクトです。
- ui.originalPosition
-
型:
jQuery
リサイズされる前の要素のポジション情報を{top, left}の形式で格納したオブジェクトです。
- ui.originalSize
-
型:
jQuery
リサイズされる前の要素のポジション情報を{width, height}の形式で格納したオブジェクトです。
- ui.position
-
型:
Object
現在の要素のポジション情報を{top, left}の形式で格納したオブジェクトです。
- ui.size
-
型:
Object
現在の要素のポジション情報を{width, height}の形式で格納したオブジェクトです。
|
Back to top