jQuery Mobile 1.1がリリースされたのでツールバーを固定してみた


jQuery Mobile

jQueryを応用したスマートフォン向けWeb UIフレームワーク「jQuery Mobile」の最新版1.1がリリースされました。このバージョンから、CSSのposition:fixedを利用して画面上下のツールバーを固定することができるようになったので、早速当ブログのテンプレートも直してみました。

ドキュメントによると、こんな感じでdata-position属性に「fixed」を設定するといいようです。

<div data-role="header" data-position="fixed">
	<h1>Fixed Header!</h1>
</div>

iPhone 4S(iOS 5.1)だとこんな感じ。上部ツールバーと広告の部分までを固定にして、その下をスクロールさせることができます。この手の広告ではスクロールする時に消えてスクロールが止まるたびに画面下部に出てくるものがありますが、あれよりはうざったくないかと思います。

写真 12-04-15 17 34 48

007SH(Android 2.3.3)だとこんな感じ。こちらも上部バーは完全に固定されます。

20120415-173517

ちょっと気になったのはISW11SC(Android 2.3.6)。上部バーが固定はされるのですが、スクロールされると一時的に場所がずれてしまいます。スクロールが終わると元の位置に収まる感じです。

SC20120415-174002

ISW11SCについてはjQuery Mobileが公開しているサンプルで試しても同じようにバーの位置が動いてしまうので、jQuery Mobile 1.1との相性問題(というかCSSのposition:fixedとの相性)ということが言えそうです。類似したフレームワークのjqMobiではISW11SCでもバーの位置が固定されるので、何か手はあるのでしょうが…。

コメントを残す

メールアドレスが公開されることはありません。

Time limit is exhausted. Please reload CAPTCHA.