jQuery UI

基本

Draggable

Droppable

Resizable

Selectable

Sortable

Accordion

Autocomplete

Button

Datepicker

Dialog

Progressbar

Slider

Effect

JavaScriptとCSSを読み込む

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

要素をドラッグ可能にする

$('#box').draggable();

移動方向を制限

$('#box').draggable({ axis: "x" });    // 横方向のみ

$('#box').draggable({ axis: "y" });    // 縦方向のみ

ドラッグ中の透明度

$('#box').draggable({ opacity: 0.5 })

ドラッグを開始できる範囲を指定

$('#box').draggable({ handle: '.handle' });

ドラッグを開始できない範囲を指定

$('#box').draggable({ cancel: '.cancel' });

ドラッグ中のカーソルを指定

$('#box').draggable({ cursor: 'all-scroll' });

default	デフォルト（矢印）
pointer	リンクカーソル
crosshair	十字カーソル
move	全方向矢印
text	テキスト編集
wait	砂時計/レインボーカーソル
help	ヘルプ（？）
n-resize	上リサイズ
e-resize	右リサイズ
s-resize	下リサイズ
w-resize	左リサイズ
ne-resize	右上リサイズ
se-resize	右下リサイズ
sw-resize	左下リサイズ
nw-resize	左上リサイズ
all-scroll	手

ドラッグ幅/高さを指定

$('#box').draggable({ grid: [20, 50] });

grid: [横, 縦]で指定する。

ドラッグ開始時に元の要素を残す

$('#box').draggable({ helper: 'clone' });

デフォルト：original

自動で付けられるClassを付けない

$('#box').draggable({ addClasses: false });

デフォルトでは、draggable要素には常時ui-draggableClassが付く。

イベント

	イベント名	オプションのキー
draggable作成	dragcreate	create
ドラッグ開始	dragstart	start
ドラッグ中	drag	drag
ドラッグ終了	dragstop	stop

$('#box').draggable({
  drag: function(event, ui) {
    console.log(ui.position.left);
  }
});

$('#box').on('drag', function(event, ui) {
  console.log(ui.position.left);
};

引数

event
ui.helper
ui.position.top, left
ui.offset.top, left

メソッド

	メソッド
有効化	("enable")
無効化	("disable")
永久に無効化	("destroy")
すべてのオプションを取得	("option")
オプションを取得	("option", "オプション")
オプションを変更	("option", "オプション", "値")

$('#box').draggable('enable');

var x = $('#box').draggable("option", "オプション");    // オプションの値の取得

$('#box').draggable("option", "オプション", "値");    // オプションの値の設定

draggable要素をドロップ可能にする

$('#target').droppable();

受け入れるdraggable要素を指定

$('$target').droppable({ accept: '#box' });

上にdraggable要素を乗せられた時にClassを追加

$('#target').droppable({ hoverClass: 'droppable-hover' });

受け入れ可能なdraggable要素がドラッグされている時にdroppable要素にClassを追加

$('#target').droppable({ activeClass: 'droppable-highlight' });

ドロップ判定になる範囲を指定

$('#target').droppable({ tolerance: 'fit' });

`fit`	すべて入る
`intersect`	50％入る（デフォルト）
`pointer`	ポインタが入る
`touch`	少しでも入る

ドロップ無効にする

$('#target').droppable({ disabled: true });

自動で付けられるClassを付けない

$('#target').droppable({ addClasses: false });

デフォルトでは、droppable要素には常時ui-droppableClassが付く。

イベント

	イベント名	オプションのキー
droppable作成	dropcreate	create
draggableドラッグ開始	dropactivate	activate
draggableドラッグ終了	dropdeactivate	deactivate
droppableに乗る	dropover	over
droppableから外れる	dropout	out
ドロップされる	drop	drop

dropover, dropoutはtoleranceに依存

$('#target').droppable({
  drop: function(event, ui) {
    console.log('Dropped!');
  }
});

$('#target').on('drop', function(event, ui) {
  console.log('Dropped!'));
});

引数

event
ui.draggable
ui.helper
ui.position.top, left
ui.offset.top, left

メソッド

	メソッド
有効化	("enable")
無効化	("disable")
永久に無効化	("destroy")
すべてのオプションを取得	("option")
オプションを取得	("option", "オプション")
オプションを変更	("option", "オプション", "値")

$('#target').droppable('enable');

var x = $('#target').droppable("option", "オプション");    // オプションの値の取得

$('#target').droppable("option", "オプション", "値");    // オプションの値の設定

例

$('#box').draggable({ helper: 'clone' });
$('#target').droppable({
  accept: '#box',
  drop: function(event, ui) {
    ui.draggable.clone().appendTo(this);
  }
});

要素をリサイズ可能にする

$('#box').resizable();

リサイズ中に半透明にする

$('#box').resizable({ ghost: true });

リサイズできる方向を指定

$('#box').resizable({ handles: 'n, e, s, w' });

$('#box').resizable({ handles: [ {s: '#resize-s', e: '#resize-e'} ] });

n	上
e	右
s	下
w	左
ne	右上
se	右下
sw	左下
nw	左上

ハンドルを要素の上にカーソルを乗せるまでは非表示にする

$('#box').resizable({ autoHide: true });

リサイズ範囲を指定

$('#box').resizable({ containment: 'parent' });

parent, documentを指定できる。デフォルト：false

アスペクト比を固定

$('#box').resizable({ aspectRatio: true });

リサイズ幅/高さを指定

$('#box').resizable({ grid: [20, 50] });

grid: [横, 縦]で指定する。

リサイズ幅/高さの最小/最大を指定

$('#box').resizable({ maxHeight: 300 });

maxHeight, maxWidth, minHeight, minWidthが指定できる

ドラッグ終了後にアニメーションしながらリサイズ

$('#box').resizable({ animate: true });

アニメーションの速さを指定

$('#box').resizable({ animateDuration: 'fast' });

デフォルト：slow

アニメーションの動きを指定

$('#box').resizable({ animateEasing: 'easeOutBounce' });

デフォルト：swing

イベント

	イベント名	オプションのキー
resizable作成	resizecreate	create
リサイズ開始	resizestart	start
リサイズ中	resize	resize
リサイズ終了	resizestop	stop

$('#box').resizable({
  stop: function(event, ui) {
    console.log('Resized!');
  }
});

$('#box').on('resizestop', function(event, ui) {
  console.log('Resized!'));
});

引数

event
ui.element
ui.helper
ui.originalElement
ui.originalPosition.left, top
ui.originalSize.width, height
ui.position.left, top
ui.size.width, height

メソッド

	メソッド
有効化	("enable")
無効化	("disable")
永久に無効化	("destroy")
すべてのオプションを取得	("option")
オプションを取得	("option", "オプション")
オプションを変更	("option", "オプション", "値")

$('#box').resizable('enable');

var x = $('#box').resizable("option", "オプション");    // オプションの値の取得

$('#box').resizable("option", "オプション", "値");    // オプションの値の設定

例

$('#box').resizable({
  stop: function(event, ui) {
    console.log(ui.size.width, ui.size.height);
  }
});

複数選択や範囲選択が可能になる。

要素を選択可能にする

$('#list').resizable();

選択できる要素を指定

$('#list').resizable({ filter: 'li' });

イベント

	イベント名	オプションのキー
selectable作成	selectablecreate	create
選択開始	selectablestart	start
選択中	selectableselecting	selecting
選択後	selectableselected	selected
選択終了	selectablestop	stop
選択解除中	selectableunselecting	unselecting
選択解除後	selectableunselected	unselected

$('#list').selectable({
  selected: function(event, ui) {
    console.log('Selected!');
  }
});

$('#list').on('selected', function(event, ui) {
  console.log('Selected!'));
});

引数

event
ui.selecting
ui.selected
ui.unselecting
ui.unselected

start, stopにはuiはない

メソッド

	メソッド
有効化	("enable")
無効化	("disable")
永久に無効化	("destroy")
すべてのオプションを取得	("option")
オプションを取得	("option", "オプション")
オプションを変更	("option", "オプション", "値")

$('#list').selectable('enable');

var x = $('#list').selectable("option", "オプション");    // オプションの値の取得

$('#list').selectable("option", "オプション", "値");    // オプションの値の設定

クラス

自動でselecting, selectedClassが付く

例

var a = [];
$('#list').selectable({
  selected: function(event, ui) {
    if (a.indexOf(ui.selected.id) === -1) {
      a.push(ui.selected.id);
    }
    console.log(a);
  },
  unselected: function(event, ui) {
    var id = ui.unselected.id;
    a.splice(a.indexOf(id),1);
    console.log(a);
  }
});

要素を並べ替え可能にする

$('#list').sortable();

移動方向を制限

$('#list').sortable({ axis: "x" });    // 横方向のみ

$('#list').sortable({ axis: "y" });    // 縦方向のみ

ドラッグ中の透明度

$('#list').sortable({ opacity: 0.5 })

ドラッグを開始できる範囲を指定

$('#list').sortable({ handle: '.handle' });

ドラッグを開始できない範囲を指定

$('#list').sortable({ cancel: '.cancel' });

ドラッグ中のカーソルを指定

$('#list').sortable({ cursor: 'all-scroll' });

default	デフォルト（矢印）
pointer	リンクカーソル
crosshair	十字カーソル
move	全方向矢印
text	テキスト編集
wait	砂時計/レインボーカーソル
help	ヘルプ（？）
n-resize	上リサイズ
e-resize	右リサイズ
s-resize	下リサイズ
w-resize	左リサイズ
ne-resize	右上リサイズ
se-resize	右下リサイズ
sw-resize	左下リサイズ
nw-resize	左上リサイズ
all-scroll	手

ドラッグ幅/高さを指定

$('#list').sortable({ grid: [20, 50] });

grid: [横, 縦]で指定する。

並び順を出力

var s = $( "#list" ).sortable( "serialize" );

要素がitem-1, item_1, item=1のようなIDでないと使えない

イベント

	イベント名	オプションのキー
sortable作成	sortcreate	create
ドラッグ開始	sortstart	start
ドラッグ中	sort	drag
並べ替え中	sortchange	change
ドラッグ終了	sortstop	stop
並べ替え終了	sortupdate	update

$('#list').sortable({
  start: function(event, ui) {
    console.log(ui.item[0].id);
  }
});

$('#list').on('sortstart', function(event, ui) {
  console.log(ui.item[0].id);
};

引数

event
ui.helper
ui.item
ui.position.top, left
ui.offset.top, left
ui.originalPosition.top, left

メソッド

	メソッド
有効化	("enable")
無効化	("disable")
永久に無効化	("destroy")
すべてのオプションを取得	("option")
オプションを取得	("option", "オプション")
オプションを変更	("option", "オプション", "値")

$('#list').sortable('enable');

var x = $('#list').sortable("option", "オプション");    // オプションの値の取得

$('#list').sortable("option", "オプション", "値");    // オプションの値の設定

例

$('#list').sortable({
  update: function(event, ui) {
    console.log($(this).sortable('serialize'));
  }
});

ある要素とそれに隣接したある要素のペアをアコーディオンにする

<div id="accordion">
  <h3>Header1</h1>
  <p>Text1</p>
  <h3>Header2</h1>
  <p>Text2</p>
  <h3>Header2</h1>
  <p>Text2</p>
</div>

$('#accordion').accordion();

自動で補完する

<input type="text" id="complete">

var list = ['a', 'b', 'c'];
$('#complete').autocomplete({ source: list });

最小文字数を指定

$('#complete').autocomplete({
  source: list,
  minLength: 0
});

デフォルト：1

メソッド

	メソッド
有効化	("enable")
無効化	("disable")
永久に無効化	("destroy")
すべてのオプションを取得	("option")
オプションを取得	("option", "オプション")
オプションを変更	("option", "オプション", "値")

$('#complete').autocomplete('enable');

var x = $('#complete').autocomplete("option", "オプション");    // オプションの値の取得

$('#complete').autocomplete("option", "オプション", "値");    // オプションの値の設定

ボタンの生成

<button>Button</button>

$('button').button();

チェックボックス

<input type="checkbox" id="check"><label for="check">Checkbox</label>

$('input').button();

チェックボックス（グループ）

<div>
  <input type="checkbox" id="radio1"><label for="radio1">Radio1</label>
  <input type="checkbox" id="radio2"><label for="radio2">Radio2</label>
  <input type="checkbox" id="radio3"><label for="radio3">Radio3</label>
</div>

$('div').buttonset();

ラジオボタン

<input type="radio" name="radio" id="radio1"><label for="radio1">Radio1</label>
<input type="radio" name="radio" id="radio2"><label for="radio2">Radio2</label>
<input type="radio" name="radio" id="radio3"><label for="radio3">Radio3</label>

$('input').button();

ラジオボタン（グループ）

<div>
  <input type="radio" name="radio" id="radio1"><label for="radio1">Radio1</label>
  <input type="radio" name="radio" id="radio2"><label for="radio2">Radio2</label>
  <input type="radio" name="radio" id="radio3"><label for="radio3">Radio3</label>
</div>

$('div').buttonset();

日付の選択

<input type="text">

$('input').datepicker();

フォーマットの指定

$('input').datepicker({ dateFormat: 'yy/mm/dd' });

d	日（1〜2桁）
dd	日（2桁）3桁）
D	曜日（短縮）
DD	曜日（完全）
m	月（1〜2桁）
mm	月（2桁）
M	月名（短縮）
MM	月名（完全）
y	年（2桁）
yy	年（4桁）
o	年間通算日（1〜3桁）
oo	年間通算日（
@	Unixタイムスタンプ

表示される月の数

$('input').datepicker({ numberOfMonths: 3 });

$('input').datepicker({ numberOfMonths: [2, 3] });

[縦, 横]で指定

選択可能な日を指定

$('input').datepicker({
  minDate: -2,
  maxDate: '+1m'
});

y, m, w, dが指定できる

月曜日始まりにする

$('input').datepicker({ firstDay: 1 });

自動でテキストボックスの幅を設定

$('input').datepicker({ autoSize: true });

dateFormatの値によって幅が変化する

月の名前を変更

$('input').datepicker({
  monthNames: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
  monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
});

曜日の名前を変更

$('input').datepicker({
  dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
  dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
  dayNamesMin: ['日', '月', '火', '水', '木', '金', '土']
});

月を年の後に表示

$('input').datepicker({ showMonthAfterYear: true });

年の書式

$('input').datepicker({ yearSuffix: '年' });

ダイアログを開く

<div id="msg">Message</div>

$('#msg').on('click', function() {
  $('#msg').dialog('open');
});

自動で開かないようにする

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

ボタンの処理

$('#msg').dialog({
  buttons: {
    "OK": function() {
      $(this).dialog('close');
    }
  }
});

タイトルを指定

$('#msg').dialog({ title: 'Title' });

開いている間に他の操作をさせない

$('#msg').dialog({ modal: true });

プログレスバーの作成

<div id="bar" style="width:200px;"></div>

$('#bar').progressbar();

％を指定

>$('#bar').progressbar({ value: 50 });

未指定の場合0％になる

スライダーの作成

<div id="slider" style="width:200px;"></div>

$('#slider').slider();

垂直方向にする

$('#slider').slider({ orientation: 'vertical' });

範囲を指定させるようにする

$('#slider').slider({ range: true });

スライダーの移動間隔を指定

$('#slider').slider({ range: true });

最小/最大値を指定

$('#slider').slider({ min: 10 });

$('#slider').slider({ max: 80 });

初期値（％）を指定

$('#slider').sider({ step: 5 });

rangeがtrueの場合の初期値

$('#slider').sider({ value: [10, 25] });

イベント

	イベント名	オプションのキー
slider作成	slidecreate	create
スライド開始	slidestart	start
スライド中	slide	slide
スライド終了	slidestop	stop

$('#slider').slider({
  slide: function(event, ui) {
    console.log(ui.value);
  }
});

$('#slider').on('slide', function(event, ui) {
  console.log(ui.value);
};

引数

event
ui.handle
ui.value
ui.values

メソッド

	メソッド
有効化	("enable")
無効化	("disable")
永久に無効化	("destroy")
すべてのオプションを取得	("option")
オプションを取得	("option", "オプション")
オプションを変更	("option", "オプション", "値")

$('#slider').slider('enable');

var x = $('#slider').slider("option", "オプション");    // オプションの値の取得

$('#slider').slider("option", "オプション", "値");    // オプションの値の設定

例

スライダーとプログレスバーを連動：

$('#slider').slider({
  slide: function(event, ui) {
    $('#bar').progressbar('option', 'value', ui.value);
  }
});

タブを作成

<div id="tabs">
  <ul>
    <li><a href="#menu1">Menu1</a>
    <li><a href="#menu2">Menu2</a>
    <li><a href="#menu3">Menu3</a>
  </ul>

  <div id="menu1">Menu1</div>
  <div id="menu2">Menu2</div>
  <div id="menu3">Menu3</div>
</div>

$('#tabs').tabs();

最初に開いておくタブ

$('#tabs').tabs({ selected: 1 });

0から始まる

開けないタブ

$('#tabs').tabs({ disabled: [1, 2] });

エフェクト

$('#tabs').tabs({ hide: { effect: 'slideUp', duration: 200 } });

$('#tabs').tabs({ show: { effect: 'slideDown', duration: 200 } });

エフェクト

$('#box').on('click', function() {
  $(this).effect('explode', {pieces: 4}, 'slow');
});

jQuery UIやjQueryからエフェクトを探すと良い

基本

JavaScriptとCSSを読み込む

Draggable

要素をドラッグ可能にする

移動方向を制限

ドラッグ中の透明度

ドラッグを開始できる範囲を指定

ドラッグを開始できない範囲を指定

ドラッグ中のカーソルを指定

ドラッグ幅/高さを指定

ドラッグ開始時に元の要素を残す

自動で付けられるClassを付けない

イベント

引数

メソッド

Droppable

draggable要素をドロップ可能にする

受け入れるdraggable要素を指定

上にdraggable要素を乗せられた時にClassを追加

受け入れ可能なdraggable要素がドラッグされている時にdroppable要素にClassを追加

ドロップ判定になる範囲を指定

ドロップ無効にする

自動で付けられるClassを付けない

イベント

引数

メソッド

例

Resizable

要素をリサイズ可能にする

リサイズ中に半透明にする

リサイズできる方向を指定

ハンドルを要素の上にカーソルを乗せるまでは非表示にする

リサイズ範囲を指定

アスペクト比を固定

リサイズ幅/高さを指定

リサイズ幅/高さの最小/最大を指定

ドラッグ終了後にアニメーションしながらリサイズ

アニメーションの速さを指定

アニメーションの動きを指定

イベント

引数

メソッド

例

Selectable

要素を選択可能にする

選択できる要素を指定

イベント

引数

メソッド

クラス

例

Sortable

要素を並べ替え可能にする

移動方向を制限

ドラッグ中の透明度

ドラッグを開始できる範囲を指定

ドラッグを開始できない範囲を指定

ドラッグ中のカーソルを指定

ドラッグ幅/高さを指定

並び順を出力

イベント

引数

メソッド

例

Accordion

ある要素とそれに隣接したある要素のペアをアコーディオンにする

Autocomplete

自動で補完する

最小文字数を指定

メソッド

Button

ボタンの生成

チェックボックス

チェックボックス（グループ）

ラジオボタン

ラジオボタン（グループ）

Datepicker

日付の選択

フォーマットの指定

表示される月の数