画面遷移とレイアウトが癖のあるjQuery Mobile

Dreamweaver5.5よりjQuery Mobileが実装されたので早速挑戦。
正式版は近日中?とのことらしいですが感想と注意点をメモ。

フレームワークのようになっていてHTML5のdata属性を多用してあれこれ関連づけている。
HTML5の機能を使っているだけとういかアプリ用だと思うので<header>や<section>タグは使わなくてもdata-role属性で使い分けるみたい。

制約というかフレームワークのような癖があるのでアプリ開発の経験がある方がより有益なものをつくりやすいかもしれません。

以下、印象に残ったポイント

①レイアウト、CSSが慣れないと大変
レイアウト構造は<div>タグにdata-XXX属性でヘッダー、ボディ、フッター等機能わけしていますがそれに関連してCSSスタイル(CSS3)も定義されています。配色違いで複数のパターンが用意されていますがレイアウトやデザインんにこだわると定義済みのCSSを上書きする必要があります。

②ページ外遷移のリンクにはrel=”extearnal”属性をつける
同一ドメイン内のページからページへの遷移の場合<a>タグで普通に遷移する場合rel属性無しだとajax使用で「Loading」アニメーションが表示されて遷移します。各ページの遷移だけならいいのかもしれませんがパスに問題ありページ内遷移(後述)でこまったことになるかもしれません。関数を使う方法もあるみたいですがajax経由ではなく相対パスを意識してhref属性にも”/”から始め、rel属正にもrel=”extra”をセットしましょう。

<a href=”/hoge.html” rel=”external”>hoge.htmlに遷移</a>

*関連トピックスとして$.modile.changePage()や$.modileプロパティで遷移やajax遷移の制御もあるみたいです

上記に関連して同一ページ内遷移について通常のHTMLとは違い一つのHTMLファイルのなかで<div>のdata-role=”page”の指定と固有のidを割り付けることであたかも複数のページ(コンテンツ)を保持することができます。
ページ内遷移の場合は<a>タグのhref属性にjQueryのID指定する”# + ID”を指定します。rel属性は指定しません。あと遷移時のトランジッションでslipdeしたりpopupsといった仕様をdata-transition属性で指定できません。これでクリックするとLoading画面があれわれ指定したトラジッションであたかも別ページに遷移したように画面が切り替わります。

<!–/// <div data-role=”page” id=”hoge”>のあるコンテンツにジャンプ ///–>
<a href=”#hoge” data-role=”button” data-theme=”a” data-transition=”slide”>hoge</a>

③フッター固定は微妙に隙間があくのでとりあえず固定しない
<div data-role=”footer” data-position=”fixed” >
で画面がスクロールしても画面下部にフッターが固定されるのですが少し不安定で隙間が空いてしまいます。

以上、気が付いたのでメモ。
確かに高機能で面白いものができそうです。ただ企画、設計なしでやっちゃうとドツボにはまりそうなのでエンジニアよりの視点から開発は取り組んだ方がいいのかなって思いました。