Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
jQueryUI の基礎
■jQueryUI とは何か
JavaScript ライブラリの中でも人気が高まっている jQuery は、本体に機能追加
できる手段が標準で備わっており、「プラグイン」という拡張スクリプトが提供
されています。
jQuery Plugin 公式サイトではアニメーション効果やフォーム操作補助、メデ
ィアの操作についてなどの 1,000 を超えるプラグインが公開されており、自作
したプラグインを登録することも可能です。また、jQuery の機能を拡張し、マ
ウス操作やアニメーション機能などユーザインタフェースに特化したライブラ
リである jQuery UI があります。jQuery Plugin も jQuery UI も、jQuery に加
え、別途ダウンロードおよびインストールする必要があります。
jQuery UI で提供されている機能を、大きく分類すると表 1のようになります。
分類名 内容
インタラクション ドラッグ&ドロップ、リサイズなど
ウィジェット アコーディオン、ダイアログ、タブなど
ヴィジュアル効果 アニメーション機能、エフェクト機能の強化など
表 1:jQuery UI の分類
■ひな形ファイルを作る
○jQuery UI のダウンロード
執筆時点の jQuery UI の 新版は、1.10.3 です。jQuery UI のサイト
(http://jqueryui.com/download/)からダウンロードしてください。
jQuery UI 1.10.3 は jQuery 1.6 以上に対応しています。ダウンロードしたフ
ァイル(jquery-ui-1.10.3.custom.zip)を展開すると、以下のようなフォルダ
およびファイルが作成されます。
フォルダ/ファイル名 概要
css テーマに関連するスタイルシートと画像が含まれて
いる
development-bundle 開発者向けのドキュメントやデモ、非圧縮のライブ
ラリなどが含まれている
js jQuery と jQuery UI の本体が含まれている
index.html jQurey UI のサンプル一覧
表 2:jquery-ui-1.10.3.custom.zip の展開後
○jQuery UI の使い方
jQuery UI を利用するには、「js」と「css」のフォルダをドキュメントルート内
にコピーし、以下の 3種類のファイルをロードします。
・jQuery ライブラリ
・jQuery UI ライブラリ
・jQuery UI のテーマのスタイルシート(必要時のみ)
本稿では取り上げませんが、jQuery UI では標準で提供されているコンポーネ
ントに対して、フォントのスタイルやテーマなどをカスタマイズすることが可
能です。詳しくは jqueryui.com(http://jqueryui.com/themeroller/)を参照
してください。
[コード 1]jQuery UI の利用方法
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
■ダウンロードページURL:http://jqueryui.com/download/ →Googleなどで「jqueryui」で検索すると検索結果として表示される
《ダウンロード方法》
このページの一番したまでスクロールさせると...
「Download」のボタンがあるので、これをクリックして、デスクトップへダウンロードする
▼
■Draggable の基本的な使い方
まずは、「インタラクション」の中からドラッグ操作をしてみましょう。
ドラッグ&ドロップ機能の身近な例では、iGoogle でのコンテンツ移動が挙げ
られます。iGoogle は自分専用にカスタマイズできる Google ページです。ニュ
ースや天気予報など気になるコンテンツを追加することができます。その他に
も ICON DOCK というサイトでは、商品をドラッグ&ドロップでショッピングカ
ートに入れることができます。
このように、ドラッグ&ドロップ機能を利用することで、ユーザー操作がよ
り直感的になります。
○要素のドラッグ
ドラッグの使用例をコード 2に示します。
[コード 2]ドラッグの使用例(jQueryUI_drag.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ドラッグサンプル</title>
<!-- 1. ドラッグ対象となるオブジェクトの CSS-->
<style type="text/css">
.square {
width: 100px;
height: 100px;
background-color: red
}
</style>
<!-- 2. jQuery、jQueryUI ライブラリのロード-->
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script><script
type="text/javascript">
<!-- 3. draggable メソッドの使用例-->
<!--
$(function () {
$("#square").draggable();
});
//-->
</script>
</head>
<!-- 4. ドラッグ要素の指定-->
<body>
<h1 id="title">ドラッグ&ドロップサンプル</h1>
<div id="square" class="square">マウスでドラッグし、移動させてくだ
さい</div>
</body>
</html>
1 では、ドラッグ対象となるオブジェクトの CSS を指定しています。また、2で
は、jQuery と jQuery UI のライブラリをロードし、要素をドラッグするには 3
のように「draggable」メソッドを呼び出します。ドラッグ対象となる要素は、
4のように body 部分にタグを用意します(図 1と図 2を参照)。
図 1 実行結果(実行前)
図 2 実行結果(実行後)
■Draggable の便利な設定
○水平方向(左右)だけ、ドラッグで移動できるボックス
水平方向(左右)だけ移動できるようにするには、axis オプションに、x を指
定します。
$(function () {
$("#square").draggable({
axis: 'x',
} );
});
○垂直方向(上下)だけ、ドラッグで移動できるボックス
垂直方向(上下)だけ移動できるようにするには、axis オプションに、y を指
定します。
$(function () {
$("#square").draggable({
axis: 'y',
} );
});
○グリッド(格子)に沿って、ドラッグで移動できるボックス
グリッド(格子)に沿って移動できるようにするには、grid オプションを使い
ます。grid オプションで指定した大きさのグリッド(格子)に、スナップ(吸
着)させることができます。
このサンプルでは水平方向(左右)は、50px ごと、垂直方向(上下)は、25px
ごとにスナップします。
$(function () {
$("#square").draggable({
grid: [ 50, 25 ],
} );
});
○特定要素内だけ、ドラッグで移動できるボックス
ドラッグして移動できるボックスの、移動範囲を設定する方法です。
親要素内だけ移動できるようにするには、containment オプションに、parent
を指定します。
「#jquery-ui-draggable-wrap」のように特定の要素の id を指定することもで
きます。
さらに、サンプルでは、scroll オプションに、false を指定し、ドラッグ移動
中に、スクロールできないようにしています。
・親要素を指定する場合
$(function () {
$("#square").draggable({
containment: 'parent',
scroll: false,
} );
});
・id を指定する場合
$(function () {
$("#square").draggable({
containment: '#jquery-ui-draggable-wrap',
scroll: false,
} );
});
・HTML
<div id="jquery-ui-draggable-wrap" class="ui-widget-content">
<div id="square" class="square">
マウスでドラッグし、移動させてください
</div>
</div>
・CSS
#jquery-ui-draggable-wrap {
width: 500px;
height: 300px;
padding: 5px;
margin: 0;
border-style: dashed;
border-radius: 10px;
}
○ドラッグ移動できるボックスを、特定要素にスナップさせる
特定の要素にスナップ(吸着)させたいときは、snap オプションを使います。
$(function () {
$("#square").draggable({
snap: '#jquery-ui-draggable-wrap',
} );
});
○ドラッグ移動できるボックスの特定要素へのスナップの内外指定
特定の要素にスナップ(吸着)させたいときは、snap オプションを使います。
同時に、snapMode オプションを使うと、内側だけにスナップ、外側だけにス
ナップ、内外両方にスナップを、指定できます。
$(function () {
$("#square").draggable({
snap: '#jquery-ui-draggable-wrap',
snapMode: 'inner',
} );
});
○ドラッグ移動できるボックスの特定要素へのスナップ距離を指定
特定の要素にスナップ(吸着)させたいときは、snap オプションを使います。
同時に、snapTolerance オプションを使うと、スナップする距離を指定できま
す。
このサンプルでは破線で示した枠の 50px 以内に近付くと、スナップ(吸着)
します。
$(function () {
$("#square").draggable({
snap: '#jquery-ui-draggable-wrap',
snapTolerance: 50,
} );
});
※snap オプションと併用する必要があります。
※snap オプションが false の場合、snapTolerance オプションは、機能しま
せん。
○ドラッグ移動できるボックスにおいて、ドラッグできる要素を指定
ドラッグして移動できるボックスにおいて、ドラッグできる要素を指定する方
法です。ドラッグできる要素を指定するには、handle オプションを使います。
$(function () {
$("#square").draggable({
handle: 'h3',
} );
});
・HTML
<div id="square" class="square">
<h3 class="ui-widget-header">タイトル</h3>
マウスでドラッグし、移動させてください
</div>
・CSS
#square h3 { →次のページに続く
padding: 0;
margin: 0;
text-align: center;
cursor: move;
}
○ドラッグを放すと元の位置に戻るドラッグ移動ボックス
ドラッグを放すと元の位置に戻るようにする方法です。ドラッグを放すと元の
位置に戻るようにするには、revert オプションに、true を指定します。
$(function () {
$("#square").draggable({
revert: true,
} );
});
○ドラッグ移動ボックスにおいて、移動用クローンを出現させる
ドラッグして移動できるボックスにおいて、移動用クローン(複製)を出現さ
せる方法です。クローンを出現させるには、helper オプションに、clone を指
定します。
$(function () {
$("#square").draggable({
helper: 'clone',
} );
});
○ドラッグ移動ボックスにおいて、移動中のボックスを半透明にする
ドラッグして移動できるボックスにおいて、移動中のボックスを半透明にする
方法です。移動中のボックスを半透明にするには、opacity オプションを使い
ます。
前ページからの続き
$(function () {
$("#square").draggable({
opacity: 0.5,
} );
});
○ドラッグ移動ボックスにおける、移動中のスクロール可否設定
ドラッグして移動できるボックスにおける、ボックス移動中のスクロール可否
設定です。ウィンドウや親要素を、スクロールさせたくない場合、scroll オプ
ションに false を指定します。ウィンドウや親要素を、スクロールさせたい場
合、scroll オプションに true を指定します。
$(function () {
$("#square").draggable({
containment: 'parent',
scroll: false,
} );
});
$(function () {
$("#square2").draggable({
containment: 'parent',
scroll: true,
} );
});
・HTML
<div id="jquery-ui-draggable-wrap" class="ui-widget-content">
<div id="square" class="square">
<p>scroll: false</p>
</div>
<div id="square2" class="square2"> →次のページに続く
<p>scroll: true</p>
</div>
<div style="clear: both;"></div>
</div>
・CSS
.square2 {
width: 100px;
height: 100px;
background-color: red
}
#jquery-ui-draggable-wrap {
width: 500px;
height: 300px;
padding: 5px;
margin: 0;
border-style: dashed;
border-radius: 10px;
overflow: scroll;
}
○ドラッグ移動ボックスにおいて、移動中のボックスを半透明にする
ドラッグして移動できるボックスにおいて、移動中のボックスを半透明にする
方法です。移動中のボックスを半透明にするには、opacity オプションを使い
ます。
$(function () {
$("#square").draggable({
opacity: 0.5,
} );
});
前ページからの続き
■Draggable イベント設定
ドラッグ時のイベントを処理するサンプルです。
ドラッグイベントを処理するには、draggable()メソッドで start、drag、stop
の各オプションを指定します。
$(function () {
$("#square").draggable({
start: function() {
$(this).addClass("ui-state-hover").find("p").html("ドラッグ開
始...");
},
stop: function() {
$(this).removeClass("ui-state-hover").find("p").html("ドラッグ
終了...");
}
} );
});
・HTML
<div id="square" class="square">
<p>マウスでドラッグし、移動させてください</p></div>
■Draggable と Droppable
続いて、要素のドロップをしてみましょう(コード 3)。
[コード 3]ドロップの使用例(jQueryUI_drop.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ドラッグサンプル</title>
<style type="text/css">
.square {
width: 100px;
height: 100px;
background-color: red;
}
.drop {
width: 100px; height: 100px;
background-color: yellow;
}
.droppable-active {
background-color: blue;
}
.dropped {
background-color: green;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
→次のページに続く
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
<!--
$(function () {
$(".square").draggable();
// 1. droppable メソッドの使用例
$("#drop0").droppable(
{ accept: '.square',
activeClass:'droppable-active',
hoverClass: 'dropped',
drop: function (event, ui) {
alert("ドロップされた id 属性:" + ui.draggable.attr("id"));
}
}
);
});
//-->
</script>
</head>
<body>
<h1 id="title">ドラッグサンプル</h1>
<div id="square" class="square">マウスでドラッグし、移動させ
てください</div>
<hr />
<!-- 2. ドロップ領域の指定 -->
<div id="drop0" class="drop">ドロップ領域</div>
</body>
</html>
要素をドロップするには、コメント 1のように「droppable」メソッドを呼び出
します。ドロップ処理はドラッグと合わせて使用されます。droppable オブジェ
クトで使用可能なオプションのうち、代表的なものを表 3に示します。
前ページからの続き
値名 概要
accept ドロップ可能なオブジェクトを指定できる
activeClass ドラッグ要素がドラッグ状態にある場合に、指定し
た class 名をドロップ要素に追加する
hoverClass ドラッグ要素がドロップ要素の上に乗った場合に、
指定した class 名をドロップ要素に追加する
drop:function(event,ui)
{・・・}
ドロップした時の処理を記述する
表 3:droppable オブジェクトの設定
この例では、ドラッグ対象オブジェクト(赤色)をドラッグしている間はドロ
ップ領域(黄色)が青色に変化し、ドロップ領域の上に乗ると緑色に変わりま
す。ドロップ後は、ドラッグされた id 属性をアラート表示させています。ドロ
ップ領域は、5のように body 部分に drop タグを追加しておきます。
図 3 実行結果(実行前)
図 4 実行結果(ドラッグ時)
図 5 実行結果(ドロップ領域上に乗った場合)
図 6 実行結果(ドロップ後のアラート表示)
■Resizable
次は、要素のサイズを変更してみましょう(コード 4)。リサイズは、例えばメ
ニューや百科事典など写真と本文が対になっているコンテンツで、写真をもっ
と大きく見たい、見せたい場合に利用することが考えられます。
[コード 4]リサイズの使用例(jQueryUI_resize.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リサイズサンプル</title>
<style type="text/css">
.square {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- 1. テーマのスタイルシートの指定 -->
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript">
//
<!--
// 2. resizable メソッドの使用例
$(function () {
$(".square").resizable(
{ →次のページに続く
ghost:true,
animate:true,
minWidth:100,
minHeight: 200,
maxWidth:300,
maxHeight:400
}
);
});
//-->
</script>
</head>
<body>
<h1 id="title">リサイズサンプル</h1>
<div id="square" class="square">図形の四隅をマウスでドラッグし、
リサイズさせてください</div>
</body>
</html>
サイズを変更するには、resizable メソッドを使用します(コメント 2)。また、
テーマのスタイルシートの指定を忘れないようにしましょう(コメント 1)。サ
イズの変更には、表 4のようなオプションがあります。
オプション名 概要
ghost 残像の有無を指定(bool)する
minWidth/minHeight 小サイズを指定(整数)する
maxWidth/maxHeight 大サイズを指定(整数)する
表 4:droppable オブジェクトの設定
前ページからの続き
図 7 実行結果(実行前)
図 8 実行結果(実行途中)
図 9 実行結果(実行後)
■selectable を使ってみよう
○概要
jQuery UI Selectable プラグインは、ドラッグによるボックスでの要素選択(投
げ縄とも呼ばれます)の機能を提供します。 また、ctrl、meta キーを押しなが
らのクリックまたはドラッグで、離れた場所の複数の要素の選択をすることも
可能です。
このウィジットはいくつかの機能的な CSS を必要とします。 この CSS が読み込
めないと機能しないため、 初に必要とする CSS を読み込むようにしてくださ
い。
○オプション
オプション 説明
appendTo 型: Selector 初期値: "body"
選択ヘルパー(投げ縄)を挿入する要素を指定します。
$( ".selector" ).selectable({ appendTo: "#someElem" });
// getter
var appendTo = $( ".selector" ).selectable( "option", "appendTo" );
// setter
$( ".selector" ).selectable( "option", "appendTo", "#someElem" );
autoRefresh 型: Boolean
初期値: true
各選択操作を開始した際に、選択要素の位置・サイズをリフレッシュ(再計算)する
かどうかを決定します。 多くの選択要素が存在する場合、このオプションを false
に指定して、手動で refresh()メソッドを呼び出すことをおすすめします。
cancel 型: Selector 初期値: "input,textarea,button,select,option"
選択操作で対象となっても、選択状態になることをキャンセルする要素を セレクタ
ーで指定します。
delay 型: Integer 初期値: 0
選択操作を開始する時間をミリ秒単位で指定します。 要素をクリックし
たときに不要な選択を防ぐのに役立ちます。
disabled 型: Boolean 初期値: false
true を指定すると、選択機能を無効化します。
distance 型: Number 初期値: 1
選択が開始されるまで、マウスを動かす必要のある距離をピクセル単位で指定し
ます。 要素をクリックしたときに不要な選択を防ぐのに役立ちます。
filter 型: Selector 初期値: "*"
選択される子要素をセレクターによってフィルタリングします。
tolerance 型: String 初期値: "touch"
選択ボックス(投げ縄)と各選択対象要素が、どういった状況で選択状態になるか
モードを指定します。
"fit"
完全に重なったら、選択状態にする。
"touch"
少しでも重なったら、選択状態にする。
○メソッド
メソッド 説明
destroy() 選択機能を完全に削除します。
$( ".selector" ).droppable( "destroy" );
disable() 選択機能を無効化します。
enable() 選択機能を有効にします。
option( optionName ) 戻り値: Object
optionName に指定したオプションの現在の値を取得します。
optionName
型: String
取得したいオプションの名前を指定します。
option() 戻り値: PlainObject
オプションの各キーと値がペアとなったオブジェクトを返します。
option( optionName,
value )
引数の optionName のオプションに値を設定します。
optionName
型: String
設定したいオプションの名前を指定します。
value
型: Object
メソッド 説明
設定したい値を指定します。
option( options ) オプションに設定したい各キーと値がペアとなったオブジェクトを指定
します。
option
型: Object
設定したいオプションのキーと名前のペアを指定します。
refresh() 各選択要素の位置とサイズをリフレッシュ(再計算)します。 このオ
プションはautoRefreshオプションを falseにして、手動で各選択要
素の 位置とサイズの再計算をしたい場合に有用です。
widget() 戻り値: Object
選択機能を含めた jQuery オブジェクトを返します。
○イベント
イベント 説明
create( event, ui ) 型: selectablecreate
ドロップ受け入れ要素が生成された際にトリガされます。
$( ".selector" ).selectable({
create: function( event, ui ) {}
});
$( ".selector" ).on( "selectablecreate", function( even
t, ui ) {} );
selected( event, ui ) 型: selectableselected
各要素が選択要素に加えられ、選択操作が完了した際にトリガさ
れます。
ui.selected
型: Element
選択された要素です。
selecting( event, ui ) 型: selectableselecting
各要素が選択要素に加えられる、選択操作中にトリガされます。
ui.selecting
型: Element
選択された要素です。
start( event, ui ) 型: selectablestart
選択操作を開始する際にトリガされます。
stop( event, ui ) 型: selectablestop
選択操作を終了する際にトリガされます。
unselected( event, ui ) 型: selectableunselected
各要素が選択要素から外され、選択操作が完了した際にトリガさ
れます。
ui.unselected
型: Element
非選択になった要素です。
unselecting( event, ui ) 型: selectableunselecting
各要素が選択要素から外される、選択操作中にトリガされます。
ui.unselecting
型: Element
非選択にされた要素です。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
#feedback { font-size: 1. 4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height:
18px; }
</style>
<script>
$(function() { →次のページに続く
$( "#selectable" ).selectable();
});
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content">項目 1</li>
<li class="ui-widget-content">項目 2</li>
<li class="ui-widget-content">項目 3</li>
<li class="ui-widget-content">項目 4</li>
<li class="ui-widget-content">項目 5</li>
<li class="ui-widget-content">項目 6</li>
<li class="ui-widget-content">項目 7</li>
</ol>
</body>
</html>
前ページからの続き
■Sortable を使ってみよう
○概要
jQuery UI Sortable プラグインは、選択した要素をマウスによって並べ替え可
能な要素にします。
テーブル行に適用したい場合は、table ではなく tbody に指定しなければいけま
せん。
○オプション
オプション 説明
appendTo 型: jQuery or Element or Selector or String
初期値: "parent"
選択した要素をドラッグ移動する際のヘルパー要素が挿入される場所
を指定します。 (z-index による重なりなどの問題に対処するため)
jQuery
ヘルパーを挿入する要素を jQuery オブジェクトで指定します。
Element
ヘルパーを挿入する要素を指定します。
Selector
ヘルパーを挿入する要素をセレクターで指定します。
String
"parent"文字列を指定すると、ヘルパーは並び替え要素の兄弟要素
になります。
$( ".selector" ).sortable({ appendTo: document.body
});
// getter
var appendTo = $( ".selector" ).sortable( "option", "a
ppendTo" );
// setter
$( ".selector" ).sortable( "option", "appendTo", docum
ent.body );
axis 型: String
初期値: false
ドラッグ出来る方向を、水平方向または垂直方向に限定することができ
ます。 指定可能な値は、"x"と"y"です。
cancel 型: Selector 初期値: ":input,button"
マッチした要素の並び替え処理が開始されることをキャンセルします。
connectWith 型: Selector 初期値: false
別の並び替え要素のセレクタを指定することで、リスト項目が接続(連
携)されます。 この指定はあくまで一方からの関係性を示すものなの
で、もし双方向での接続が必要な場合は、両方の並び替え要素のオプ
ションで connectWith オプションを指定しなければいけません。
containment 型: Element or Selector or String 初期値: false
並び替え要素がドラッグできる範囲を指定します。 指定された要素
は、計算された(可能な?)width と height を持っている必要がありま
す。(それが明示的に指定されている必要はありません) 例えば、
float:left の指定によって実質的に height が 0 とみなされると、この
オプションの指定は無効になります。
Element
ドラッグ可能範囲を要素で指定します。
Selector
ドラッグ可能範囲の要素をセレクターで指定します。
String
ドラッグ可能範囲の要素を文字列で指定します。 指定可能な値は、
"parent"、"document"、"window"です。
cursor 型: String 初期値: "auto"
並び替えドラッグ時に表示するカーソルを指定します。
cursorAt 型: Object 初期値: false
並び替え要素、またはヘルパーをドラッグ移動するカーソルは常に同じ
位置にあります。 1 つ、または 2 つのハッシュの組み合わせを指定す
ることで、この位置を調整することが可能です。{top, left, right,
botto}
$( ".selector" ).sortable({ cursorAt: { left: 5 }
});
delay 型: Integer 初期値: 0
並び替えを開始するまでの時間をミリ秒単位で指定します。 この遅延
処理を加えることで、クリックした際にドラッグの誤操作を防ぐ助けにな
ります。
disabled 型: Boolean 初期値: false
true を指定すると、並び替え処理を無効化します。
distance 型: Number 初期値: 1
ソートを開始する距離をピクセル単位で指定します。 このオプションを
指定すると、並び替え要素はドラッグしたマウスが指定された距離を超
えるまで 並び替え処理を開始しません。 要素のクリックも可能にした
い場合に使用されます。
dropOnEmpty 型: Boolean 初期値: true
false に指定した場合、並び替え要素を空の接続(連携)要素にドロップ
することが出来なくなります。 (coonectWith オプションを確認してくだ
さい)
forceHelperSize 型: Boolean 初期値: false
true が指定された場合、ヘルパーはサイズを持つことを強制されま
す。
forcePlaceholderSize 型: Boolean 初期値: false
true が指定された場合、プレースホルダ(正式に要素が入るまでの代
替)はサイズを持つことを強制されます。
grid 型: Array 初期値: false
並び替え要素、またはヘルパーを吸着させるグリッドをピクセル単位で
指定します。 [x,y]の配列の形式で指定します。
handle 型: Selector or Element 初期値: false
指定された要素にクリックして並び替えを開始することを強制します。
helper 型: String or Function 初期値: "original"
ドラッグ時に表示するヘルパー要素を指定します。
String
もし、"clone"を指定すれば、その要素のクローンが生成されドラッグ
のヘルパーになります。
Function
ドラッグのヘルパーとする要素を戻り値として返す関数を指定します。
この要素は event と並び替えようとしている要素を引数として受け取り
ます。
items 型: Selector 初期値: "> *"
並び替え機能を付与したい要素をセレクターとして指定します。
opacity 型: Number 初期値: false
並び替え時のヘルパーの透明度を 0.01~1 の数値で指定します。
placeholder 型: String 初期値: false
プレースホルダの class 名を指定します。 指定が無ければ空白になり
ます。
revert 型: Boolean or Number 初期値: false
並び替え要素が新しい位置に配置される(戻される)際に、滑らかなア
ニメーションを使用するか否かを指定します。 (false の場合は、ドラッ
グを離した瞬間に、即座に新しい位置に配置されます。)
Boolean
true が指定されると、デフォルトの duration でアニメーションします。
Number
アニメーションの duration をミリ秒単位で指定します。
scroll 型: Boolean 初期値: true
端に要素がドラッグされた際に、ページがスクロールするか否かを指定
します。
scrollSensitivity 型: Number 初期値: 20
マウスポインタがどれだけ近づいたらスクロールを開始するのかを指定
します。
scrollSpeed 型: Number 初期値: 20
scrollSensitivity の範囲内にマウスポインタが入った際に、 スクロー
ルする速度を指定します。
tolerance 型: String 初期値: "intersect"
項目が入れ替わる重なり具合のモードを指定します。
"intersect"
少なくとも 50%重なったら入れ替わります。
"pointer"
マウスポインタが重なったら入れ替わります。
zIndex 型: Integer 初期値: 1000
並び替え時の要素、ヘルパーの z-index 指定になります。
○メソッド
メソッド 説明
cancel() ソートによる変更をキャンセルし、ソートが開始される直前の状態に
戻します。
$( ".selector" ).sortable( "cancel" );
destroy() 並び替え機能を完全に削除します。
disable() 並び替え機能を無効化します。
enable() 並び替え機能を有効にします。
option( optionName ) 戻り値: Object
optionName に指定したオプションの現在の値を取得します。
optionName
型: String
取得したいオプションの名前を指定します。
option() 戻り値: PlainObject
オプションの各キーと値がペアとなったオブジェクトを返します。
option( optionName,
value )
引数の optionName のオプションに値を設定します。
optionName
型: String
設定したいオプションの名前を指定します。
value
型: Object
設定したい値を指定します。
option( options ) オプションに設定したい各キーと値がペアとなったオブジェクトを指
定します。
option
型: Object
設定したいオプションのキーと名前のペアを指定します。
refresh() 並び替えの項目の要素をリフレッシュします。 全ての並び替え要
素のリロードをトリガし、新しい項目を認識します。
refreshPositions() 並び替え要素のキャッシュされたポジションをリフレッシュします。
serialize( options ) 戻り値: string
並び替え要素の ID 群を form/ajax で送信できる文字列にシリア
ライズします。 このメソッドによって URL に付加するハッシュ文字
列が生成され、新しい順序の情報を簡単にサーバに送信すること
が出来ます。 デフォルトでは、"setname_number"のフォーマッ
トで並び替え要素の id を探し、ハッシュは
"setname[]=number&setname[]=number"のようにして出
力します。
注).もし、シリアライズが空の文字列を返した場合、id 属性にアン
ダースコアが含まれていないか確認してください。 各 id 属性は
"set_number"の形式である必要があり、例えば id 属性が
"foo_1","foo_5","foo_2"の 3 つの要素の リストが存在した場
合、"foo[]=1&foo[]=5&foo[]=2"のように出力します。 アンダ
ースコア、イコール、ハイフンが set と number の区切り文字列と
して使用可能です。 例えば、"foo=1"、"foo-1"、"foo_1"は全て
"foo[]=1"にシリアライズします。
引数 options には、シリアライズ化のカスタマイズをオブジェクトの
ハッシュ形式で指定します。
key
初期値: 区切り文字の前半部分
型: String
指定すると、それがキーとして使用されます。
attribute
初期値: "id"
型: String
シリアライズに使用される値を持つ属性名を指定します。
expression
初期値: /(.+)[‐=_](.+)/
型: RegExp
キーと値を区切るための正規表現を指定します。
toArray() 戻り値: Array
並び替え要素の id 文字列を格納した配列を返します。
widget() 戻り値: Object
並び替え要素を含めた jQuery オブジェクトを返します。
○イベント
イベント 説明
activate( event, ui ) 型: sortactivate
接続リスト(connectWith オプション参照)を使用する場合にこのイベン
トがトリガされ、ドラッグ開始時に接続中のすべてのリストがそれを受信し
ます。
ui.helper
型: jQuery
並び替えヘルパーの jQuery オブジェクトです。
ui.item
型: jQuery
現在ドラッグされている要素の jQuery オブジェクトです。
ui.offset
型: Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型: Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型: Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型: jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
$( ".selector" ).sortable({
activate: function( event, ui ) {}
});
$( ".selector" ).on( "sortactivate", function( even
t, ui ) {} );
beforeStop( event,
ui )
型: sortbeforestop
並び替え操作を停止したが、プレースホルダ/ヘルパーがまだ使用可能
な際にトリガされます。
ui.helper
型: jQuery
並び替えヘルパーの jQuery オブジェクトです。
ui.item
型: jQuery
現在ドラッグされている要素の jQuery オブジェクトです。
ui.offset
型: Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型: Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型: Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型: jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
change( event, ui ) 型: sortchange
並び替えの間、DOM の position が変更されるとトリガされます。
ui.helper
型: jQuery
並び替えヘルパーの jQuery オブジェクトです。
ui.item
型: jQuery
現在ドラッグされている要素の jQuery オブジェクトです。
ui.offset
型: Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型: Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型: Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型: jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
create( event, ui ) 型: sortcreate
並び替え要素が生成された際にトリガされます。
deactivate( event,
ui )
型: sortdeactivate
ソートが停止されたときにこのイベントがトリガされ、 これがトリガされる
と、すべての接続リストに伝播されます。
ui.helper
型: jQuery
並び替えヘルパーの jQuery オブジェクトです。
ui.item
型: jQuery
現在ドラッグされている要素の jQuery オブジェクトです。
ui.offset
型: Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型: Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型: Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型: jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
out( event, ui ) 型: sortout
接続リストに並び替え項目が移動された際にトリガされます。
over( event, ui ) 型: sortover
接続リストに並び替え項目が移動してきた際にトリガれさます。
ui.helper
型: jQuery
並び替えヘルパーの jQuery オブジェクトです。
ui.item
型: jQuery
現在ドラッグされている要素の jQuery オブジェクトです。
ui.offset
型: Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型: Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型: Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型: jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
receive( event, ui ) 型: sortreceive
接続リストが他のリストから並び替え項目を受け取った際にトリガされま
す。
ui.helper
型: jQuery
並び替えヘルパーの jQuery オブジェクトです。
ui.item
型: jQuery
現在ドラッグされている要素の jQuery オブジェクトです。
ui.offset
型: Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型: Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型: Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型: jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
remove( event, ui ) 型: sortremove
並び替え項目がリストからドラッグされて別のリストに移動された際に、ト
リガされます。
ui.helper
型: jQuery
並び替えヘルパーの jQuery オブジェクトです。
ui.item
型: jQuery
現在ドラッグされている要素の jQuery オブジェクトです。
ui.offset
型: Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型: Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型: Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型: jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
sort( event, ui ) 型: sort
並び替えの間、トリガされます。
ui.helper
型: jQuery
並び替えヘルパーの jQuery オブジェクトです。
ui.item
型: jQuery
現在ドラッグされている要素の jQuery オブジェクトです。
ui.offset
型: Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型: Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型: Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型: jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
start( event, ui ) 型: sortstart
並び替えが開始した際にトリガされます。
ui.helper
型: jQuery
並び替えヘルパーの jQuery オブジェクトです。
ui.item
型: jQuery
現在ドラッグされている要素の jQuery オブジェクトです。
ui.offset
型: Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型: Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型: Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型: jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
stop( event, ui ) 型: sortstop
並び替え処理がを停止した際にトリガされます。
ui.helper
型: jQuery
並び替えヘルパーの jQuery オブジェクトです。
ui.item
型: jQuery
現在ドラッグされている要素の jQuery オブジェクトです。
ui.offset
型: Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型: Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型: Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型: jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
update( event, ui ) 型: sortupdate
並び替え処理がを停止し、DOM の position が変更された際にトリガさ
れます。
ui.helper
型: jQuery
並び替えヘルパーの jQuery オブジェクトです。
ui.item
型: jQuery
現在ドラッグされている要素の jQuery オブジェクトです。
ui.offset
型: Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
ui.position
型: Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
ui.originalPosition
型: Object
要素の位置を表す{top, left}のオブジェクトです。
ui.sender
型: jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script> →次のページに続く
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em;
font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon
ui-icon-arrowthick-2-n-s"></span>項目 1</li>
<li class="ui-state-default"><span class="ui-icon
ui-icon-arrowthick-2-n-s"></span>項目 2</li>
<li class="ui-state-default"><span class="ui-icon
ui-icon-arrowthick-2-n-s"></span>項目 3</li>
<li class="ui-state-default"><span class="ui-icon
ui-icon-arrowthick-2-n-s"></span>項目 4</li>
<li class="ui-state-default"><span class="ui-icon
ui-icon-arrowthick-2-n-s"></span>項目 5</li>
<li class="ui-state-default"><span class="ui-icon
ui-icon-arrowthick-2-n-s"></span>項目 6</li>
<li class="ui-state-default"><span class="ui-icon
ui-icon-arrowthick-2-n-s"></span>項目 7</li>
</ul>
</body>
</html>
前ページからの続き
■Accordion を使ってみよう
○概要
jQuery UI のアコーディオンを使用するにはまず下記のような 見出しとコンテ
ンツのペアのコードを用意します。
<div id="accordion">
<h3> 初の見出し</h3>
<div> 初のコンテンツ</div>
<h3>2 番目の見出し</h3>
<div>2 番目のコンテンツ</div>
</div>
<script>
$( "#accordion" ).accordion();
</script>
アコーディオンは、任意のマークアップをサポートしていますが、 各コンテン
ツパネルは常にその関連ヘッダーの次の兄弟要素でなければなりません。 カス
タムマークアップ構造を使用する方法については、オプション header の項目を
参照してください。
キーボード操作のサポートについて
アコーディオンの見出しにフォーカスがある場合、下記のキーコマンドが利用
可能なります。
・[↑]/[←]
一つ前の見出しに戻ります。 初の見出しの場合、 後の見出しに移動します。
・[↓]/[→]
次の見出しに移動します。 後の見出しの場合、 初の見出しに移動します。
・HOME
初の見出しに移動します。
・END
後の見出しに移動します。
・スペース/ENTER
現在の見出しに関連付けられたコンテンツパネルを開きます。
フォーカスがコンテンツパネルにある場合、
・CTRL + [↑]
関連付けられた見出しに移動します。
○オプション
オプション 説明
active 型: Boolean or Integer
初期値: 0
初に開いているパネルを指定します。
Boolean
false を指定すると、全てのパネルを折りたたまれた状態にな
ります。 また、同じオプションの collapsible を true にする必
要があります。
Integer
0 を基準とした数値を指定して、何番目のパネルを予め開いてお
くのかを指定します。 マイナスの値を指定すると、 後のパネル
から遡ってカウントします。
$( ".selector" ).accordion({ active: 2 });
// getter
var active = $( ".selector" ).accordion( "option",
"active" );
// setter
$( ".selector" ).accordion( "option", "active", 2
);
animate
1.9 改名
animated
1.9 非推奨 1.10 削除
型: Boolean or Number or String or Object
初期値: {}
パネルの開閉アニメーションの動作を指定します。
Boolean
false を指定すると、アニメーションを無効化します。
Number
アニメーション時間をミリ秒単位で指定します。
String
easing の名称を指定します。
Object
アニメーション時間と easing の指定をオブジェクトのプロパテ
ィとして設定します。
//1.9~:animate
$( "#accordion" ).accordion({
animate: {
duration: 200,
down: {
easing: "easeOutBounce",
duration: 1000
}
}
});
//1.8:animated
$( "#accordion" ).accordion({
animated: "bounceslide"
});
collapsible 型: Boolean
初期値: false
すべてのパネルを折りたためる事が出来るか否かを指定します。 ア
クティブなパネルを折りたたむ事が出来るようになります。
disabled 型: Boolean
初期値: false
true を指定すると、アコーディオンを無効化します。
event 型: String
初期値: "click"
アコーディオンの見出しが反応してパネルを展開する際のイベントを
指定します。 イベント名を半角スペース区切りで複数指定することが
可能です。
//見出しのマウスオーバーでコンテンツ部分が展開するよう
になります。
$( ".selector" ).accordion({ event: "mouseove
r" });
header 型: Selector
初期値: "> li > :first‐child,> :not(li):even"
.find()を介して見出しとなる要素を指定するセレクタを指定します。
コンテンツパネルは見出し要素のすぐ後の兄弟要素である必要があ
ります。
heightStyle
1.9 追加
(マージ)
autoHeight,clearStyle,
fillSpace
1.9 非推奨 1.10 削除
型: String
初期値: "auto"
アコーディオンと各コンテンツパネルの高さについの制御を指定しま
す。
"auto"
全てのパネルは も高い状態になります。
"fill"
親要素に収まる範疇で も高い状態になります。
"content"
コンテンツに合わせた高さになります。
//1.9~
$( "#accordion" ).accordion({
// (1.8の fillSpace: true 相当)
heightStyle: "fill"
});
//1.8
$( "#accordion" ).accordion({
fillSpace: true
});
icons 型: Object
初期値: {"header": "ui‐icon‐triangle‐1‐e", "activeHeader":
"ui‐icon‐triangle‐1‐s"}
見出し用のアイコンを、 jQuery UI CSS Framework に定義されて
いるアイコン名で指定します。 false を指定するとアイコンは表示され
ません。
※"activeHeader"は 1.8 の headerSelected から改名されていま
す。
//1.9~
$( "#accordion" ).accordion({
icons: {
// パネルが畳まれている時のアイコン
header: "ui‐icon‐circle‐arrow‐e",
// パネルが展開されている時のアイコン
activeHeader: "ui‐icon‐circle‐arrow‐s"
}
});
//1.8
$( "#accordion" ).accordion({
icons: {
// パネルが畳まれている時のアイコン
header: "ui‐icon‐circle‐arrow‐e",
// パネルが展開されている時のアイコン
// 1.9で非推奨、1.10で削除
headerSelected: "ui‐icon‐circle‐arrow‐s
"
}
});
navigation
1.9 非推奨 1.10 削除
型: Boolean
初期値: false
If set, looks for the anchor that matches location.href and
activates it. Great for href-based state-saving. Use the
navigationFilter option to implement your own matcher.
navigationFilter
1.9 非推奨 1.10 削除
型: Function()
初期値: function matching location.href
A function that is invoked for each tab anchor, with the
anchor element as the context. Must return true for the tab
that should be active on initialization.
○メソッド
メソッド 説明
activate( index )
1.9 非推奨 1.10 削除
パネルをアクティブにします。
index
型: Integer
アクティブにしたいパネルを 0 始まりの番号で指定します。
// 1.9~ では、こちらの指定方法を使用してください。
// 3つ目のパネルがアクティブになります。
$( "#accordion" ).accordion( "option", "active", 2 );
// 1.8
$( "#accordion" ).accordion( "activate", 2 );
destroy() アコーディオンの機能を完全に削除します。
1. $( ".selector" ).accordion( "destroy" );
disable() アコーディオンを無効化します。
enable() アコーディオンを有効にします。
option( optionName ) 戻り値: Object
optionName に指定したオプションの現在の値を取得します。
optionName
型: String
取得したいオプションの名前を指定します。
option() 戻り値: PlainObject
オプションの各キーと値がペアとなったオブジェクトを返します。
option( optionName,
value )
引数の optionName のオプションに値を設定します。
optionName
型: String
設定したいオプションの名前を指定します。
value
型: Object
設定したい値を指定します。
option( options ) オプションに設定したい各キーと値がペアとなったオブジェクトを
指定します。
option
型: Object
設定したいオプションのキーと名前のペアを指定します。
refresh()
1.9 改名
resize()
1.9 非推奨 1.10 削除
アコーディオンのパネルの高さを再描画します。 結果は
heightStyle オプションに依存します。
widget() 型: jQuery
アコーディオンを含めた要素を、jQuery オブジェクトとして返しま
す。
○イベント
イベント 説明
activate
( event, ui )1.9 改名
change
( event, ui )1.9 非推奨
1.10 削除
型: accordionactivate
パネルがアクティブになった後(アニメーション完了後)にトリガされま
す。 アコーディオンが折りたたまれていた場合、ui.oldHeader と
ui.oldPanelは空の jQueryオブジェクトになります。 また、アコーディ
オンが折りたたまれた場合、ui.newHeader と ui.newPanel は空の
jQuery オブジェクトになります。
ui.newHeader
アクティブになったヘッダー
ui.oldHeader
非アクティブになったヘッダー
ui.newPanel
アクティブになったコンテンツパネル (change では、
ui.newContent)
ui.oldPanel
非アクティブになったコンテンツパネル (change では、
ui.oldContent)
$( ".selector" ).accordion({
activate: function( event, ui ) {}
});
$( ".selector" ).on( "accordionactivate", function( even
t, ui ) {} );
beforeActivate
( event, ui )1.9 改名
型: accordionbeforeactivate
パネルがアクティブになる直前にトリガされます。 パネルがアクティブ
changestart
( event, ui )1.9 非推奨
1.10 削除
になることをキャンセルすることが可能です。 アコーディオンが折りた
たまれていた場合、ui.oldHeader と ui.oldPanel は空の jQuery オ
ブジェクトになります。 また、アコーディオンが折りたたまれた場合、
ui.newHeader と ui.newPanel は空の jQuery オブジェクトになりま
す。
ui.newHeader
アクティブになったヘッダー
ui.oldHeader
非アクティブになったヘッダー
ui.newPanel
アクティブになったコンテンツパネル
(changestart では、ui.newContent)
ui.oldPanel
非アクティブになったコンテンツパネル
(changestart では、ui.oldContent)
create( event, ui )1.9
追加
型: accordioncreate
アコーディオンが生成された際にトリガされます。
ui.header
アクティブなヘッダーを参照します。
ui.panel
アクティブなパネルを参照します。 (ui.content から改名されました。
ui.content は非推奨になっています。)
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div id="accordion">
<h3>セクション 1</h3>
<div>
<p>
デフォルトのアコーディオンです。
</p>
</div>
<h3>セクション 2</h3>
<div>
<p>
セクション 2のコンテンツ領域です。
</p>
</div>
<h3>セクション 3</h3>
<div> →次のページに続く
<p>
セクション 3のコンテンツ領域です。
</p>
<ul>
<li>リスト項目 1</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
</ul>
</div>
<h3>セクション 4</h3>
<div>
<p>
セクション 4のコンテンツ領域です。
</p>
</div>
</div>
</body>
</html>
前ページからの続き
■Autocomplete を使ってみよう
○概要
オートコンプリートは、記事へのタグ付け、アドレス帳からのメールアドレス
入力、都市名、郵便番号の入力の際に使用されると便利です。 リストへ表示す
る項目は、ローカルまたはリモートから、そのデータを取得することが可能で
す。 ローカルからの取得は小規模なデータセット、例えば 50 件程のアドレス
帳で使用するのに適しており、また 数百、数百万のデータベースなどの大規模
なデータを取扱う場合は、リモートからの取得が必要になります。 データ取得
の詳細を調べるには、オプションの source を参照してください。
<label>プログラム言語を選択してください。</label>
<input id="autocomplete" />
<script>
$( "#autocomplete" ).autocomplete({
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp",
"ruby" ]
});
</script>
キーボード操作のサポートについて
リストメニューが表示されている場合、下記のキーコマンドが利用可能なりま
す。
・[↑]
1 つ上の項目に移動します。 1 つ目の項目であればテキストフィールドに移動
し、テキストフィールドであれば 後の項目に移動します。
・[↓]
1 つ下の項目に移動します。 後の項目であればテキストフィールドに移動
し、テキストフィールドであれば 初の項目に移動します。
・ESCAPE
リストメニューを閉じます。
・ENTER
現在フォーカスのある項目を選択し、リストメニューを閉じます。
・TAB
現在フォーカスのある項目を選択して、リストメニューを閉じ、次の要素に
フォーカスを移動します。
リストメニューが閉じている場合、次のキーが利用できます。
・[↑][↓]
オプションの minLength の条件を満たしていれば、リストメニューを開きます。
○オプション
オプション 説明
appendTo 型: Selector
初期値: "body"
リストメニューの要素をどの要素内に挿入するのか決定します。 スクロールした際に
ポップアップメニュー位置が固定されてしまうため、オートコンプリートが
position:fixed の要素内にある場合はこれを上書きします。
$( ".selector" ).autocomplete({ appendTo: "#someElem" });
// getter
var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );
// setter
$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" );
autoFocus 型: Boolean
初期値: false
true を設定すると、メニューが開いた際に 初の項目を選択します。
collapsible 型: Boolean
初期値: false
すべてのパネルを折りたためる事が出来るか否かを指定します。 アクティブなパネル
を折りたたむ事が出来るようになります。
delay 型: Integer
初期値: 300
キーストロークされてから、リストメニューの検索が実行されまでの遅延時間をミリ秒
単位で指定します。 リモートデータを取り扱う場合は、サーバへの負荷を考慮する必
要があります。
event 型: String
初期値: "click"
アコーディオンの見出しが反応してパネルを展開する際のイベントを指定します。 イ
ベント名を半角スペース区切りで複数指定することが可能です。
//見出しのマウスオーバーでコンテンツ部分が展開するようになります。
$( ".selector" ).accordion({ event: "mouseover" });
disabled 型: Boolean
初期値: false
true を設定すると、オートコンプリートを無効化します。
minLength 型: Integer
初期値: 1
リストメニューの検索が実行されるのに必要なユーザーが入力する 低限の文字列
数を指定します。 0 指定は、ローカルデータで項目数がそれほど多くないのであれば
有用ですが、リモートデータで データ数も多いケースでは、状況に合わせて高い数値
を指定する必要があります。
position 型: Object
初期値: { my: "left top", at: "left bottom", collision: "none" }
input 要素に対するリストメニューの位置を指定します。 of オプションはデフォルトで
は input 要素を指定しますが別の要素に変更することも可能です。 また、このオプシ
ョンの使い方について、jQuery UI Position を参照して、 更に詳しい指定の方法を
確認してみてください。
$( ".selector" ).autocomplete({ position: { my : "right top", at: "ri
ght bottom" } });
source 型: Array or String or Function(Object request, Function response(Object
data))
初期値: 無し(入力必須)
使用するデータを定義します。この項目は必ず入力してください。
指定した型とは無関係に、リストメニューのラベルは全てテキストとして扱われます。
もし HTML を扱いたい場合は、jquery.ui.autocomplete.html.js で拡張すること
によって使用可能になります。
○メソッド
メソッド 説明
close() オートコンプリートメニューを閉じます。 search メソッドと組み合わせ
てメニューを閉じる際に使用すると便利です。
$( ".selector" ).autocomplete( "close" );
destroy() オートコンプリートの機能を完全に削除します。
disable() オートコンプリートを無効化します。
enable() オートコンプリートを有効にします。
option( optionName ) 戻り値: Object
optionName に指定したオプションの現在の値を取得します。
optionName
型: String
取得したいオプションの名前を指定します。
option() 戻り値: PlainObject
オプションの各キーと値がペアとなったオブジェクトを返します。
option( optionName,
value )
引数の optionName のオプションに値を設定します。
optionName
型: String
設定したいオプションの名前を指定します。
value
型: Object
設定したい値を指定します。
option( options ) オプションに設定したい各キーと値がペアとなったオブジェクトを指定
します。
option
型: Object
設定したいオプションのキーと名前のペアを指定します。
search( [value] ) ダイアログがドラッグされている間、トリガされます。
[value]
型: String Search イベントをトリガして、イベントがキャンセルされ
なければデータを絞り込みます。 これはセレクトボックス風のボタンを
クリックして候補リストを表示したい場合に便利です。 [value]に何も
指定されなかった場合は、入力されている値が使用されます。 もし、
空文字列を指定し且つ minLength:0 であれば、全ての項目を表示
します。
widget() メニュー要素を含む jQuery オブジェクトを返します。 メニュー要素は
常に作成、破棄が行われますが、要素自体は初期化時に生成され、
再利用されています。
○イベント
イベント 説明
change( event, ui ) 型: autocompletechange
入力値が変更された時にトリガされます。
ui.item
型: jQuery
もし、メニューが選択されていればその項目を取得します。 そう
でなければ null になります。
$( ".selector" ).autocomplete({
change: function( event, ui ){
//実行したい処理
}
);
$( ".selector" ).on( "autocompletechange", function(event, ui){
//実行したい処理
);
create( event, ui ) 型: autocompletecreate
オートコンプリートが生成された際にトリガされます。
focus( event, ui ) 型: autocompletefocus
フォーカスがメニューに移った(選択はされていない)際にトリガされます。
デフォルトのアクションは、イベントがキーボード操作によってトリガされた
ものの場合にのみ、 フォーカスされた項目の値を使用して、テキストフィ
ールドの値を交換します。
ui.item
フォーカスされたメニューの項目
open( event, ui ) 型: autocompleteopen
候補となるメニューリストが開かれた、または更新された際にトリガされま
す。
response( event,
ui )
1.9 追加
型: autocompleteresponse
候補となるメニューの項目が検索完了後で且つメニューを開く直前にトリ
ガされます。 オプションsourceのコールバックが必要とされないローカル
データを操作したい場合に便利です。 このイベントは、検索結果が 0 件で
あったりオートコンプリートが無効化されていてメニューが表示されない場
合でも、 検索完了後に常にトリガされます。
ui.content
型: Array
検索されたデータを受けとって、表示前に編集することが可能です。この
データは常に正規化されており、編集する際にはラベルと値のプロパティ
になっている事を確認してください。
search( event, ui ) 型: autocompletesearch
minLength と delay の条件を満たし、検索を実行する直前にトリガされ
ます。 もしキャンセルされた場合、検索のためのリクエストは送信されず、
候補リストも取得されません。
select( event, ui ) 型: autocompleteselect
メニューから項目を選択した際にトリガされます。 デフォルトの動作は、選
択した項目を入力項目と置き換えます。 キャンセルをすると、入力項目と
の置き換えを行いませんが、メニューを閉じることをキャンセルすることは
出来ません。
ui.item
型: jQuery
選択した項目。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
→次のページに続く
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet"
/>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
//リストを指定
前ページからの続き
→次のページに続く
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">プログラミング言語: </label>
<input id="tags" />
</div>
</body>
</html>
前ページからの続き
■Button を使ってみよう
○概要
input と anchor 等のボタン的な要素に、テーマ毎に hover と action を含むデザ
インを適用し、標準的な機能を強化します。
button 要素だけでなく、ラジオボタンやチェックボックスも jQuery UI ボタン
に変換することができます。 関連付けられたラベルはボタン上に表示されるよ
うにスタイルが設定されます。 ラベルとボタンにする要素の関係性を正しく示
すため、input の id 属性を値を指定し、その値を label の for 属性に指定して
ください。 また、アクセシビリティの問題があるため、label 要素内に input
要素を入れないでください。
ラジオボタンをグループ化するために、ボタンはボタンセット(Buttonset)と呼
ばれるウィジットも提供しています。 ボタンセットはコンテナ要素(ラジオボ
タンを含める)の選択に使用され、.buttonset()で呼び出されます。 また視覚
的なグループ化の機能も提供するので、ボタンのグループ化をする際には常に
使用すべきです。
これは全ての子孫要素を選択して、.button()メソッドを適用します。 ボタン
セットを有効化・無効化を行うことが可能で、含まれるボタンが一括で有効化・
無効化されます。 また、ボタンセットの destroy では、それぞれのボタンの
destroy()メソッドが呼ばれます。 input type="button"または、"submit"、
"reset"を使用している場合、サポートはアイコン無しのプレーンテキストに制
限されます。
<button>ボタン</button>
<script>
$( "button" ).button();
</script>
○オプション
オプション 説明
disabled 型: Boolean
初期値: false
true にすると、ボタンを無効化します。
icons 型: Object
初期値: { primary: null, secondary: null }
テキストと一緒に、またはテキスト無しでボタン上にアイコンを表示します。(テキストの
詳細は textオプション参照) デフォルトでは、primary に指定したアイコンはテキスト
の左側に、secondary は右側に表示されます。
ポジションは CSS によって制御され、各プロパティには"ui-icon-gear"などの class
名を指定してください。 1 つだけ指定したい場合は、 icons: { primary:
"ui‐icon‐locked" } のように指定し、 2 つ指定したい場合は、 icons: { primary:
"ui‐icon‐gear", secondary: "ui‐icon‐triangle‐1‐s" }. のように指定します。
アイコン一覧(http://js.studio-kingdom.com/jqueryui/tips/icons)
$(".selector").button({ icons: {primary: "ui‐icon‐gear", secondary: "ui‐
icon‐triangle‐1‐s"}});
// getter
var icons = $(".selector" ).button("option", "icons");
// setter
$(".selector").button("option", "icons", {primary: "ui‐icon‐gear", secon
dary: "ui‐icon‐triangle‐1‐s"});
label 型: String
初期値: null
ボタンに表示するテキストを指定します。 もし、指定されなかった(null の)場合、対象
要素が input の submit、reset なら、value の値が、 ラジオボタンやチェックボック
スであれば関連付けられたラベルの値が適用されます。
text 型: Boolean
初期値: true
ラベル表示をするか否かを指定します。 もし、falseが指定された場合、ラベルのテキ
ストは表示されませんが icons オプションの指定が有効でなければいけません。 そう
でなければ、この text の指定は無視されます。
○メソッド
メソッド 説明
destroy() ボタンの機能を完全に削除します。
disable() ボタンを無効化します。
enable() ボタンを有効にします。
option( optionName ) 戻り値: Object
optionName に指定したオプションの現在の値を取得します。
optionName
型: String
取得したいオプションの名前を指定します。
option() 戻り値: PlainObject
オプションの各キーと値がペアとなったオブジェクトを返します。
option( optionName,
value )
引数の optionName のオプションに値を設定します。
optionName
型: String
設定したいオプションの名前を指定します。
value
型: Object
設定したい値を指定します。
option( options ) オプションに設定したい各キーと値がペアとなったオブジェクトを指
定します。
option
型: Object
設定したいオプションのキーと名前のペアを指定します。
refresh() ボタンの見た目の部分をリフレッシュします。 プログラム処理で直
接対照の要素のチェック状態などを変えた際に有用です。
widget() 型: jQuery
ボタンの見た目に関する部分を含めた要素を、jQuery オブジェクト
として返します。
○イベント
イベント 説明
create( event, ui ) 型: buttoncreate
ボタンが生成された際にトリガされます。
○ソース
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(function() {
$( "input[type=submit], a, button" )
.button()
.click(function( event ) {
event.preventDefault();
});
});
</script>
</head>
<body>
<button>button 要素</button>
<input type="submit" value="submit ボタン" />
<a href="#">anchor 要素</a>
</body>
</html>
■Datepicker を使ってみよう
○概要
jQuery UI の Datepicker はページに高機能なカレンダー型の日付選択の UIを追
加します。 オプションによって、日付フォーマットや言語の選択、選択できる
日付の範囲の制限、 ボタンやナビゲーションの追加などのカスタマイズをする
ことが出来ます。
デフォルト設定では、関連付けられたテキストフィールドにフォーカスされた
場合に DatePicker はカレンダーを小さなオーバーレイで開きます。 インライ
ンカレンダーについては、単純に div または span に DatePicker を指定してく
ださい。
DatePicker はいくつかの機能的な CSS を必要とします。 この CSS が読み込めな
いと機能しないため、 初に必要とする CSS を読み込むようにしてください。
キーボード操作のサポートについて
カレンダーが開いている場合、下記のキーコマンドが利用可能なります。
・PAGE UP
前の月に移動します。
・PAGE DOWN
次の月に移動します。
・Ctrl + PAGE UP
前の年に移動します。
・Ctrl + PAGE DOWN
次の年に移動します。
・Ctrl + HOME
現在の月を開きます。 もし、カレンダーが閉じていれば開きます。
・Ctrl + [←]
前の日に移動します。
・Ctrl + [→]
次の日に移動します。
・Ctrl + [↑]
前の週に移動します。
・Ctrl + [↓]
次の週に移動します。
・Enter
フォーカスされている日を選択します。
・Ctrl + END
カレンダーを閉じ、日付を消去します。
・ESCAPE
未選択でカレンダーを閉じます。
汎用的な機能について
・$.datepicker.setDefaults( settings )
全ての datepicker の初期設定を行います。 個別の datepicker の設定を変更
するには、option メソッドを使用してください。
下記例は、全ての datepicker がフォーカスが当たった時、またはアイコンをク
リックした際に開くように初期設定しています。
$.datepicker.setDefaults({
showOn: "both",
buttonImageOnly: true,
buttonImage: "calendar.gif", →次のページに続く
buttonText: "Calendar"
});
下記例は、全ての datepcker のテキストが日本語になるように初期設定してい
ます。
$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
・$.datepicker.formatDate( format, date, settings )
指定された日付フォーマットで、日付文字列を設定します。
下記例は、ISO 日付フォーマットに沿った"2007-01-26"という文字列を出力しま
す。
$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );
フランス語フォーマットで拡張された日付"Samedi, Juillet 14, 2007"を出力
します。
$.datepicker.formatDate( "DD, MM d, yy", new Date( 2007, 7 - 1, 14 ), {
dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort,
dayNames: $.datepicker.regional[ "fr" ].dayNames,
monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort,
monthNames: $.datepicker.regional[ "fr" ].monthNames
});
・$.datepicker.parseDate( format, value, settings )
指定された形式の文字列値から日付を抽出します。
下記に該当する場合、例外がスローされます。(nn は、原因が何文字目なのかを
示します)
例外 詳細
'Invalid arguments' 値またはフォーマットが null
'Missing number at position nn' フォーマットに合致しない数値を指定
'Unknown name at position nn' フォーマットに合致しない曜日名、ま
前ページからの続き
たは月名を指定
'Unexpected literal at position nn' フォーマットに合致しないリテラル値
を指定
'Invalid date' '2007/02/31'のような、不正な日付値
を指定
・$.datepicker.iso8601Week( date )
与えられた日付の年の週を、1~53 の値で判定します。
この関数はISO8601の週についての定義を使用しています。(週始まりは月曜で、
第 1週は 1/4 を含む) そのため、第 1週に前年の 3日が含まれれば、それは本
年の週の曜日として扱われ、 本年の 3日が前年の 終週に含まれれば、前年の
週の曜日として扱われます。
この関数は calculateWeek オプションのデフォルト関数です。
下記例では、指定した日付が第何週なのかを調べてます。
$.datepicker.iso8601Week( new Date( 2007, 1-1, 26 ) );
// 1-1 は javaScript の月が 0始まりなための対応
・$.datepicker.noWeekends
beforeShowDay のような設定で使用する関数で、週末を選択されるのを防ぎま
す。
beforeShowDay オプション内で使用され、noWeekends()関数が全ての週末日を算
出し、 その日付が選択出来るか否かを示す true/false の配列を返します。
下記例は、datepicker が週末が選択できないように設定をしています。
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
○日付フォーマット
引数に指定できる日付フォーマットの一覧です。
フォーマット 説明
d 日(0 詰め無し)
dd 日(0 詰め有り)
o 年間通算日(年,0 詰め無し)
oo 年間通算日(年,3 桁の 0 詰め)
D 曜日(略名)
DD 曜日
m 月(0 詰め無し)
mm 月(0 詰め有り)
M 月名(略名)
MM 月名
y 年(2 桁)
yy 年(4 桁)
@ Unix タイムスタンプ(マイクロ秒:1970/01/01~)
! Windows 時計(?) (100ns:0001/01/01~)
'...' リテラルテキスト
'' シングルクォート
それ以外 リテラルテキスト
$.datepicker に事前定義されていて利用可能な書式は下記のとおりです。
定義済み フォーマット
ATOM 'yy-mm-dd' (RFC 3339/ISO 8601 と同じ)
COOKIE 'D, dd M yy'
ISO_8601 'yy-mm-dd'
RFC_822 'D, d M y' (RFC 822 参照)
RFC_850 'DD, dd-M-y' (RFC 850 参照)
RFC_1036 'D, d M y' (RFC 1036 参照)
RFC_1123 'D, d M yy' (RFC 1123 参照)
RFC_2822 'D, d M yy' (RFC 2822 参照)
RSS 'D, d M y' (RFC 822 と同じ)
TICKS '!'
TIMESTAMP '@'
W3C 'yy-mm-dd' (ISO 8601 と同じ)
○日本語化
Datepicker は言語別の表示、日付フォーマット等のローカライズ機能を提供し
てくれます。 それぞれのローカライズはそれぞれの言語コード付きのファイル
に含まれています。(日本語なら jquery.ui.datepicker-ja.js) ローカライズフ
ァイルは Datepicker の本体のファイルの後に読み込まなければいけません。
Datepicker 日本語化に必要なローカライズファイルは「i18n」フォルダ内に格
納されています。
日本語化するには、この中の日本語用のファイルを読み込み、
「$.datepicker.setDefaults」で日本の言語コードを指定する必要があります。
<script src="jquery.ui.datepicker-ja.js"></script>
$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
$.datepicker.regional は、言語コードを指定するローカライゼーション用の配
列で、空文字を指定するとデフォルトの英語が参照されます。 この値は下記の
項目に影響を与えます。
closeText
prevText
nextText
currentText
monthNames
monthNamesShort
dayNames
dayNamesShort
dayNamesMin
weekHeader
dateFormat
firstDay
isRTL
showMonthAfterYear
yearSuffix
デフォルトのローカライゼーションに戻したい場合は、下記のように指定しま
す。
$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
特定のカレンダーだけローカライゼーションを別に指定したい場合は、下記の
ように指定します。
$( selector ).datepicker( $.datepicker.regional[ "ja" ] );
○オプション
オプション 説明
altField 型: Selector or jQuery or Element
初期値: ""
ここで指定した input 要素に、datepicker で選択した日付が入
力・更新されます。 altFormat オプションにフォーマットを指定す
れば、そのフォーマットが適用されます。
$( ".selector" ).datepicker({ altField: "#actualDate"
});
// getter
var altField = $( ".selector" ).datepicker( "option", "al
tField" );
// setter
$( ".selector" ).datepicker( "option", "altField", "#act
ualDate" );
altFormat 型: String
初期値: ""
dateFormat オプションは、altField オプションのために使用され
ます。 指定可能な日付のフォーマットを参照してください。
appendText 型: String
初期値: ""
日付テキストフィールドの後ろに添えるテキストを指定します。
autoSize 型: Boolean
初期値: false
現在の日付フォーマットに合わせてテキストフィールドのサイズを自
動的に調整します。
beforeShow 型: Function( Element input, Object inst)
初期値: null
この関数はテキストフィールド要素と DatePicker のインスタンスを
取得し、 DatePicker に与えるオプションオブジェクトを返すことで
DatePicker を更新します。 DatePicker が表示される直前に呼
び出されます。
beforeShowDay 型: Function(Date date)
初期値: null
この関数は日付パラメータを取得し、戻り値として配列を返さなけ
ればなりません。
[0]はその日付を選択できるか否かを示す値(true/false)を
指定します。
[1]は CSS の class 名を指定します。""を指定すると、デフォ
ルト指定で表示されます。
[2]はその日付のための任意のポップアップツールチップにな
ります。
この関数は各日付を DatePicker 内に表示する直前に呼び出され
ます。
buttonImage 型: String
初期値: ""
ボタン上に表示する画像の URL を指定します。 もし指定されれ
ば、buttonText オプションは alt の値になり、直接表示されなくな
ります。
buttonImageOnly 型: Boolean
初期値: false
ボタン画像を指定された画像だけを表示するか、ボタン内に表示す
るかを指定します。
buttonText 型: String
初期値: "..."
ボタンに表示するテキストを指定します。 showOn オプションの
"button"または"both"と連動して使用します。
calculateWeek 型: Function()
初期値: jQuery.datepicker.iso8601Week
与えられた日付から 1 年のうちの週を計算する関数を指定します。
デフォルトの設定では、ISO 8601 に定義されている、週が月曜始
まりとして、 年の始まりは 初の木曜日を含む週として計算されま
す。
changeMonth 型: Boolean
初期値: false
月をテキストの代わりにドロップダウンを表示するか否かを指定し
ます。
changeYear 型: Boolean
初期値: false
年をテキストの代わりにドロップダウンを表示するか否かを指定し
ます。 yearRange オプションによって選択できる年を制御するこ
とが出来ます。
closeText 型: String
初期値: "Done"
閉じるリンクに表示するテキストを指定します。
showButtonPanel オプションの指定によってボタンを表示しま
す。
constrainInput 型: Boolean
初期値: true
true の場合、dateFomart で指定された形式でしか、入力値を受
け付けないようになります。
currentText 型: String
初期値: "Today"
当日のリンクに表示するテキストを指定します。
showButtonPanel オプションを指定するとこのボタンを表示しま
す。
dateFormat 型: String
初期値: "mm/dd/yy"
解析と表示をする日付のフォーマットを指定します。 指定可能なフ
ォーマットについては、日付フォーマットの項目を参照してください。
dayNames 型: Array
初期値: ["Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"]
長め曜日名のリストを指定します。開始は日曜日からになります。
dayNamesMin 型: Array
初期値: [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]
短縮された曜日名のリストを指定します。開始は日曜からになりま
す。 カレンダーのヘッダーで使用されます。
dayNamesShort 型: Array
初期値: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]
短めの曜日名のリストを指定します。開始は日曜日からになりま
す。
defaultDate 型: Date or Number or String
初期値: null
ページが開かれた際に、テキストフィールドが空だった場合、ハイラ
イトされる日付を指定します。 指定には日付オブジェクト、当日を
基準に数値での指定(例: +7)、日付フォーマットに沿った文字列、
または文字列による値と期間区切りを使用した指定('y'は年、'm'
は月、'w'は週、'd'は日 例:'+1m+7d')をすることが出来ます。
また、null が指定されると当日が設定されます。
Date
指定する日付オブジェクト
Number
当日を基準とした数値を指定します。例えば 2 は当日から 2 日後
を、-1 は昨日を表します。
String
dateFormat オプションで定義された日付の文字列か、相対日付
の文字列を指定します。 相対日付は期間区切りを含む組み合わ
せを含む必要があります。(例:"+1m +7d"は当日から 1 ヶ月と 7
日後が指定されます。)
duration 型: String
初期値: "normal"
DatePicker が表示されるスピードを指定します。 ミリ秒単位の数
値、または用意されている"slow", "normal", "fast"の 3 つのう
ちの 1 つを指定します。
firstDay 型: Integer
初期値: 0
週の始まりの曜日を指定します。 0 なら日曜日、1 なら月曜日にな
ります。
gotoCurrent 型: Boolean
初期値: false
true が指定されると、「当日リンク」先が当日の代わりに選択され
ている日付に移動するようになります。
hideIfNoPrevNext 型: Boolean
初期値: false
標準では、次の月へと前の月へのリンクは有効でなければ無効化
状態になります。(詳細は minDate と maxDate のオプション参
照) このオプションに true を指定すれば、この場合に非表示にな
ります。
isRTL 型: Boolean
初期値: false
現在の言語を右から左に表示するか否かを指定します。
maxDate 型: Date or Number or String
初期値: null
選択可能な 大日付を指定します。 null を指定すると無制限にな
ります。
Date
指定する日付オブジェクト
Number
当日を基準とした数値を指定します。例えば 2 は当日から 2 日後
を、-1 は昨日を表します。
String
dateFormat オプションで定義された日付の文字列か、相対日付
の文字列を指定します。 相対日付は期間区切りを含む組み合わ
せを含む必要があります。(例:"+1m +7d"は当日から 1 ヶ月と 7
日後が指定されます。)
minDate 型: Date or Number or String
初期値: null
選択可能な 大日付を指定します。 null を指定すると無制限にな
ります。
Date
指定する日付オブジェクト
Number
当日を基準とした数値を指定します。例えば 2 は当日から 2 日後
を、-1 は昨日を表します。
String
dateFormat オプションで定義された日付の文字列か、相対日付
の文字列を指定します。 相対日付は期間区切りを含む組み合わ
せを含む必要があります。(例:"+1m +7d"は当日から 1 ヶ月と 7
日後が指定されます。)
monthNames 型: Array
初期値: [ "January", "February", "March", "April", "May",
"June", "July", "August", "September", "October",
"November", "December" ]
月のフルネームのリストを指定します。
monthNamesShort 型: Array
初期値: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
"Aug", "Sep", "Oct", "Nov", "Dec" ]
短めの月名のリストを指定します。
navigationAsDateFormat 型: Boolean
初期値: false
prevText と nextText のオプションを日付フォーマットに沿って変
換したものを表示するか否かを指定します。
nextText 型: String
初期値: "Next"
次の月へのリンクのテキストを指定します。 標準のThemeRoller
のスタイルであれば、この値はアイコンに置き換えられます。
numberOfMonths 型: Number or Array
初期値: 1
1 度に表示する月の数を指定します。
Number
1 つの行に表示する月の数を指定します。
Array
表示する行と列の数を指定します。
$( ".selector" ).datepicker( "option", "num
berOfMonths", [ 2, 3 ] );
onChangeMonthYear 型: Function(Integer year, Integer month, Object inst)
初期値: null
DatePicker が新しい月、または年に移動した際に呼び出さしたい
関数を指定します。 この関数は指定した年、月(1~12)、また、
DatePicker のインスタンスを引数として受け取ります。 関数内の
this は関連している input フィールドを参照します。
onClose 型: Function( String dateText, Object inst )
初期値: null
日付が選択された、されないに関わらず DatePicker が閉じられた
際に呼び出したい関数を指定します。 この関数は日付文字列(未
選択時は"")と、DatePicker のインスタンスを引数として受け取り
ます。 関数内の this は関連している input フィールドを参照しま
す。
onSelect 型: Function( String dateText, Object inst )
初期値: null
日付が選択された際に呼び出したい関数を指定します。 この関数
は日付文字列と、DatePicker のインスタンスを引数として受け取
ります。 関数内の thisは関連している inputフィールドを参照しま
す。
prevText 型: String
初期値: "prev"
前の月へのリンクのテキストを指定します。 標準のThemeRoller
のスタイルであれば、この値はアイコンに置き換えられます。
selectOtherMonths 型: Boolean
初期値: false
現在の月の前、または後ろに表示される他の月の日付を選択可能
にするか否かの指定をします。 showOtherMonths オプションが
true の場合のみ、適用されます。
shortYearCutoff 型: Number or String
初期値: "+10"
dateFormat で'y'(年を 2 桁)を使用した場合、世紀を切り替える
基準を設定します。 入力値が指定された値と同じまたはそれ以下
であれば、今世紀(2000 年)とみなされ、 それより大きい値であれ
ば、前の世紀(1900 年)とみなされます。
Number
0~99 の切り離す年を指定します。
String
現在の年の相対で指定します。(例:"+3", "-5")
showAnim 型: String
初期値: "show"
DatePicker が表示/非表示される際のアニメーション名を指定し
ます。 "show"(デフォルト)、"slideDown"、"fadeIn"や jQuery
UI Effect で定義されているものを使用します。 空文字列を指定
すると、アニメーションがオフになります。
showButtonPanel 型: Boolean
初期値: false
ボタンを表示するか否かを指定します。
showCurrentAtPos 型: Number
初期値: 0
numberOfMonths を通して複数の月を表示する際に、現在の月
をどの位置に表示するかを指定します。
showMonthAfterYear 型: Boolean
初期値: false
ヘッダー内で年の後ろに月を表示するか否かを指定します。
showOn 型: String
初期値: "focus"
DatePicker が表示されるイベントを指定します。 フォーカスがあ
たった際に表示するならば"focus"、 ボタンが押された際に表示
するならば"button"、 両方のイベントで表示したいのであれば
"both"を指定します。
showOptions 型: Object
初期値: {}
showAnim オプションで jQuery UI Effect の指定を使用した場
合、 このオプションを通して更に追加の設定を行うことが可能で
す。
showOtherMonths 型: Boolean
初期値: false
他の月の日付を現在の月の 初と終わりに表示するか否かを指
定します。(選択不可) selectOtherMonths オプションを指定する
ことで、選択可能になります。
showWeek 型: Boolean
初期値: false
true を指定すると年による週を表示するカラム行を追加します。
calculateWeek オプションによって週をどのように計算するか指
定することが出来ます。 また、firstDay オプションによって開始日
を変更することも可能です。
stepMonths 型: Number
初期値: 1
次へ/前へリンクをクリックした際に、移動する月数を指定します。
weekHeader 型: String
初期値: "Wk"
yearRange 型: String
初期値: "c‐10:c+10"
年選択のドロップダウンに表示する範囲を指定します。 また、この
オプションが影響するのはドロップダウンに対してのみであり、 選
択可能な日付を制限したいのであれば、minDate と maxDate オ
プションを 使用してください。
"-nn:+nn"
現在の年の相対を指定
"c-nn:c+nn"
選択されている年の相対を指定
"nnnn:-nn"
上記の組み合わせで指定
yearSuffix 型: String
初期値: ""
月のヘッダーに表示する年の後ろに続く文字列を指定します。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(function() {
$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>日付: <input type="text" id="datepicker" /></p>
<p id="test"></p>
</body>
</html>
■Dialog を使ってみよう
○概要
タイトルバーとコンテツ領域を持ったダイアログです。 このダイアログは次の
ような機能を提供します。
・マウスドラッグで移動
・ダイアログのサイズを、マウスドラッグで変更
・[☓]アイコンをクリックして、ダイアログを閉じる
・コンテンツ量に応じて、自動的にスクロールバーを表示
・下部のボタンバーと、モーダル機能をオプションで設定可能
次のようにして、ダイアログを呼び出します。
<div id="dialog" title="ダイアログのタイトル">ダイアログの内容</div>
<script>
$( "#dialog" ).dialog( "open" );
</script>
すぐにダイアログを表示したくない場合は、下記のように autoOpen:false を指
定します。
<button id="opener">ダイアログを開く</button>
<div id="dialog" title="ダイアログのタイトル">ダイアログの内容</div>
<script>
//すぐにダイアログが開かないように autoOpen:false を指定
$( "#dialog" ).dialog({ autoOpen: false });
//ボタンがクリックされたらダイアログを開く
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
ダイアログを閉じたい場合は、下記のように指定します。
$(foo).dialog('close');
○オプション
オプション 説明
autoOpen 型: Boolean
初期値: true
trueであれば、初期化時に自動的にダイアログが開きます。 falseを指
定すると、.open()メソッドが呼ばれるまでダイアログは非表示になりま
す。
appendTo1.10 追加 型: Selector
初期値: "body"
ダイアログ(モーダル時のオーバーレイの要素も)を挿入する要素を指定
します。
buttons 型: Object, Array
初期値: {}
ダイアログに表示されるボタンを指定します。 複数のボタンを指定可能
で、ボタンが押下された際の処理をコールバック関数として設定可能で
す。 ボタンへのアクセスが必要な場合は、event オブジェクトの target
で利用することが出来ます。
$(".selector").dialog(
{buttons:[
{ //OKボタンの設定 ‐‐start‐‐
text: "Ok",
click: function(){
$( this ).dialog( "close" );
}
} //OKボタンの設定 ‐‐end‐‐
]}
0. );
closeOnEscape 型: Boolean
初期値: true
ダイアログフォーカス時に ESC キーの押下でダイアログを閉じるか否か
を決定します。
closeText 型: String
初期値: "close"
ダイアログを閉じるボタンのテキストを指定します。 デフォルトのテーマ
では、閉じるボタンは表示サれてないことに注意してください。
dialogClass 型: String
初期値: ""
ダイアログに指定した任意の class 名を追加します。
disabled 型: Boolean
初期値: false
ダイアログの無効(true)、有効(false)の初期設定を行います。
draggable 型: Boolean
初期値: true
true に設定すると、タイトルバーをドラッグしてダイアログを移動すること
が可能になります。 有効にするためには、 Draggableウィジットを読み
込んでおく必要があります。
height 型: Number or String
初期値: "auto"
ダイアログの高さを決定します。
Number
指定された数値で高さが決定されます。
String
"auto"の文字列のみが指定可能です。 "auto"が指定された場合、
コンテンツ量に応じて高さを決定します。
hide 型: Number or String or Object
初期値: null
hide アニメーションをどのようにするかを設定します。
Number
指定した時間(ミリ秒)でフェードアウトアニメーションを行いま
す。
String
hide アニメーションを jQuery UI のエフェクト名で指定します。
Object
effect, duration, easing のプロパティが提供されています。
effect は hide アニメーションを jQuery UI のエフェクト名
(例:"blind")の文字列で指定します。
duration と easing は省略可能で、省略された場合はデフォルト値
が使用されます。
maxHeight 型: Number
初期値: false
ダイアログをリサイズ出来る高さの 大値(px)を指定します。
$( ".selector" ).dialog({ maxHeight: 600 });
maxWidth 型: Number
初期値: false
ダイアログをリサイズ出来る幅の 大値(px)を指定します。
$( ".selector" ).dialog({ maxWidth: 600 });
minHeight 型: Number
初期値: 150
ダイアログをリサイズ出来る高さの 小値(px)を指定します。
minWidth 型: Number
初期値: 150
ダイアログをリサイズ出来る幅の 小値(px)を指定します。
modal 型: Boolean
初期値: false
true が設定されると、モーダルダイアログとなり、他の要素が無効化さ
れます。 モーダルダイアログはすぐ下にオーバーレイを作成します。
position 型: Object or String or Array
初期値: {my: "center", at: "center", of: window}
ダイアログをどの場所に表示するかを指定します。 ダイアログは出来る
だけ表示されるように調整を行います。
Object
ダイアログを開いた際の位置を指定します。 デフォルトでは、相対
位置は window ですが別のものを指定することも可能です。 詳し
くは jQuery UI Position を確認してください。
String 1.10 非推奨
位置を表す文字列を指定します。 "center", "left", "right", "top",
"bottom"の値を指定可能です。
Array 1.10 非推奨
x,y のペアの配列を、top,left からのピクセル位置で指定します。
$( ".selector" ).dialog({
position: {my: "left top", at: "left bottom",
of: button}
});
※型に String と Array を使用するのは、1.10 から非推奨になっていま
す。
//古い APIのコード(非推奨)
$( "#dialog" ).dialog({
position: "right bottom"
});
//新しい APIのコード
$( "#dialog" ).dialog({
position: {
my: "right bottom",
at: "right bottom"
}
});
//古い APIのコード(非推奨)
$( "#dialog" ).dialog({
position: [ 200, 100 ]
});
//新しい APIのコード
$( "#dialog" ).dialog({
position: {
my: "left top",
at: "left+200 top+100"
}
});
resizable 型: Boolean
初期値: true
true が設定された場合、ダイアログのリサイズが可能になります。 リサ
イズ処理には、 jQuery UI Resizable ウィジット が読み込まれている
必要があります。
show 型: Number or String or Object
初期値: null
show アニメーションをどのようにするかを指定します。
Number
指定した時間(ミリ秒)でフェードインアニメーションを行います。
String
show アニメーションを jQuery UI のエフェクト名で指定します。
Object
effect, duration, easing のプロパティが提供されています。
effect は hide アニメーションを jQuery UI のエフェクト名
(例:"blind")の文字列で指定します。
duration と easing は省略可能で、省略された場合はデフォルト値
が使用されます。
stack1.10 削除 型: Boolean
初期値: true
他のダイアログの重なりの一番上に表示するか否かを指定します。 ダ
イアログはフォーカスすると、一番上に表示されます。
title 型: String
初期値: null
ダイアログのタイトルを指定します。 1.9 までは一部の HTML も使用可
能ですが、1.10 からはセキュリティの観点からテキストのみとなりまし
た。 HTML を使用したい場合は、_title()メソッドをオーバーライドする
カスタマイズが必要です。 また、null であればダイアログのソースコード
の title 属性が使用されます。
width 型: Number
初期値: 300
ダイアログの横幅を指定します。単位は px になります。
zindex1.10 削除 型: Integer
初期値: 1000
ダイアログの初期の zindex 値を指定します。
$( ".selector" ).dialog({ zIndex: 20 });
○メソッド
メソッド 説明
close() ダイアログを閉じます。
$( ".selector" ).dialog( "close" );
destroy() ダイアログの機能を完全に削除します。
disable() ダイアログを無効化します。
enable() ダイアログを有効にします。
isOpen() 戻り値: Boolean
現在、ダイアログが開いているかどうかを調べます。
moveToTop() ダイアログを他のダイアログの重なりの一番上に移動します。
open() ダイアログを開きます。
option( optionName ) 戻り値: Object
optionName に指定したオプションの現在の値を取得します。
optionName
型: String
取得したいオプションの名前を指定します。
option() 戻り値: PlainObject
オプションの各キーと値がペアとなったオブジェクトを返します。
option( optionName,
value )
引数の optionName のオプションに値を設定します。
optionName
型: String
設定したいオプションの名前を指定します。
value
型: Object
設定したい値を指定します。
option( options ) オプションに設定したい各キーと値がペアとなったオブジェクトを
指定します。
option
型: Object
設定したいオプションのキーと名前のペアを指定します。
widget() 生成されたもの(ダイアログ?)を含む jQuery オブジェクトを返し
ます。
○イベント
イベント 説明
beforeClose( event, ui ) 型: dialogbeforeclose
ダイアログが閉じられる直前にトリガされます。
もし、キャンセルされた場合、ダイアログは閉じら
れません。
$( ".selector" ).dialog({
beforeClose: function( event, ui ) {}
});
$( ".selector" ).on( "dialogbeforeclose",
function( event, ui ) {} );
close( event, ui ) 型: dialogclose
ダイアログが閉じられた際にトリガされます。
create( event, ui ) 型: dialogcreate
ダイアログが生成された際にトリガされます。
drag( event, ui ) 型: dialogdrag
ダイアログがドラッグされている間、トリガされま
す。
ui.position
ダイアログの現在の CSS position
ui.offset
ダイアログの現在の offset position
dragStart( event, ui ) 型: dialogdragstart
ダイアログのドラッグが開始される際にトリガされ
ます。
ui.position
ダイアログの現在の CSS position
ui.offset
ダイアログの現在の offset position
dragStop( event, ui ) 型: dialogdragstop
ダイアログのドラッグが終了した際にトリガされま
す。
ui.position
ダイアログの現在の CSS position
ui.offset
ダイアログの現在の offset position
focus( event, ui ) 型: dialogfocus
ダイアログがフォーカスされた際にトリガされま
す。
open( event, ui ) 型: dialogopen
ダイアログが開かれた際にトリガされます。
resize( event, ui ) 型: dialogresize
ダイアログがリサイズされている間、トリガされま
す。
originalPosition
ダイアログのリサイズ直前の CSS position
position
現在のダイアログの CSS position
originalSize
ダイアログのリサイズ直前のサイズ
size
現在のダイアログのサイズ
resizeStart( event, ui ) 型: dialogresizestart
ダイアログのリサイズが開始される際に、トリガさ
れます。
orginalPosition
ダイアログのリサイズ直前の CSS position
position
現在のダイアログの CSS position
originalSize
ダイアログのリサイズ直前のサイズ
size
現在のダイアログのサイズ
resizeStop( event, ui ) 型: dialogresizestop
ダイアログのリサイズが終了される際に、トリガさ
れます。
orginalPosition
ダイアログのリサイズ直前の CSS position
position
現在のダイアログの CSS position
originalSize
ダイアログのリサイズ直前のサイズ
size
現在のダイアログのサイズ
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="基本的なダイアログ">
<p>
ダイアログで情報を表示する際に便利です。
ダイアログウインドウは移動とリサイズが可能で、また'x'アイコンで閉
じることも出来ます。
</p>
</div>
</body>
</html>
■Tabs を使ってみよう
○概要
タイトルバーとコンテツ領域を持ったダイアログです。 このダイアログは次の
ような機能を提供します。
キーボード操作のサポートについて
タブがフォーカスされている場合、下記のキーコマンドが利用可能なります。
・[↑]/[←]
一つ前のタブに戻ります。 初のタブの場合、 後のタブに移動します。 少
し遅れてから、フォーカスされたタブがアクティブになります。
・[↓]/[→]
次のタブに移動します。 後のタブの場合、 初のタブに移動します。 少し
遅れてから、フォーカスされたタブがアクティブになります。
・HOME
初のタブに移動します。 少し遅れてから、フォーカスされたタブがアク
ティブになります。
・END
後のタブに移動します。 少し遅れてから、フォーカスされたタブがアク
ティブになります。
・スペース
フォーカスされたタブに関連するコンテンツパネルを開きます。
・ENTER
フォーカスされたタブに関連するコンテンツパネルを開いたり閉じたりしま
す。(オプションの設定に依ります)
・ALT+PAGE UP
前のタブにフォーカスを移し、アクティブにします。
・ALT+PAGE DOWN
次のタブにフォーカスを移し、アクティブにします。
コンテンツパネルがフォーカスされている場合、下記のキーコマンドが利用可
能なります。
・CTRL+UP
コンテンツパネルに紐付いているタブにフォーカスを移します。
・ALT+PAGE UP
前のタブにフォーカスを移し、アクティブにします。
・ALT+PAGE DOWN
次のタブにフォーカスを移し、アクティブにします。
次のようにして、ダイアログを呼び出します。
<div id="dialog" title="ダイアログのタイトル">ダイアログの内容</div>
<script>
$( "#dialog" ).dialog( "open" );
</script>
すぐにダイアログを表示したくない場合は、下記のように autoOpen:false を指
定します。
<button id="opener">ダイアログを開く</button>
<div id="dialog" title="ダイアログのタイトル">ダイアログの内容</div>
<script>
//すぐにダイアログが開かないように autoOpen:false を指定
$( "#dialog" ).dialog({ autoOpen: false });
//ボタンがクリックされたらダイアログを開く →次のページに続く
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
ダイアログを閉じたい場合は、下記のように指定します。
$(foo).dialog('close');
○オプション
オプション 説明
active
1.9 改名
selected
1.9 非推奨
1.10 削除
型: Boolean or Integer 初期値: 0
どのパネルを開いておくかを指定します。
Boolean
false を指定すると、全てのパネルが閉じられた(たたまれた)
状態になります。 これを行うためには、collapsible オプション
を true に指定する必要があります。
Integer
0 始まりの番号でアクティブにしておくパネルを指定します。 マ
イナスの値を指定すると、 後のパネルからカウントします。
$( ".selector" ).tabs({ active: 1 });
// getter
var active = $( ".selector" ).tabs( "option", "active"
);
// setter
$( ".selector" ).tabs( "option", "active", 1 );
ddd
ajaxOptions
1.9 非推奨
1.10 削除
型: null
(1.9でbeforeLoadイベントが導入されたため、非推奨になり
ました。)
Additional Ajax options to consider when loading tab
content (see jQuery.ajax()).
$( "#tabs" ).tabs({
ajaxOptions: {
username: "foo",
password: "bar"
}
});
cache
1.9 非推奨
1.10 削除
型: Boolean
初期値: false
(1.9でbeforeLoadイベントが導入されたため、非推奨になり
ました。)
Whether or not to cache remote tabs content, e.g.,
load only once or with every click. Cached content is
being lazy loaded, e.g., once and only once for the
first click. Note that to prevent the actual Ajax
requests from being cached by the browser you need
to provide an extra cache: false flag in the
ajaxOptions option.
$( "#tabs" ).tabs({
cache: true
});
cookie
1.9 非推奨
1.10 削除
型: Object
初期値: null
(1.9 で非推奨になりました。)
Store the latest selected tab in a cookie. The cookie
is then used to determine the initially selected tab if
the selected option is not defined. Requires the
cookie plugin, which can also be found in the
development-bundle-external folder from the
download builder. The object needs to have
key/value pairs of the form the cookie plugin expects
as options. Example: { expires 7, path: "/", domain:
"jquerycom", secure: true }. Since jQuery UI 1.7 it is
also possible to define the cookie name being used
via the name property.
collapsible 型: Boolean
初期値: false
true を指定すると、アクティブなパネルであっても閉じることが
出来るようになります。
disabled タブを無効化します。
Boolean
全てのタブを対象にします。
Array
無効化したいタブを 0 始まりの番号で配列に指定します。 例
えば、[0,2]と指定した場合、1 つ目と 3 つ目のタブが無効化さ
れます。
event 型: String
初期値: "click"
タブに反応して欲しいイベントを指定します。 hover の際にア
クティブにしたければ、"mouseorver"を指定します。
fx
1.9 非推奨
1.10 削除
型: Object or Array
初期値: null
(1.9で show、hide オプションが導入されたため、非推奨にな
りました)
Enable animations for hidniga nd showing tab
panels.
Object
Key/value pairs of properties to animate and
optional duration, e.g., { height: "toggle", duration:
200 }.
Array
Animation settings in the form [ hideSettings,
showSettings ].
heightStyle1.9
追加
型: String
初期値: "content"
タブとパネルの高さを制御します。
"auto"
全てのパネルは も高いパネルの高さになります。
"fill"
タブの親要素を基準に可能な限りの高さで展開されます。
"content"
それぞれのパネルはそれぞれの内容に合わせて高さ調節され
ます。
hide 型: Boolean or Number or String or Object
初期値: null
パネルの非表示をアニメーションさせるか、またどのようにアニ
メーションさせるかを決定します。
Boolean
falseをセットすると、アニメーションせず即座に非表示になりま
す。 true をセットすると初期値に設定されている duration と
easing でフェードアウトします。
Number
指定した数値を duration としてフェードアウトします。easing
は初期値が使用されます。
String
指定したエフェクトのアニメーションでパネルを非表示にしま
す。 指定できる値は jQuery の組み込まれている"slideUp"
のようなアニメーション名か、 jQueryUI エフェクトである
"fold"のようなアニメーション名を指定できます。 どちらの場
合も、duration と eaing は初期値が使用されます。
Object
オブジェクトを使用する場合、effect, duration, easing のプ
ロパティが提供されます。 プロパティの effect は上記の
Stringを、durationはNumberをそれぞれ指定したことにな
ります。 duration、easing が省略された場合は初期値が使
用され、effect が使用された場合は"fadeOut"が 使用されま
す。
//1秒(1000ミリ秒)かけて、explodeのエフ
ェクトアニメーションで非表示になります。
$(".selector").tabs({ hide: { effect:
"explode", duration: 1000 } });
idPrefix
1.9 非推奨
型: String
初期値: "ui‐tabs‐"
1.10 削除 (1.9 で refresh メソッドが導入されたため、非推奨になりまし
た。)
If the remote tab, its anchor element that is, has no
title attribute to generate an id from, an id/fragment
identifier is created from this prefix and a unique id,
for example "ui-tabs-54".
panelTemplate
1.9 非推奨
1.10 削除
型: String
初期値: "<div></div>"
(1.9 で refresh メソッドが導入されたため、非推奨になりまし
た。)
HTML template from which a new tab panel is
created in case of adding a tab with the add()
method or when creating a panel for a remote tab on
the fly.
show 型: Boolean or Number or String or Object
初期値: null
パネルの非表示をアニメーションさせるか、またどのようにアニ
メーションさせるかを決定します。
Boolean
false をセットすると、アニメーションせず即座に表示されます。
true をセットすると初期値に設定されている duration と
easing でフェードインします。
Number
指定した数値を duration としてフェードインします。easing は
初期値が使用されます。
String
指定したエフェクトのアニメーションでパネルを表示します。 指
定できる値は jQuery の組み込まれている"slideDown"のよ
うなアニメーション名か、 jQueryUI エフェクトである"fold"の
ようなアニメーション名を指定できます。 どちらの場合も、
duration と eaing は初期値が使用されます。
Object
オブジェクトを使用する場合、effect, duration, easing のプ
ロパティが提供されます。 プロパティの effect は上記の
Stringを、durationはNumberをそれぞれ指定したことにな
ります。 duration、easing が省略された場合は初期値が使
用され、effect が使用された場合は"fadeIn"が 使用されま
す。
spinner
1.9 非推奨
1.10 削除
型: String
初期値: "<em>Loading…</em>"
(1.9 で非推奨になり、代わりに beforeLoad イベントと load
イベントで処理を行うことが推奨されています。)
The HTML content to show in a tab title while remote
content is loading. Set this option to an empty string
to deactivate the spinner behavior. A span element
must be present in the anchor tag of the title for the
spinner content to be visible.
tabTemplate
1.9 非推奨
1.10 削除
型: String
初期値: "<li><a
href="#{href}"><span>#{label}</span></a></li>"
(1.9 で refresh メソッドが導入されたため、非推奨になりまし
た。)
HTML template from which a new tab panel is
created in case of adding a tab with the add()
method or when creating a panel for a remote tab on
the fly.
○メソッド
メソッド 説明
abort()
1.9 非推奨
1.10 削除
Terminate all running tab ajax requests and
animations.
//1.8
$( "#tabs" ).tabs( "abort" );
//1.9~
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.abort();
}
});
add( url, label [, index ] )
1.9 非推奨
1.10 削除
(1.9 で refresh メソッドが導入されたため、非推奨になりま
した。)
Add a tab.
url
型: String
The URL of the tab to add.
label
型: String
The name of the tab to add.
index
型: Number
Where to add the new tab (zero-based). If omitted,
the new tab will be added as the last tab.
//1.8
$( "#tabs" ).tabs( "add", "/remote/tab.html", "New
Tab" );
//1.9~ : タブ要素を追加した後に、refreshメソッドを実
行
$( "<li><a href='/remote/tab.html'>New Tab</a></li
>" )
.appendTo( "#tabs .ui‐tabs‐nav" );
$( "#tabs" ).tabs( "refresh" );
destroy() ダイアログの機能を完全に削除します。
$( ".selector" ).tabs( "destroy" );
disable() タブを無効化します。
disable(index) タブを無効化します。選択されているタブを無効化することは
出来ません。 1 度の処理で複数のタブを無効化したい場合
は、disabled オプションを使用してください。
index
型 Number or String
無効化したいタブを指定します。
enable() タブを有効にします。
enable(index) タブを有効にします。
index
型: Number or String
有効化したいタブを指定します。
一度で複数のタブを無効化状態から有効化したい場合、下
記のように disabled オプションを使用します。
$( "#example" ).tabs( "option", "disabled", []
);.
length()
1.9 非推奨
1.10 削除
戻り値: Integer
(1.9 で非推奨になりました。)
Retrieve the number of tabs of the first matched
tab pane.
load(index) 離れたタブのコンテンツパネルをロードします。
index
型: Number or String
ロードしたいタブを選択します。
option( optionName ) 戻り値: Object
optionName に指定したオプションの現在の値を取得しま
す。
optionName
型: String
取得したいオプションの名前を指定します。
option() 戻り値: PlainObject
オプションの各キーと値がペアとなったオブジェクトを返しま
す。
option( optionName, value ) 引数の optionName のオプションに値を設定します。
optionName
型: String
設定したいオプションの名前を指定します。
value
型: Object
設定したい値を指定します。
option( options ) オプションに設定したい各キーと値がペアとなったオブジェク
トを指定します。
option
型: Object
設定したいオプションのキーと名前のペアを指定します。
refresh()1.9 追加 DOM の直接の操作で追加または削除をされ、タブパネルの
高さが再計算されたタブを処理します。 結果はコンテンツと
heightStyle オプションに依存します。
remove1.9 非推奨
1.10 削除
(1.9 で refresh メソッドが導入されたため、非推奨になりま
した。)
Remove a tab.
index
型: Number or String
Which tab to remove.
//1.8
$( "#tabs" ).tabs( "remove", 2 );
//1.9~
// タブを削除
var tab = $( "#tabs" ).find( ".ui‐tabs
‐nav li:eq(2)" ).remove();
// パネルに紐づく IDを取得
var panelId = tab.attr( "aria‐controls
" );
// パネルを削除
$( "#" + panelId ).remove();
// タブをリフレッシュ
$( "tabs" ).tabs( "refresh" );
rotate( duration [,
continuing ] )1.9 削除
(1.9 で削除されました。)
Set up an automation rotation through the tabs.
duration
型: Number
The duration in milliseconds for each tab to be
visible before rotating to the next tab.
continuing(初期値:false)
型: Boolean
Whether or not to continue the rotation after a tab
has been selected by a user.
select(index)
1.9 非推奨
1.10 削除
(1.9 で非推奨になりました。)
Select a tab, as if it were clicked.
index
型: Integer
Which tab to select.
// 1.8 : 3つ目のタブをアクティブ
$( "#tabs" ).tabs( "select", 2 );
// 1.9~ : 3つ目のパネルをアクティブ
$( "#tabs" ).tabs( "option", "acti
ve", 2 );
url(index, url) Change the URL from whcih an Ajax (remote) tab
1.9 非推奨
1.10 削除
will be loaded. The specified URL will be used for
subsequent loads. Note that you can not only
change the URL for an existing remote tab with this
method, but also turn an in-page tab into a remote
tab.
index
型: Integer
The zero-based index of the tab to update.
url
型: String
The URL to set for the tab.
widget() 戻り値: Object
タブコンテナを含めた jQuery オブジェクトを返します。
○イベント
イベント 説明
activate
( event, ui )1.9 改名
show( event, ui )
1.9 非推奨
1.10 削除
型: tabsactivate (show では、tabsshow)
タブがアクティブになった際(アニメーション完了後)にトリガされます。 直
前の状態でどのパネルも展開されていなかった場合、ui.oldTab と
ui.oldPanel は空の jQuery オブジェクトになります。 もし、アクティブに
なった際にどのパネルも展開サれなければ、ui.newTab と
ui.newPanel が空の jQuery オブジェクトになります。
ui.newTab
アクティブになったタブです(show では、ui.tab)
ui.oldTab
非アクティブになったタブです。
ui.newPanel
アクティブになったパネルです。(show では、ui.panel)
ui.oldPanel
非アクティブになったパネルです。
$( ".selector" ).tabs({
activate: function( event, ui ) {}
});
$( ".selector" ).on( "tabsactivate", function( event, ui )
{} );
beforeActivate
( event, ui )1.9 改名
select
( event, ui )
1.9 非推奨
1.10 削除
型: tabsactivate (select では、tabsselect)
タブがアクティブになった際(アニメーション完了後)にトリガされます。 直
前の状態でどのパネルも展開されていなかった場合、ui.oldTab と
ui.oldPanel は空の jQuery オブジェクトになります。 もし、アクティブに
なった際にどのパネルも展開されなければ、ui.newTab と
ui.newPanel が空の jQuery オブジェクトになります。
ui.newTab
アクティブになったタブです。(select では、ui.tab)
ui.oldTab
非アクティブになったタブです。
ui.newPanel
アクティブになったパネルです。(select では、ui.panel)
ui.oldPanel
非アクティブになったパネルです。
//1.8
$( "#tabs" ).tabs({
select: function( event, ui ) {
ui.panel
ui.tab
// アクティブになったタブのインデックス番号
ui.index
}
});
//1.9~
$( "#tabs" ).tabs({
beforeActivate: function( event, ui ) {
ui.oldPanel // (追加)
ui.oldTab // (追加)
ui.newPanel // (ui.panel変更)
ui.newTab // (ui.tab変更)
// インデックス番号は次のように取得可能
ui.newTab.index()
}
});
beforeLoad( event,
ui )
型: tabsbeforeload
タブがロードされる際、beforeActivate のイベント後にトリガされます。
タブパネルにコンテンツをロードすることを、キャンセルすることで防ぐこと
ができます。 パネルはアクティブ化されたままになりますが。 このイベン
トは、Ajax リクエストを行う直前にトリガされるので、 ui.jqXHR と
ui.ajaxSettings を介して変更することが可能です。
ui.tab
型: jQuery
ロードするタブです。
ui.panel
型: jQuery
Ajax のレスポンを受け入れるパネルです。
ui.jqXHR
型: jqXHR
コンテンツをリクエストしている jqXHR オブジェクトです。
ui.ajaxSettings
型: Object
jQuery.ajax のリクエストに設定として、使用されているオブジェクトで
す。
// ajaxOptionsオプションに代わる新しい指定
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.username = "foo";
ui.ajaxSettings.password = "bar";
}
});
// cacheオプションに代わる新しい指定
$( "#tabs" ).tabs({
if ( ui.tab.data( "loaded" ) ) {
event.preventDefault();
return;
}
ui.jqXHR.success(function() {
ui.tab.data( "loaded", true );
});
} beforeLoad: function( event, ui ) {
if ( ui.tab.data( "loaded" ) ) {
event.preventDefault();
return;
}
ui.jqXHR.success(function() {
ui.tab.data( "loaded", true );
});
}
});
create( event, ui )
1.9 追加
型: tabscreate
タブが生成された際にトリガされます。 タブパネルが全て折りたたまれて
いる場合、ui.tab と ui.panel は空の jQuery オブジェクトになります。
ui.tab
型: jQuery
アクティブなタブです。
ui.panel
型: jQuery
アクティブなパネルです。
disable( event, ui )
1.9 非推奨
1.10 削除
型: tabsdisable
(1.9 で他の UI と一貫性を持たせるため、非推奨になりました。)
Triggered when a tab is disabled.
ui.tab
型: Element
The tab that is being disabled.
ui.panel
型: Element
The panel that is being disabled.
ui.index
型: Integer
The zero-based index of the tab.
enable( event, ui )
1.9 非推奨
1.10 削除
型: tabsenable
(1.9 で他の UI と一貫性を持たせるため、非推奨になりました。)
Triggered when a tab is enabled.
ui.tab
型: Element
The tab that is being enabled.
ui.panel
型: Element
The panel that is being enabled.
ui.index
型: Integer
The zero-based index of the tab.
load( event, ui ) 型: tabsload
ダイアログのドラッグが開始される際にトリガされます。
ui.tab
型: jQuery
ロードしているタブです。
ui.panel
型: jQuery
Ajax のレスポンを受け入れるパネルです。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">タブ 1</a></li>
<li><a href="#tabs-2">タブ 2</a></li>
<li><a href="#tabs-3">タブ 3</a></li>
</ul>
<div id="tabs-1">
<p>デフォルトのタブです。</p>
</div>
<div id="tabs-2">
<p>タブ 2のコンテンツ領域です。</p>
</div>
<div id="tabs-3">
<p>タブ 3のコンテンツ領域です。タブ 2のコンテンツ領域です。</p>
</div>
</div>
</body>
</html>
■Effect を使ってみよう
○Blind Effect
コンテナに要素をラップし、ブラインドを引いたり上げたりするようなエフェ
クトで要素の表示・非表示を行います。
・blind
引数 説明
direction 初期値: "up"
型: String
ブラインドエフェクトが非表示になるために動作する方向を指定します。
指定可能な値は、up, down, left, right, vertical, horizontal です。
(ver 1.8 は、vertical, horizontal)
アニメーションのコンテナは overflow: hidden が適用され、height の変更が見
た目に影響を与えます。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "blind" );
});
</script>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
</body>
</html>
○Bounce Effect
要素にバウンドするようなエフェクトを与えます。表示/非表示で使用される
と 初または 後のバウンドはフェードイン/フェードアウトになります。
・bounce
引数 説明
distance 初期値: 20
型: Number
バウンドの 大値をピクセル単位で指定します。
times 初期値: 5
型: Integer
バウンド回数を指定します。 show()、hide()に使用された場合、フェードインとフェー
ドアウトの際に更に半分余計にバウンドします。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" )
});
</script>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
</body>
</html>
○Clip Effect
両端から挟んで縮める、または両端に向かって広がるエフェクトで、表示と非
表示を行います。水平と垂直の指定が可能です。
・clip
引数 説明
direction 初期値: "vertical"
型: String
vertical を指定すると上下の端からの垂直、horizontal を指定すると左右の端から
の水平のエフェクトになります。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle1, #toggle2 {
width: 100px;
height: 100px;
background: #ccc;
float:left;
}
</style>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle1"></div>
<div id="toggle2"></div>
<script>
$( document ).click(function() {
$( "#toggle1" ).toggle( "clip" );
$( "#toggle2" ).toggle( "clip", {direction : "horizontal"} );
});
</script>
</body>
</html>
○Drop Effect
方向を指定して、要素をその方向にスライドすることでフェードイン表示、フ
ェードアウト非表示を行います。
・drop
引数 説明
direction 初期値: "left"
型: String
要素が隠れるために落ちる方向、または要素が表示されるために表れ始める方向を
指定します。
指定可能な値は、up, down, left, right です。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "drop" );
});
</script>
</body>
</html>
○Explode Effect
要素を破片が拡散する、または破片が集まるようなエフェクトで表示、非表示
を行います。
・explode
引数 説明
pieces 初期値: 9
型: Integer
拡散する破片の数を指定します。この値は 2 乗の数である必要があり、それ以外の値は
一番近い 2 乗の数に丸められます。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "explode" );
});
</script>
</body>
</html>
○Fade Effect
フェードエフェクトによって要素を表示、非表示にします。
・fade
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "fade" );
});
</script>
</body>
</html>
○Fold Effect
折り畳むようなエフェクトによって要素を表示、非表示にします。
・fold
引数 説明
size 初期値: 15
型: Number or String
折りたたまれた要素のサイズを指定します。
horizFirst 初期値 false
型: Boolean
非表示になる際に、水平方向から先に折りたたまれるのか否かを指定します。 表示
の際は正反対の順に展開されます。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "fold" );
});
</script>
</body>
</html>
○Highlight Effect
ハイライトエフェクトによって要素を表示、非表示します。
・highlight
引数 説明
color 初期値: "#ffff99"
型: String
アニメーション中の背景で使用される色を指定します。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "highlight" );
});
</script>
</body>
</html>
○Puff Effect
パフエフェクトによって、要素を少し拡大しつつふっと消えるようなエフェク
トで非表示にし、表示では逆の表現で表示します。
・puff
引数 説明
puff 初期値: 150
型: Number
アニメーション中に瞬間的に拡大される比率をパーセントで指定します。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "puff" );
});
</script>
</body>
</html>
○Pulsate Effect
振動するエフェクトによって要素を表示、非表示にします。
・pulsate
引数 説明
times 初期値: 5
型: Integer
振動する回数を指定します。 表示・非表示時には半回多くなります。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "pulsate" );
});
</script>
</body>
</html>
○Scale Effect
パーセントを指定して要素の拡大縮小を行います。
・scale
引数 説明
direction 初期値: "both"
型: String
エフェクトが作用する方向を指定します。 指定可能な値は、"both", "vertical",
"horizontal"です。
origin 初期値: [ "middle", "center" ]
型: Array
要素が非表示になる場所(地点)を指定します。
percent 型: Number
拡大・縮小の比率をパーセントで指定します。
scale 初期値: "both"
型: String
"both", "box", "content"の要素のどの領域をリサイズするのかを指定します。
"box"は要素の border と padding を、"content"は要素内の内容を、"both"はそ
の両方をリサイズします。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "scale" );
});
</script>
</body>
</html>
○Shake Effect
水平または垂直方向に、要素にシェイクするようなエフェクトをさせます。
・shake
引数 説明
direction 初期値: "both"
型: String
エフェクトが作用する方向を指定します。 指定可能な値は、"left", "right", "up",
"down"です。
distance 初期値: 20
型: Number
シェイクする距離を指定します。
times 型: Integer
シェイクする回数を指定します。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).effect( "shake" );
});
</script>
</body>
</html>
○Size Effect
指定した幅と高さになるようにサイズ変更を行います。
・size
引数 説明
to 型: Object
リサイズする高さと幅を{ width, height }のハッシュ形式で指定します。
origin 初期値: [ "top", "left" ]
型: Array
消失する場所(地点)を指定します。
scale 初期値: "both" 型: String
"both", "box", "content"の要素のどの領域をリサイズするのかを指定します。 "box"
は要素の border と padding を、"content"は要素内の内容を、"both"はその両方をリ
サイズします。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).effect( "size", {
to: { width: 200, height: 60 }
}, 1000 );
});
</script>
</body>
</html>
○Slide Effect
要素をスライドします。
・slide
引数 説明
direction 初期値: "both"
型: String
エフェクトが作用する方向を指定します。 指定可能な値は、"left", "right", "up",
"down"です。
distance 初期値: 要素の outerWidth
型: Number
エフェクトが作用する距離を指定します。 デフォルトでは引数である direction に合わ
せて、高さまたは幅をもとに決定されます。 要素の高さ/幅より小さい値を指定するこ
とが出来ます。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
</script>
</body>
</html>
○Transfer Effect
ある要素から別の要素へ外枠が遷移するようなエフェクトを表現します。
・transfer
引数 説明
className 型: String
遷移アニメーションする要素の class 名を指定します。
to 型: String
遷移先の要素をセレクタで指定します。
2 つの要素間の相互作用を視覚的に見せたい際に非常に有用です。 遷移アニメ
ーションの要素は ui-effects-transfer の class を持ちます。
○コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link type="text/css"
href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.10.3.custom.min.js"></script>
→次のページに続く
<style>
div.green {
width: 100px;
height: 80px;
background: green;
border: 1px solid black;
position: relative;
}
div.red {
margin-top: 10px;
width: 50px;
height: 30px;
background: red;
border: 1px solid black;
position: relative;
}
.ui-effects-transfer {
border: 1px dotted black;
}
</style>
</head>
<body>
<div class="green"></div>
<div class="red"></div>
<script>
$( "div" ).click(function() {
var i = 1 - $( "div" ).index( this );
$( this ).effect( "transfer", { to: $( "div" ).eq( i )}, 1000 );
});
</script>
</body>
</html>
前ページからの続き