SmartPhone
JS
#gunmaweb

http://gunma-web.org/gunma-map/
※ SEO
w

HTTP
Server Apache
DB MySQL
Frame Work Sinatra( Ruby )
Javascript Jquery Mobile

Jquery Mobile
1. Jquery Mobile
2.
3. method
4.
5.
※
4

jQuery
(Smart Phone)
5

1.
2.
3. (HTML)
6

http://www.youtube.com/
watch?v=GWbdIB3iYBo
7

http://www.youtube.com/
watch?v=GaqTNE7Z4Ag
8

<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>
9

http://www.youtube.com/
watch?v=0pOnjgmSda0
10

$.mobile.pageLoading(); #loading
$.mobile.changePage("#confirm_map_contents",
"slide"); #
$.mobile.pageLoading(true); #loading
※ajax
11

2 ajax
Forum method
listview(); button(); .....etc....
CSS
... α ...
12

α β
Dreamweaver
13

JqTouch
1. jqtouch
2.
3. method
4.
※
14

jQuery
(Smart Phone)
( )
15

1.
2. (!? )
3. (HTML)
4.
16

http://www.youtube.com/
watch?v=VwZsTv-z3Ng
17

http://www.youtube.com/
watch?v=AFXizPeuBZk
18

19

<div id="home">
<div class=”toolbar”>
<h1>TiTle</h1>
</div>
<ul>
<li><a href="#A">Go to A</a></li>
</ul>
</div>
<div id=”A”>
A
</div>
20

http://www.youtube.com/
watch?v=58k_GdRoatk
21

;
var jQT = $.jQTouch();
jQT.goTo(“# ID ”,”slide”); #
※ajax
22

#home
....orz
β
23

sencha touch
( sencha touch )
※sencha touch ( 2011/05
)
※ 2010/11
24