jQuery UI

(@mima_v)

jsCafe16

末永 まり絵

ユーザーインターフェイスに特化したライブラリ

主要なブラウザでテスト済

使いやすい ＆ 導入しやすい

デフォルトでテーマが選べる

About jQuery UI

About jQuery UI

About Function

InteractionsDraggable/Droppable/Resizable/

Selectable/Sortable

Widgets

Accordion/Autocomplete/Button/

Datepicker/Dialog/Menu/Progressbar/

Slider/Spinner/Tabs/Tooltip

Effects

Effect/Show・Hide・Toggle/

Add・Remove・Toggle・Switch Class/

Color Animation

機能について

マウス操作ドラッグ＆ドロップ、選択、

ソート、サイズ変更など

UI部品

ツールチップ、アコーディオン、

モーダルウィンドウ、

オートコンプリート機能など

エフェクトカラーアニメーション、要素の表示非

表示のアニメーションなど

jQueryのみの場合http://bit.ly/1ay9MLd

jQuery UIを使った場合http://bit.ly/1ay9Kmz

tooltip

jQueryのみの場合http://bit.ly/1ay9MLd

$('#tooltip') .hover(function() { $('#tip').stop().fadeTo(550 , 1) },function () { $('#tip').stop().fadeTo(550 , 0) });

jQuery UIを使った場合http://bit.ly/1ay9Kmz

tooltip

$("#tip").tooltip();

Demo

Draggableドラッグを可能にする。http://bit.ly/1gzuHG9

Droppableある要素を他の要素にD&Dした時に何かさせる。http://bit.ly/1gzDMyC

Sortable順番を入れ替える。http://bit.ly/1capQ8D

Resizable要素の拡大縮小を可能にする。http://bit.ly/1cajFBm

Selectable複数項目を選択可能にする。http://bit.ly/1caoVoH

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

$('#droppable').droppable({

accept:"#draggable",

drop:function( event, ui ) {

$('#draggable').addClass( 'hoge' )

.html( 'ドロップ完了' )

ドラッグ要素をドラッグ可能に。

ドラッグ要素のドロップ を受け入れる

ドラッグした時に 何かさせる

ドラッグした要素にclass=“hoge”をつける

Droppable

Droppable

Options

accept/activeClass/addClasses/

disabled/greedy/hoverClass/

scope/tolerance

Methodsdestroy/disable/enable/

option/widget

Eventsactivate/create/

deactivate/drop/out/over

Droppable

オプション

drop

要素がドラッグされている時に適用するクラス名。

disabled

true→ドロップ不可

tolerance

要素がどの程度（50%やすべて、マウスポインターな

ど）領域に入っている場合に実行するか。

Droppable

メソッドdestroy　ドロップ機能を完全に削除する。

disable　ドロップ機能を一時的に取り除く。

enable　 ドロップ機能を復活させる。

イベント

activate　 ドラッグされた時。

create　　　Droppableが作成された時。

deactivate ドラッグ終了した時

drop ドロップした時。

out　　　　要素外にドラッグした時。

over 要素を重ねた時。

ありがとうございました。

fb.me/suenagamarie

http://suema-r.com/blog/