タグ: jQuery mobile

jQuery mobileでヘッダやフッタを固定位置表示するdata-positionをfixedに設定すると
裏っかわで自動的にpageのdata-fullscreenもtrueになりフルスクリーンモードになります。

フルスクリーンモードになると、contentをタップしたらヘッダやフッタが見えたり隠れたりします。
この動き、仕組みがわかっていれば画面が広くとれて便利だけど
クライアントに「ヘッダやフッタがいつの間にかなくなる不具合がでている」と誤解されそうで、きわどいなぁ。

調べてみたら、ありました。fixedだけ設定してfullscreenを阻止する方法。
fixedを設定したheader,footerへ、data-tap-toggleをfalseで設定すると実現できました。
総括するとこんなソースになります。

<div data-role="page" data-tap-toggle="false">
	<div data-role="header" data-position="fixed">...</div>
	<div data-role="content">...</div>
	<div data-role="footer" data-position="fixed">...</div>
</div>

参考サイト：
data-fullscreen=”true”

jQuery mobileをベースに組んであるウェブサイトで
デフォルトのテーマとは全く違うデザインにする場合の方法

jQuery mobile には、初期設定でA～Eの5種類のテーマが入っています。
一般的に、このテーマの色やグラデーションなどの装飾を取り外したいところには
装飾を無効にする data-role=”none” 　や
特定のテーマを部分指定する　data-theme=”[a-z]”　で、
初期設定では存在しないｆ以降を指定する方法がしられています。

ただ、この方法でも
角丸やドロップシャドウなど全テーマ共通のスタイルが残っており
これらをリセットするスタイルを被せてから任意のスタイルを設定する事もあります。

そこで、もう根本的にオリジナルのデザインにする場合のもう一つの方法を紹介します。
“jQuery mobileのテーマを初期化してデザインをカスタマイズ” の続きを読む