Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Brief Introduction of jQuery Mobile
Search
Tak Yanagida
November 10, 2013
Programming
0
120
Brief Introduction of jQuery Mobile
jQuery Mobileでモバイル対応してみた
jsCafe16で発表した資料です。お好みダムサーチのモバイル版を開発した際の経験を簡単にまとめました。
Tak Yanagida
November 10, 2013
Tweet
Share
More Decks by Tak Yanagida
See All by Tak Yanagida
Non-mercator Projection with Mapnik
tyanagida
1
1.1k
How much we have to study English?
tyanagida
0
110
Functional Programming Applied in JS
tyanagida
0
92
PowerShell for LL Users
tyanagida
0
1.2k
Other Decks in Programming
See All in Programming
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
CI改善もDatadogとともに
taumu
0
110
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
時計仕掛けのCompose
mkeeda
1
280
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Featured
See All Featured
Building Your Own Lightsaber
phodgson
104
6.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Visualization
eitanlees
146
15k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
The Language of Interfaces
destraynor
156
24k
Code Review Best Practice
trishagee
66
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
How GitHub (no longer) Works
holman
313
140k
Code Reviewing Like a Champion
maltzj
521
39k
Transcript
jQuery Mobile 紹介 柳田 @tyanagida
ダムの地図公開してます http://maps.ontarget.cc/dams/sp_ja.php
実装の概要 • アプリじゃなくてWebページ • HTMLは1つだけ • jQuery Mobileを利用 • Google
Maps API v3を利用 モバイル対応してます
モバイル版の作り方 1. PC版を見て、画面の分け方を考える
<div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加
<div id="map_canvas" data-role="content"></div>
<div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加
<div id="map_canvas" data-role="content"></div>
<div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加
<div id="map_canvas" data-role="content"></div>
<div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加
<div id="map_canvas" data-role="content"></div>
<div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加
<div id="map_canvas" data-role="content"></div>
<div id="map_page" data-role="page" data-theme="a"> <div data-role="header" data-position="fixed"> <h1>地図表示</h1> 2. 該当する部分にdivタグ追加
<div id="map_canvas" data-role="content"></div> data-xxxx: jQuery Mobile用の属性
<div data-role="navbar"> <ul> <li><a href="#map_page" data-icon="home">地図</a></li> <li><a href="#side_area" data-icon="bars">一覧</a></li> 3.
navbarも追加 画面切替はハッシュ切り替え
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.js"></script>
4. jQuery Mobileを読み込み 簡単!! Maps APIには苦労したけど…
補足: ドキュメント ここまで紹介したように、jQuery Mobileは、通常のjQueryや jQuery UIと違って、API呼出しではなく、HTMLマークアップが標 準的な使い方です。したがって、APIドキュメントよりも、公式サ イトのDEMOページを参考にすることをおすすめします。 http://view.jquerymobile.com/1.3.2/demos/