20131110 j queryui

489 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
489
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • jQuery UIで既に用意されたテーマを利用することで、最初から簡単にデザインが整ったものを利用することができます。
  • ダウンロードの時に色々と選べます。
    jQUery本体やUI、gruntだったり色々違います。
    ステーブル
    jquery-ui-1.9.2
    jquery-1.8.3.js
    Gruntfile.js
    Legacy
    jquery-ui-1.10.3
    jquery-1.9.1.js
    grunt.js
    Customへ→Theme Rollerについて
    CSS/テーマに関連するスタイルシートと画像が含まれている
    development-bundle/開発者向けのドキュメントやデモ、非圧縮のライブラリなどが含まれている
    js/jQueryとjQuery UIの本体が含まれている
    jQurey UIのサンプル一覧
  • UI部品についてテーマページで説明
    マウス操作&エフェクトについては、
  • 指定した要素のみを、受け入れるようにするオプションのアクセプトを追加します。
    その後にイベントを設定します。
    オプションとかイベントとか出てきましたが、こちらのページでどんなものがあるか確認することが出来ます。
    droppableで説明。
  • 指定した要素のみを、受け入れるようにするオプションのアクセプトを追加します。
    その後にイベントを設定します。
    オプションとかイベントとか出てきましたが、こちらのページでどんなものがあるか確認することが出来ます。
    droppableで説明。
  • 指定した要素のみを、受け入れるようにするオプションのアクセプトを追加します。
    その後にイベントを設定します。
    オプションとかイベントとか出てきましたが、こちらのページでどんなものがあるか確認することが出来ます。
    droppableで説明。
  • delayオプションはキーワードがフィールドに入力されてから、どのくらい後にリスト表示処理を開始するかを設定する。
  • イベントはイベント発生タイミングを指定します。
  • 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

    ×