YOD-Yのへたれ開発日誌

jQuery Mobile メモ - リンク集

jQueryMobile, javascript

ちょうど、お手軽にサービスをiPhoneを筆頭としたスマートフォン対応する為になにかないかなと探していたら、ちょうどこのライブラリ「jQuery Mobile」を発見しました。

まだ先月中にα版が公開され始めたばかりで挙動にちょっと不審な点もありますが、今年中にはβを、来年1月には1.0を公開する予定らしいので早々に安定することを期待しています。

まだ実装中なのですが、思いついたところからメモっていきます。

まずは、実装時に常に開いているリンク集(?)です。

といってもほとんど公式サイトです。

http://jquerymobile.com/

まずは公式サイトのトップページ。

http://jquerymobile.com/demos/1.0a2/

公式の「ドキュメントとデモ」、挙動と基本的なコーディングの確認はここでだいたい事足ります。

URLでわかるようにこれはアルファ2版、バージョンアップすると変わるので注意。

https://github.com/jquery/jquery-mobile/

最新版のリポジトリ。

「docs」の中に↑のデモページのソースがあります *1

jQuery Mobileは、原則Ajaxで次のページを読み込んでいる為にブラウザの「ページのソースを表示」ではそのページのソースを確認できないことがあります。

そのときはここで直接ソースを眺めることにしています。

http://forum.jquery.com/jquery-mobile

公式のフォーラム。

わからないことがあれば、ここで検索するとだいたい同じ事で悩んでいる人が見つかります。

まだ利用者が多い訳ではないからか、答えまで見つかるとは限らないのが難点。

jQuery Mobile リファレンス的なもの - へっぽこプログラマーの日記

この中で唯一の公式以外のサイト。

特に触り初めの理解が薄い頃、コーディングの参考にさせてもらっていました。

Permalink | コメント(0) | トラックバック(0) | 05:53

jQuery Mobile メモ - “automatic AJAX page loading”を無効にする

jQueryMobile, javascript

AJAX page loading でアニメーションページ変移されるのは格好良いので是非とも使いたいのですが、なぜだかうまく次のページが表示されないことがあります。

相性が悪いのか、理解が足りないのか、まだ不具合があるのかはよくわかりません。

aタグでの遷移は rel="external" を付加して

<a href="http://sinkan.net/" rel="external" data-role="button">新刊.net</a>

と書けばいいのですが、なぜかフォームだとうまくいきません。*2

後々に付加したタグを解除するのも面倒なので、以下のようにまとめて無効化しました。

<script src="jquery/jquery-1.4.4.min.js"></script>
<!-- jQueryMobile CUSTOM -->
<script type="text/javascript">
$(document).bind("mobileinit", function(){
  $.extend( $.mobile , {
    ajaxLinksEnabled: false,
    ajaxFormsEnabled: false
  });
});
</script>
<script src="jquery/jquery.mobile-1.0a2.min.js"></script>

ajaxLinksEnabled が通常のリンク、ajaxFormsEnabled がフォームでの遷移となります。

ポイントは、jQuery MobileのJavaScriptを読み込む前に書くことです。

他にも初期設定値を変更することができるようです。

詳しくは、以下を参照ください。

Docs and Demos - Working with jQuery Mobile’s Auto-initialization

Permalink | コメント(6) | トラックバック(0) | 06:08