Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20131110 j queryui

500 views

Published on

  • Be the first to comment

20131110 j queryui

  1. 1. jsCafe16 jQuery UI 末永 まり絵 (@mima_v)
  2. 2. About jQuery UI ユーザーインターフェイスに特化したライブラリ 主要なブラウザでテスト済 使いやすい & 導入しやすい デフォルトでテーマが選べる
  3. 3. About jQuery UI
  4. 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. 5. 機能について マウス操作 ドラッグ&ドロップ、選択、 ソート、サイズ変更など UI部品 ツールチップ、アコーディオン、 モーダルウィンドウ、 オートコンプリート機能など エフェクト カラーアニメーション、要素の表示非 表示のアニメーションなど
  6. 6. tooltip jQueryのみの場合
 http://bit.ly/1ay9MLd
 jQuery UIを使った場合
 http://bit.ly/1ay9Kmz

  7. 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. 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. 9. Droppable $('#draggable').draggable(); ドラッグ要素をドラッグ可能に。 $('#droppable').droppable({ ドラッグ要素のドロップ accept:"#draggable", を受け入れる ドラッグした時に drop:function( event, ui ) { 何かさせる $('#draggable').addClass( 'hoge' ) 
 ドラッグした要素にclass=“hoge”をつける .html( 'ドロップ完了' )
  10. 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. 11. Droppable drop 要素がドラッグされている時に適用するクラス名。 disabled オプション true→ドロップ不可 tolerance 要素がどの程度(50%やすべて、マウスポインターな ど)領域に入っている場合に実行するか。
  12. 12. Droppable メソッド destroy ドロップ機能を完全に削除する。 disable ドロップ機能を一時的に取り除く。 enable  ドロップ機能を復活させる。 イベント activate  ドラッグされた時。 create   Droppableが作成された時。 deactivate ドラッグ終了した時 drop ドロップした時。 out    要素外にドラッグした時。 over 要素を重ねた時。
  13. 13. ありがとうございました。 http://suema-r.com/blog/ fb.me/suenagamarie

×