jQuery mobileメモ書き - Futuro di Lucertola

後学のためにスマートフォンサイトを構築中。ざっと調べたところ、jQuery mobileを使うのが一番良さそうな感じ。
これは結構使いそうだなーって思ったものを備忘録代わりに。

リスト内でリンクを貼ると、リスト項目全体がリンクになるんだけど、敢えてそうしたくない場合も多々あるわけで。
リスト表示内で<p>〜</p>でコンテンツを囲ってやればリンクリストのスタイルが出来ようされずに通常表示になるっぽい。

この場合、本文が途切れてしまうので別途CSSで下記のように「white-space:nomal」を指定してやる。

li p.ui-li-desc {
	overflow: hidden;
	white-space: normal;
}

もしかしたら、<p>タグで囲むやり方はバグを利用してるだけかもしれないので、今後使えなくなるかも。

<a>に「data-rel="back"」属性を加えるとhrefに何を指定しようが「ブラウザの戻るボタン」と同じ動き（history.back();）をする。

<a href="/" data-rel="back">戻る</a>

ただ、外部から該当ページに飛んでくることを考えると、「data-direction」に「reverse」を指定してやって、それっぽい動きだけさせた方がいいかも。

<a href="/" data-direction="reverse">戻る</a>

ページ遷移する際、毎回「loading」が表示されないようにするには、<a>に「data-prefetch」属性を加えるとそのページを先読みするらしい。

<a href="index.php" data-prefetch>Top</a>

とは言うものの、あまり大量のページを先読みさせるとレスポンスが悪くなるので、ヘッダーに「戻る」や「Home」ボタンを設置したときに使うぐらいがいいのかも。

「viewport」で「width=device-width」を指定しても、2pxくらいの隙間が出来て左右に動いてしまうのを回避する方法を誰か知ってたら教えてください(ノ∀`)

<meta name="viewport" content="width=device-width">

(追記)
下記をスタイルの最後に追加してやって解決。

.ui-header,.ui-footer  {
	border-left:none;
	border-right:none;
}

普通に組んでたら出ない症状かも(；´∀｀)

ページ遷移するときにページ最上部に移動してからスライドするのは仕様ですよね？(；´∀｀)