Enviar búsqueda
Cargar
20131110 j queryui
•
1 recomendación
•
631 vistas
Marie Suenaga
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 13
Descargar ahora
Descargar para leer sin conexión
Recomendados
SWT/JFace
SWT/JFace
Hideki Kishida
Prodintec, General Overview
Prodintec, General Overview
Ricardo_Casasola
Rhetoriké Carpeta Institucional
Rhetoriké Carpeta Institucional
veropreviale
Foto
Foto
Ivon Gomez
Beaufort college spring prospectus 2013
Beaufort college spring prospectus 2013
Roy Murray
Slide Show
Slide Show
mthomann123
Corporate Culture
Corporate Culture
sarveshsoni
スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術
Kouichi Kuriyama
Recomendados
SWT/JFace
SWT/JFace
Hideki Kishida
Prodintec, General Overview
Prodintec, General Overview
Ricardo_Casasola
Rhetoriké Carpeta Institucional
Rhetoriké Carpeta Institucional
veropreviale
Foto
Foto
Ivon Gomez
Beaufort college spring prospectus 2013
Beaufort college spring prospectus 2013
Roy Murray
Slide Show
Slide Show
mthomann123
Corporate Culture
Corporate Culture
sarveshsoni
スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術
Kouichi Kuriyama
JqueryMobile
JqueryMobile
Hazuki Wakabayashi
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
インフラジスティックス・ジャパン株式会社
jQuery Mobile で作る" 実用" スマフォアプリ
jQuery Mobile で作る" 実用" スマフォアプリ
Takashi Okamoto
UI要素を動的に利用する
UI要素を動的に利用する
HideoMiyake
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Satoru Yamaguchi
jQuery Mobile
jQuery Mobile
yoshikawa_t
Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編
インフラジスティックス・ジャパン株式会社
LTゆるっとソン2017
LTゆるっとソン2017
Marie Suenaga
Css nite fukuoka8 suenaga
Css nite fukuoka8 suenaga
Marie Suenaga
はじめてのハッカソンVol.7(2015 1-17)
はじめてのハッカソンVol.7(2015 1-17)
Marie Suenaga
はじめてのハッカソン&インセプションデッキ 140308
はじめてのハッカソン&インセプションデッキ 140308
Marie Suenaga
140119 hackathon
140119 hackathon
Marie Suenaga
第2回 1.5からはじめるIT勉強会 「はじめてのWindows AzureでWordPressサイトを構築する」
第2回 1.5からはじめるIT勉強会 「はじめてのWindows AzureでWordPressサイトを構築する」
Marie Suenaga
1.5からはじめるIT勉強会 adobe edge_animate
1.5からはじめるIT勉強会 adobe edge_animate
Marie Suenaga
スマートフォン対応とレスポンシブWebデザイン
スマートフォン対応とレスポンシブWebデザイン
Marie Suenaga
Photoshopで効率よくデザインしよう!
Photoshopで効率よくデザインしよう!
Marie Suenaga
Más contenido relacionado
Similar a 20131110 j queryui
JqueryMobile
JqueryMobile
Hazuki Wakabayashi
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
インフラジスティックス・ジャパン株式会社
jQuery Mobile で作る" 実用" スマフォアプリ
jQuery Mobile で作る" 実用" スマフォアプリ
Takashi Okamoto
UI要素を動的に利用する
UI要素を動的に利用する
HideoMiyake
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Satoru Yamaguchi
jQuery Mobile
jQuery Mobile
yoshikawa_t
Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編
インフラジスティックス・ジャパン株式会社
Similar a 20131110 j queryui
(9)
JqueryMobile
JqueryMobile
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
jQuery Mobile で作る" 実用" スマフォアプリ
jQuery Mobile で作る" 実用" スマフォアプリ
UI要素を動的に利用する
UI要素を動的に利用する
Css nite(2010.09.23)
Css nite(2010.09.23)
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
jQuery Mobile
jQuery Mobile
Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編
Más de Marie Suenaga
LTゆるっとソン2017
LTゆるっとソン2017
Marie Suenaga
Css nite fukuoka8 suenaga
Css nite fukuoka8 suenaga
Marie Suenaga
はじめてのハッカソンVol.7(2015 1-17)
はじめてのハッカソンVol.7(2015 1-17)
Marie Suenaga
はじめてのハッカソン&インセプションデッキ 140308
はじめてのハッカソン&インセプションデッキ 140308
Marie Suenaga
140119 hackathon
140119 hackathon
Marie Suenaga
第2回 1.5からはじめるIT勉強会 「はじめてのWindows AzureでWordPressサイトを構築する」
第2回 1.5からはじめるIT勉強会 「はじめてのWindows AzureでWordPressサイトを構築する」
Marie Suenaga
1.5からはじめるIT勉強会 adobe edge_animate
1.5からはじめるIT勉強会 adobe edge_animate
Marie Suenaga
スマートフォン対応とレスポンシブWebデザイン
スマートフォン対応とレスポンシブWebデザイン
Marie Suenaga
Photoshopで効率よくデザインしよう!
Photoshopで効率よくデザインしよう!
Marie Suenaga
Más de Marie Suenaga
(9)
LTゆるっとソン2017
LTゆるっとソン2017
Css nite fukuoka8 suenaga
Css nite fukuoka8 suenaga
はじめてのハッカソンVol.7(2015 1-17)
はじめてのハッカソンVol.7(2015 1-17)
はじめてのハッカソン&インセプションデッキ 140308
はじめてのハッカソン&インセプションデッキ 140308
140119 hackathon
140119 hackathon
第2回 1.5からはじめるIT勉強会 「はじめてのWindows AzureでWordPressサイトを構築する」
第2回 1.5からはじめるIT勉強会 「はじめてのWindows AzureでWordPressサイトを構築する」
1.5からはじめるIT勉強会 adobe edge_animate
1.5からはじめるIT勉強会 adobe edge_animate
スマートフォン対応とレスポンシブWebデザイン
スマートフォン対応とレスポンシブWebデザイン
Photoshopで効率よくデザインしよう!
Photoshopで効率よくデザインしよう!
20131110 j queryui
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
Notas del editor
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オプションはキーワードがフィールドに入力されてから、どのくらい後にリスト表示処理を開始するかを設定する。
イベントはイベント発生タイミングを指定します。
Descargar ahora