2013-02 / 2013-02-28

前のエントリ: いつのまにかsymlinkを辿ってくれなくなっていたので設定変更 [samba]
次のエントリ: Viewportの設定 [jQueryMobile]

jQueryMobileを使ったWebページの基本(中の基本)
2013-02-28-1 / カテゴリ: [html][JavaScript][jQueryMobile] / [permlink]

jQueryMobileを使うには
  • jQueryのサイト(CDN)にあるjs+cssを直接参照
  • ダウンロードしてローカルで保持したものを参照
のどちらかの構成。

ダウンロードの場合は http://jquerymobile.com/download/ からzipを落としてきて次のように配置。
  • jsファイル: 任意の位置
  • cssファイル: 任意の位置
  • imagesディレクトリ: cssと同じ場所
imageを忘れないこと。
(imageを設置し忘れてリスト形式表示時とかにアイコンが表示されなくてしばらく不思議だったｗ)
すでに1.3.0がリリースされてるけど大人の事情で1.2.0を使用しているので以降その構成で。

jQuery Mobileを使った基本のhtmlソースはこんな感じ。ローカルのソースを読む場合は、htmlからの相対パスなどを記述する。
<!DOCTYPE html>
<html lang="ja">
  <head>
<title>template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  </head>

  <body>
<div data-role="page" id="home">
  <div data-role="header">
	<h1>はろー</h1>
  </div>

  <div data-role="content">
	Hello, jQuery Mobile.
  </div>

  <div data-role="footer">
	<h4>zaki_hmkc</h4>
  </div>
  </body>
</html>

表示領域の構成としては、まずdata-role="page"を属性に持つページ(l.11)があり、その要素として、
  • data-role="header": ヘッダ(l.12)
  • data-role="content": コンテンツ(l.16)
  • data-role="footer": フッタ(l.20)
という構造になる。
通常のhtmlでは1ページ=1htmlファイルになるけど、jQueryMobileでは1html内に複数のdata-role="page"を持たせてファイル内で画面遷移が可能。なんかHDMLぽいな。
ファイル内で画面遷移する場合は、idをアンカータグで指定すれば良い。
<a href="#home">home</a>

参考
※ ただ上のソースだけだとviewportの設定なのか表示が小さかったのでまだ調整必要そう
Referrer (Inside): [2013-03-20-1]
[ コメント ]
前のエントリ: いつのまにかsymlinkを辿ってくれなくなっていたので設定変更 [samba]
次のエントリ: Viewportの設定 [jQueryMobile]

2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12

最終更新時間: 2013-05-02 16:12