jqueryuiの基礎 - saladhome.com · js jqueryとjquery uiの本体が含まれている index.html...

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>



<style type="text/css">

.square {

width: 100px;

height: 100px;

background-color: red

}

</style>

src="js/jquery-ui-1.10.3.custom.min.js"></script><script

type="text/javascript">





</script>

</head>



<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 () {


axis: 'y',

} );

});

○グリッド（格子）に沿って、ドラッグで移動できるボックス

グリッド（格子）に沿って移動できるようにするには、grid オプションを使い

ます。grid オプションで指定した大きさのグリッド（格子）に、スナップ（吸

着）させることができます。

このサンプルでは水平方向（左右）は、50px ごと、垂直方向（上下）は、25px

ごとにスナップします。

$(function () {


grid: [ 50, 25 ],

} );

});

○特定要素内だけ、ドラッグで移動できるボックス

ドラッグして移動できるボックスの、移動範囲を設定する方法です。

親要素内だけ移動できるようにするには、containment オプションに、parent

を指定します。

「#jquery-ui-draggable-wrap」のように特定の要素の id を指定することもで

きます。

さらに、サンプルでは、scroll オプションに、false を指定し、ドラッグ移動

中に、スクロールできないようにしています。

・親要素を指定する場合

$(function () {


containment: 'parent',

scroll: false,

} );

});

・id を指定する場合

$(function () {


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 () {


snap: '#jquery-ui-draggable-wrap',

} );

});

○ドラッグ移動できるボックスの特定要素へのスナップの内外指定


同時に、snapMode オプションを使うと、内側だけにスナップ、外側だけにス

ナップ、内外両方にスナップを、指定できます。

$(function () {



snapMode: 'inner',

} );

});

○ドラッグ移動できるボックスの特定要素へのスナップ距離を指定


同時に、snapTolerance オプションを使うと、スナップする距離を指定できま

す。

このサンプルでは破線で示した枠の 50px 以内に近付くと、スナップ（吸着）

します。

$(function () {



snapTolerance: 50,

} );

});

※snap オプションと併用する必要があります。

※snap オプションが false の場合、snapTolerance オプションは、機能しま

せん。

○ドラッグ移動できるボックスにおいて、ドラッグできる要素を指定

ドラッグして移動できるボックスにおいて、ドラッグできる要素を指定する方

法です。ドラッグできる要素を指定するには、handle オプションを使います。

$(function () {


handle: 'h3',

} );

});

・HTML


<h3 class="ui-widget-header">タイトル</h3>

マウスでドラッグし、移動させてください

</div>

・CSS

#square h3 { →次のページに続く

padding: 0;

margin: 0;

text-align: center;

cursor: move;

}

○ドラッグを放すと元の位置に戻るドラッグ移動ボックス

ドラッグを放すと元の位置に戻るようにする方法です。ドラッグを放すと元の

位置に戻るようにするには、revert オプションに、true を指定します。

$(function () {


revert: true,

} );

});

○ドラッグ移動ボックスにおいて、移動用クローンを出現させる

ドラッグして移動できるボックスにおいて、移動用クローン（複製）を出現さ

せる方法です。クローンを出現させるには、helper オプションに、clone を指

定します。

$(function () {


helper: 'clone',

} );

});

○ドラッグ移動ボックスにおいて、移動中のボックスを半透明にする

ドラッグして移動できるボックスにおいて、移動中のボックスを半透明にする

方法です。移動中のボックスを半透明にするには、opacity オプションを使い

ます。

前ページからの続き

$(function () {


opacity: 0.5,

} );

});

○ドラッグ移動ボックスにおける、移動中のスクロール可否設定

ドラッグして移動できるボックスにおける、ボックス移動中のスクロール可否

設定です。ウィンドウや親要素を、スクロールさせたくない場合、scroll オプ

ションに false を指定します。ウィンドウや親要素を、スクロールさせたい場

合、scroll オプションに true を指定します。

$(function () {



scroll: false,

} );

});

$(function () {

$("#square2").draggable({


scroll: true,

} );

});

・HTML

<div id="jquery-ui-draggable-wrap" class="ui-widget-content">


<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 () {


opacity: 0.5,

} );

});


■Draggable イベント設定

ドラッグ時のイベントを処理するサンプルです。

ドラッグイベントを処理するには、draggable()メソッドで start、drag、stop

の各オプションを指定します。

$(function () {


start: function() {

$(this).addClass("ui-state-hover").find("p").html("ドラッグ開

始...");

},

stop: function() {

$(this).removeClass("ui-state-hover").find("p").html("ドラッグ

終了...");

}

} );

});

・HTML


<p>マウスでドラッグし、移動させてください</p></div>

■Draggable と Droppable

続いて、要素のドロップをしてみましょう（コード 3）。

［コード 3］ドロップの使用例（jQueryUI_drop.html）



<html>

<head>


<title>ドラッグサンプル</title>


.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>



→次のページに続く

値名概要

accept ドロップ可能なオブジェクトを指定できる

activeClass ドラッグ要素がドラッグ状態にある場合に、指定し

た class 名をドロップ要素に追加する

hoverClass ドラッグ要素がドロップ要素の上に乗った場合に、

指定した class 名をドロップ要素に追加する

drop:function(event,ui)

{・・・}

ドロップした時の処理を記述する

表 3：droppable オブジェクトの設定

この例では、ドラッグ対象オブジェクト（赤色）をドラッグしている間はドロ

ップ領域（黄色）が青色に変化し、ドロップ領域の上に乗ると緑色に変わりま

す。ドロップ後は、ドラッグされた id 属性をアラート表示させています。ドロ

ップ領域は、5のように body 部分に drop タグを追加しておきます。


図 4 実行結果（ドラッグ時）

図 5 実行結果（ドロップ領域上に乗った場合）

図 6 実行結果（ドロップ後のアラート表示）

■Resizable

次は、要素のサイズを変更してみましょう（コード 4）。リサイズは、例えばメ

ニューや百科事典など写真と本文が対になっているコンテンツで、写真をもっ

と大きく見たい、見せたい場合に利用することが考えられます。

［コード 4］リサイズの使用例（jQueryUI_resize.html）



<html>

<head>


<title>リサイズサンプル</title>


.square {

width: 100px;

height: 100px;

background-color: red;

}

</style>








<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 オブジェクトの設定


図 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>






<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>







</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() 並び替え機能を有効にします。



optionName

型： String




option( optionName,

value )


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 文字列を格納した配列を返します。


並び替え要素を含めた 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


ui.item

型: jQuery


ui.offset

型: Object


ui.position

型: Object


ui.originalPosition

型: Object


ui.sender

型: jQuery


change( event, ui ) 型： sortchange

並び替えの間、DOM の position が変更されるとトリガされます。

ui.helper

型: jQuery


ui.item

型: jQuery


ui.offset

型: Object


ui.position

型: Object


ui.originalPosition

型: Object


ui.sender

型: jQuery


create( event, ui ) 型： sortcreate

並び替え要素が生成された際にトリガされます。

deactivate( event,

ui )

型： sortdeactivate

ソートが停止されたときにこのイベントがトリガされ、これがトリガされる

と、すべての接続リストに伝播されます。

ui.helper

型: jQuery


ui.item

型: jQuery


ui.offset

型: Object


ui.position

型: Object


ui.originalPosition

型: Object


ui.sender

型: jQuery


out( event, ui ) 型： sortout

接続リストに並び替え項目が移動された際にトリガされます。

over( event, ui ) 型： sortover

接続リストに並び替え項目が移動してきた際にトリガれさます。

ui.helper

型: jQuery


ui.item

型: jQuery


ui.offset

型: Object


ui.position

型: Object


ui.originalPosition

型: Object


ui.sender

型: jQuery


receive( event, ui ) 型： sortreceive

接続リストが他のリストから並び替え項目を受け取った際にトリガされま

す。

ui.helper

型: jQuery


ui.item

型: jQuery


ui.offset

型: Object


ui.position

型: Object


ui.originalPosition

型: Object


ui.sender

型: jQuery


remove( event, ui ) 型： sortremove

並び替え項目がリストからドラッグされて別のリストに移動された際に、ト

リガされます。

ui.helper

型: jQuery


ui.item

型: jQuery


ui.offset

型: Object


ui.position

型: Object


ui.originalPosition

型: Object


ui.sender

型: jQuery


sort( event, ui ) 型： sort

並び替えの間、トリガされます。

ui.helper

型: jQuery


ui.item

型: jQuery


ui.offset

型: Object


ui.position

型: Object


ui.originalPosition

型: Object


ui.sender

型: jQuery


start( event, ui ) 型： sortstart

並び替えが開始した際にトリガされます。

ui.helper

型: jQuery


ui.item

型: jQuery


ui.offset

型: Object


ui.position

型: Object


ui.originalPosition

型: Object


ui.sender

型: jQuery


stop( event, ui ) 型： sortstop

並び替え処理がを停止した際にトリガされます。

ui.helper

型: jQuery


ui.item

型: jQuery


ui.offset

型: Object


ui.position

型: Object


ui.originalPosition

型: Object


ui.sender

型: jQuery


update( event, ui ) 型： sortupdate

並び替え処理がを停止し、DOM の position が変更された際にトリガさ

れます。

ui.helper

型: jQuery


ui.item

型: jQuery


ui.offset

型: Object


ui.position

型: Object


ui.originalPosition

型: Object


ui.sender

型: jQuery


○コード

<!doctype html>

<html lang="ja">

<head>







src="js/jquery-ui-1.10.3.custom.min.js"></script> →次のページに続く

■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


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～


// (1.8の fillSpace: true 相当)

heightStyle: "fill"

});

//1.8


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～


icons: {

// パネルが畳まれている時のアイコン

header: "ui‐icon‐circle‐arrow‐e",

// パネルが展開されている時のアイコン

activeHeader: "ui‐icon‐circle‐arrow‐s"

}

});

//1.8


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() アコーディオンを有効にします。



optionName

型： String




option( optionName,

value )


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({


});

$( ".selector" ).on( "accordionactivate", function( even

t, ui ) {} );

beforeActivate


型： 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>








<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>


<div>

<p>

セクション 2のコンテンツ領域です。

</p>

</div>


<div> →次のページに続く

<p>


</p>

<ul>

<li>リスト項目 1</li>



</ul>

</div>


<div>

<p>


</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 を設定すると、メニューが開いた際に初の項目を選択します。


初期値： false

すべてのパネルを折りたためる事が出来るか否かを指定します。アクティブなパネル

を折りたたむ事が出来るようになります。

delay 型： Integer

初期値： 300

キーストロークされてから、リストメニューの検索が実行されまでの遅延時間をミリ秒

単位で指定します。リモートデータを取り扱う場合は、サーバへの負荷を考慮する必

要があります。

event 型： String


アコーディオンの見出しが反応してパネルを展開する際のイベントを指定します。イ

ベント名を半角スペース区切りで複数指定することが可能です。

//見出しのマウスオーバーでコンテンツ部分が展開するようになります。

$( ".selector" ).accordion({ event: "mouseover" });


初期値： 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() オートコンプリートを有効にします。



optionName

型： String




option( optionName,

value )


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>





href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet"

/>




<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>

○オプション



初期値： 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() ボタンを有効にします。



optionName

型： String




option( optionName,

value )


optionName

型： String


value

型： Object


option( options ) オプションに設定したい各キーと値がペアとなったオブジェクトを指

定します。

option

型： Object


refresh() ボタンの見た目の部分をリフレッシュします。プログラム処理で直

接対照の要素のチェック状態などを変えた際に有用です。

widget() 型： jQuery

ボタンの見た目に関する部分を含めた要素を、jQuery オブジェクト

として返します。

○イベント

イベント説明

create( event, ui ) 型： buttoncreate

ボタンが生成された際にトリガされます。

○ソース

<!doctype html>

<html lang="ja">

<head>








<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.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



String





minDate 型： Date or Number or String

初期値： null

選択可能な大日付を指定します。 null を指定すると無制限にな

ります。

Date


Number



String





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>








<script>

$(function() {


$( "#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>


<script>

//すぐにダイアログが開かないように autoOpen:false を指定

$( "#dialog" ).dialog({ autoOpen: false });

//ボタンがクリックされたらダイアログを開く

$( "#opener" ).click(function() {


});

</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 名を追加します。


初期値： 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のコード


position: {

my: "right bottom",

at: "right bottom"

}

});

//古い APIのコード(非推奨)


position: [ 200, 100 ]

});

//新しい APIのコード


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() ダイアログを開きます。



optionName

型： String




option( optionName,

value )


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


ui.offset


dragStop( event, ui ) 型： dialogdragstop

ダイアログのドラッグが終了した際にトリガされま

す。

ui.position


ui.offset


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


position


originalSize


size


resizeStop( event, ui ) 型： dialogresizestop

ダイアログのリサイズが終了される際に、トリガさ

れます。

orginalPosition


position


originalSize


size


○コード

<!doctype html>

<html lang="ja">

<head>








<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

次のタブにフォーカスを移し、アクティブにします。

次のようにして、ダイアログを呼び出します。


<script>


</script>

すぐにダイアログを表示したくない場合は、下記のように autoOpen:false を指

定します。

<button id="opener">ダイアログを開く</button>


<script>

//すぐにダイアログが開かないように autoOpen:false を指定

$( "#dialog" ).dialog({ autoOpen: false });

//ボタンがクリックされたらダイアログを開く →次のページに続く

$( "#opener" ).click(function() {


});

</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 );

ｄｄｄ

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.


初期値： false

true を指定すると、アクティブなパネルであっても閉じることが

出来るようになります。

disabled タブを無効化します。

Boolean

全てのタブを対象にします。

Array

無効化したいタブを 0 始まりの番号で配列に指定します。例

えば、[0,2]と指定した場合、1 つ目と 3 つ目のタブが無効化さ

れます。

event 型： String


タブに反応して欲しいイベントを指定します。 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


Retrieve the number of tabs of the first matched

tab pane.

load(index) 離れたタブのコンテンツパネルをロードします。

index


ロードしたいタブを選択します。


optionName に指定したオプションの現在の値を取得しま

す。

optionName

型： String



オプションの各キーと値がペアとなったオブジェクトを返しま

す。

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


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 削除


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.


タブコンテナを含めた jQuery オブジェクトを返します。

○イベント

イベント説明

activate


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({


});

$( ".selector" ).on( "tabsactivate", function( event, ui )

{} );

beforeActivate


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" ) ) {


return;

}

ui.jqXHR.success(function() {

ui.tab.data( "loaded", true );

});

} beforeLoad: function( event, ui ) {

if ( ui.tab.data( "loaded" ) ) {


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>








<script>

$(function() {

$( "#tabs" ).tabs();

});

</script>

</head>

<body>

<div id="tabs">

<ul>

<li><a href="#tabs-1">タブ 1</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>








<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>








<style>


#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

</style>

<script>


$( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" )

});

</script>

</head>

<body>



</body>

</html>

○Clip Effect

両端から挟んで縮める、または両端に向かって広がるエフェクトで、表示と非

表示を行います。水平と垂直の指定が可能です。

・clip

引数説明

direction 初期値： "vertical"

型： String

vertical を指定すると上下の端からの垂直、horizontal を指定すると左右の端から

の水平のエフェクトになります。

○コード

<!doctype html>

<html lang="ja">

<head>








<style>


#toggle1, #toggle2 {

width: 100px;

height: 100px;

background: #ccc;

float:left;

}

</style>

</head>

<body>


<div id="toggle1"></div>

<div id="toggle2"></div>

<script>


$( "#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>








<style>


#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

</style>

</head>

<body>



<script>


$( "#toggle" ).toggle( "drop" );

});

</script>

</body>

</html>

○Explode Effect

要素を破片が拡散する、または破片が集まるようなエフェクトで表示、非表示

を行います。

・explode

引数説明

pieces 初期値： 9

型： Integer

拡散する破片の数を指定します。この値は 2 乗の数である必要があり、それ以外の値は

一番近い 2 乗の数に丸められます。

○コード

<!doctype html>

<html lang="ja">

<head>








<style>


#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

</style>

</head>

<body>



<script>


$( "#toggle" ).toggle( "explode" );

});

</script>

</body>

</html>

○Fade Effect

フェードエフェクトによって要素を表示、非表示にします。

・fade

○コード

<!doctype html>

<html lang="ja">

<head>








<style>


#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

</style>

</head>

<body>



<script>


$( "#toggle" ).toggle( "fade" );

});

</script>

</body>

</html>

○Fold Effect

折り畳むようなエフェクトによって要素を表示、非表示にします。

・fold

引数説明

size 初期値： 15

型： Number or String

折りたたまれた要素のサイズを指定します。

horizFirst 初期値 false

型： Boolean

非表示になる際に、水平方向から先に折りたたまれるのか否かを指定します。表示

の際は正反対の順に展開されます。

○コード

<!doctype html>

<html lang="ja">

<head>








<style>


#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

</style>

</head>

<body>



<script>


$( "#toggle" ).toggle( "fold" );

});

</script>

</body>

</html>

○Highlight Effect

ハイライトエフェクトによって要素を表示、非表示します。

・highlight

引数説明

color 初期値： "#ffff99"

型： String

アニメーション中の背景で使用される色を指定します。

○コード

<!doctype html>

<html lang="ja">

<head>








<style>


#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

</style>

</head>

<body>



<script>


$( "#toggle" ).toggle( "highlight" );

});

</script>

</body>

</html>

○Puff Effect

パフエフェクトによって、要素を少し拡大しつつふっと消えるようなエフェク

トで非表示にし、表示では逆の表現で表示します。

・puff

引数説明

puff 初期値： 150

型： Number

アニメーション中に瞬間的に拡大される比率をパーセントで指定します。

○コード

<!doctype html>

<html lang="ja">

<head>








<style>


#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

</style>

</head>

<body>



<script>


$( "#toggle" ).toggle( "puff" );

});

</script>

</body>

</html>

○Pulsate Effect

振動するエフェクトによって要素を表示、非表示にします。

・pulsate

引数説明

times 初期値： 5

型： Integer

振動する回数を指定します。表示・非表示時には半回多くなります。

○コード

<!doctype html>

<html lang="ja">

<head>








<style>


#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

</style>

</head>

<body>



<script>


$( "#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>








<style>


#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

</style>

</head>

<body>



<script>


$( "#toggle" ).toggle( "scale" );

});

</script>

</body>

</html>

○Shake Effect

水平または垂直方向に、要素にシェイクするようなエフェクトをさせます。

・shake

引数説明


型： String

エフェクトが作用する方向を指定します。指定可能な値は、"left", "right", "up",

"down"です。

distance 初期値： 20

型： Number

シェイクする距離を指定します。

times 型： Integer

シェイクする回数を指定します。

○コード

<!doctype html>

<html lang="ja">

<head>








<style>


#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

</style>

</head>

<body>



<script>


$( "#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>








<style>


#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

</style>

</head>

<body>



<script>


$( "#toggle" ).effect( "size", {

to: { width: 200, height: 60 }

}, 1000 );

});

</script>

</body>

</html>

○Slide Effect

要素をスライドします。

・slide

引数説明


型： String

エフェクトが作用する方向を指定します。指定可能な値は、"left", "right", "up",

"down"です。

distance 初期値：要素の outerWidth

型： Number

エフェクトが作用する距離を指定します。デフォルトでは引数である direction に合わ

せて、高さまたは幅をもとに決定されます。要素の高さ／幅より小さい値を指定するこ

とが出来ます。

○コード

<!doctype html>

<html lang="ja">

<head>








<style>


#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

</style>

</head>

<body>



<script>


$( "#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>









jqueryuiの基礎 - saladhome.com · js jqueryとjquery uiの本体が含まれている index.html...

Documents