#NSEG

Jquery Mobileを使ってみた

2011年4月30日土曜日

自己紹介Name: Hiroaki Kanazawa

Twitter id: kanayannet

Programming: Perl Ruby Javascript Html etc

Study Meeting: Gunma-web(#gunmaweb) Guruby　　　　　　　　tkbjs(online study meeting)

2011年4月30日土曜日

趣味サイト(制作中なう)

http://gunma-web.org/gunma-map/

※まだまだ、SEO不十分なので、検索に引っかかりません。サイト名の変更あり得ますw

2011年4月30日土曜日

サイト構成HTTP Server Apache

DB MySQL

Frame Work Sinatra( Ruby )

Javascript Jquery Mobile

2011年4月30日土曜日

5

Jquery Mobile1. Jquery Mobileとは？2. 主な機能紹介3. よく使う method

4. ハマりやすい注意点5. 今後、期待出来る展望

※間違っている事、言うかもしれないので、質疑応答などで突っ込み入れていただければ助かります。

2011年4月30日土曜日

6

Jquery Mobileとは？jQueryのプラグインとして利用するモバイルアプリケーション(Smart Phone)用のライブラリです。

2011年4月30日土曜日

7

主な機能紹介1. スライドアクション

2. ダイアログ

3. タグの使用例(HTML)

2011年4月30日土曜日

8

スライドアクション

画面実際に見せますhttp://www.youtube.com/watch?v=GWbdIB3iYBo

2011年4月30日土曜日

9

ダイアログ

画面実際に見せますhttp://www.youtube.com/watch?v=GaqTNE7Z4Ag

2011年4月30日土曜日

10

タグの使用例(HTML)<div id="home" data-role="page" data-theme="d"> <div data-role="header"> <h1>TiTle</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="#A">Go to A</a></li> </ul> </div></div><div id=”A” data-role="page" data-theme="d"> Aのページです。</div>

2011年4月30日土曜日

11

タグの使用例(HTML)

画面実際に見せますhttp://www.youtube.com/watch?v=0pOnjgmSda0

2011年4月30日土曜日

12

よく使う method$.mobile.pageLoading(); #loading中$.mobile.changePage("#confirm_map_contents", "slide"); #ページをスライドしながら遷移$.mobile.pageLoading(true); #loading中を消す

※ajax で動的にページを変えたい時に使います。

2011年4月30日土曜日

13

ハマりやすい注意点2回 ajaxで動的にページの中身を変えると、画面が崩れる Forum を見ると、「デザインに関わるmethod も忘れずに 呼んでね」とある listview(); button(); .....etc....

バージョンアップ時に CSS の定義が変わる ぐむう...さすが、まだまだ、α版...

2011年4月30日土曜日

14

今後、期待出来る展望まだまだ、α版なのでβ版になる頃にはもっと、使い勝手が良くなっているという希望が持てる。

「Dreamweaver に採用される」というニュースが流れる。

2011年4月30日土曜日

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

2011年4月30日土曜日