jQuery Mobile 1.5 デモサイト

1.5の開発版ですがデモサイトができていました。

http://view.jquerymobile.com/1.5-dev/demos/

jQuery Mobile公式開発ブログ更新！！！

公式の開発ブログが更新されました。
A long overdue status update

今後の方針も書かれています。jQuery Mobileを今後も利用してくご予定の方は必読だと思います。

jQuery Mobile以外の選択肢

jQurey Mobile以外にもモバイル向けのUIデザインフレームワークはいくつかありますので、代表的なもの(現在も更新されているもの)を記載しておきたいと思います。

jQueryMobileの個人的に好きな点はPCのWebブラウザ(IE)にも対応している点ですが、Phonegap(Coldova)でアプリ化する事を前提にした場合などは速度面で最適化されているフレームワークなどを選ぶと良いのではないでしょうか。(アプリを作る場合はネイティブやTitaniumなども選択肢に入ってきます)

Onsen UI

無料(Apache License)

angular.jsは必須ではない(もちろん使える)

日本語ドキュメント有り
IEはサポートに含まれていないみたい

Ionic

無料(MIT)

angular.jsは必要

日本語ドキュメント無し
IEはサポートに含まれていない、ハイブリットアプリ向けと記載があり

Mobile Angular UI

無料(MIT)

angular.jsは必要

日本語ドキュメント無し

まだUIコンポーネントなども整っていないように感じました。デスクトップの画面(左側にメニューを出しているだけですが)にも対応していました。

後は有料ではKendoUI, Sencha Touchなどもあります。

phonegap,Cordova向けのフレームワークで調べると既にjQuery Mobileは候補にもあがっていない記事が多かったように思います。

jquery mobile1.4対応テーマ

調べてみるとバージョン1.3の頃にはたくさんあったテーマも1.4への対応は行われていないものがほとんどでした。有志がForkしたものがありましたので載せておきます。

更新履歴

• 2015/07/24 Native Droid2追加

Native Droid2

http://nativedroid.godesign.ch/material/
無料(MITライセンス)
1.4.5対応

Materialデザインに対応してあり、NativeDroidと同じく追加のコンポーネントなども入っています。iOS用のCordovaアプリには向かないとは思いますが、Webアプリにもよいのではないでしょうか。

Flat UI

https://github.com/tlkh/jquery-mobile-flat-ui-theme

オープンライセンス(The WTFPL License)

1.4.5対応

オリジナルは1.4への暫定対応依頼アップデートはありませんが、tlkhさんがForkして1.4.5へ対応してくださっていました。Flat UIのオリジナルはこちらです。

Nativedroid

http://nativedroid.godesign.ch/

リンクバック又は15$

1.4.2対応

Androidの見た目を目指したテーマでjQuery Mobileの原型は動作以外はほとんどのこっていません。オリジナルのコンポーネントも含まれています。

Graphite

iOSやAndroidの見た目を目指していないのでデスクトップ向けにも使用できて非常にいいテーマですがオリジナルの対応は1.3で終ってしましました。開発者のかたはIonicにフォーカスしているからとのことでちょっと複雑な気持ちです。
有志の方がForkされていますのでオリジナルGithubからForkされている方を探してみるといいと思います。

ios8 Theme

jquery-mobile-ios8-theme
1.4.5対応
有料(13$) 複数の顧客向けは要問い合わせ
デモ

上記のFlat UIを作成された会社が作られたテーマです。名前の通りios8のデザインをベースにオリジナルのコンポーネントも加わっています。

許可を得て掲載しています

jQuery Mobile Flat UI Themeがアップデート

Flat UI Themeは１年以上前の1.4系の暫定対応以来アップデートはありませんでしたが、有料(13$)となりますがアップデートされていました。
jquery-mobile-ios8-theme
デモ

許可を得て掲載しています

オープンライセンスのソースの方はアップデートされていませんでしたが、Forkした方は1.4.5に対応したものを作られていたのでこちらを使うといいかもしれません。

tlkh/jquery-mobile-flat-ui-theme
デモ

タイトルを固定する

マルチページでページ遷移を作った場合などに、jquery mobileが自動的にheaderのテキストを読み取ってタイトルを書き換えるのが困る場合があります。

対応方法としては以下の２つがありそうです

1.page divにdata-titleを付与する

<div data-role="page" id="page1" data-title="タイトル"> 

のようにdata-titleにタイトルにしたい項目をいれます。

 2. jquery mobileのソースをカスタマイズ

 全てのページにdata-titleを付与するのが面倒な場合は、jquery mobileのソースコードの以下の部分をコメントアウトします。

//set page title
document.title = pageTitle;

処理わずかでも向上させたい方はpageTitleに新しいタイトルを取得する部分もコメントしておくとよいかもしれません。

ネストリストビュー

1.4からネストされたリストビューが使えなくなったようなのですが、プラグインがありました。

jquery-mobile-nestedlists

ネストされたリストを表示した時にカスタマイズが必要な場合は始めから作ったほうが早そうと思いましたらすでにやってらっしゃる方がいらっしゃいました。

jQuery Mobile の階層化リストビューが非推奨！？そんなときは

取り急ぎメモ書きまで