1. jsCafe16
jQuery UI
末永 まり絵 (@mima_v)

2. About jQuery UI
ユーザーインターフェイスに特化したライブラリ
主要なブラウザでテスト済
使いやすい ＆ 導入しやすい
デフォルトでテーマが選べる

3. About jQuery UI

4. About Function
Interactions
Draggable/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

5. 機能について
マウス操作
ドラッグ＆ドロップ、選択、
ソート、サイズ変更など
UI部品
ツールチップ、アコーディオン、
モーダルウィンドウ、
オートコンプリート機能など
エフェクト
カラーアニメーション、要素の表示非
表示のアニメーションなど

6. tooltip
jQueryのみの場合
http://bit.ly/1ay9MLd
jQuery UIを使った場合
http://bit.ly/1ay9Kmz

7. tooltip
jQueryのみの場合
http://bit.ly/1ay9MLd
jQuery UIを使った場合
http://bit.ly/1ay9Kmz
$('#tooltip')
.hover(function() {
$('#tip').stop().fadeTo(550 , 1)
},function () {
$('#tip').stop().fadeTo(550 , 0)
});
$("#tip").tooltip();

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

9. Droppable
$('#draggable').draggable(); ドラッグ要素をドラッグ可能に。
$('#droppable').droppable({
ドラッグ要素のドロップ
accept:"#draggable",
を受け入れる
ドラッグした時に
drop:function( event, ui ) {
何かさせる
$('#draggable').addClass( 'hoge' )
ドラッグした要素にclass=“hoge”をつける
.html( 'ドロップ完了' )

10. Droppable
Options
accept/activeClass/addClasses/
disabled/greedy/hoverClass/
scope/tolerance
Methods
destroy/disable/enable/
option/widget
Events
activate/create/
deactivate/drop/out/over

11. Droppable
drop
要素がドラッグされている時に適用するクラス名。
disabled
オプション
true→ドロップ不可
tolerance
要素がどの程度（50%やすべて、マウスポインターな
ど）領域に入っている場合に実行するか。

12. Droppable
メソッド
destroy ドロップ機能を完全に削除する。
disable ドロップ機能を一時的に取り除く。
enable ドロップ機能を復活させる。
イベント
activate ドラッグされた時。
create Droppableが作成された時。
deactivate ドラッグ終了した時
drop
ドロップした時。
out 要素外にドラッグした時。
over
要素を重ねた時。

13. ありがとうございました。
http://suema-r.com/blog/
fb.me/suenagamarie