formの時、ajaxでエラーが出るのでなんか・・・
検索すると
mobileinitで

$.extend( $.mobile , {
ajaxFormsEnabled :false
});

$.mobile.ajaxFormsEnabled=false;

これしかない！
ってなっちゃうのですが、これがdoesn’t work for me な感じで。
単純に

<form ajax-data=”false” method=”POST” … >

だけで良いと言う結果。
まぁドキュメントが追いつかないのは良くあることなので仕方ないのですが。
検索しても色々なバージョンのドキュメントが散らばっているのもなかなか手強いところです。

簡単なデータ保存にhtml5のlocalstorageを利用します。
http://docs.phonegap.com/en/1.4.1/phonegap_storage_storage.md.html

window.localStorage.setItem(”key”, “value”);
var keyname = window.localStorage.key(i);
// keyname is now equal to “key”
var value = window.localStorage.getItem(”key”);
// value is now equal to [...]

http://jquerymobile.com/test/docs/pages/phonegap.html
Android enforces a timeout when loading URLs in a webview which may be too short for your needs. You can change this timeout by editing a Java class generated by the Eclipse plugin for Android:
super.setIntegerProperty(”loadUrlTimeoutValue”, 60000);
ということで

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
[...]

listviewの場合は、使い回しても

$(’#list_result’).listview(’refresh’);

で ui を反映できるが
pageやdivなど指定しても出来ない。以前は？ .page() や.trigger(’create’)が使えたよう？ですが今は使えません。
なので、ui 関連classを入れてしまいます。

$(’#mybutton_area’).html(’<a class=”ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c” href=”‘+urldayo+’” ><span class=”ui-btn-inner ui-btn-corner-all ui-corner-top ui-corner-bottom”>ボタンだよ</span></a>’);

ページオブジェクトを完全に削除したりしている方もいるようなので、全体を変える場合はそれでも良いのかもしれません。
局所的な変更は、これで良いようです。

・ページキャッシュが利用されるとき？ ui class が反映されなかった。
一度目は大丈夫だけど、戻る→進むで表示するとclassが反映されない。
生成したDOMに、jquerymobileが ui-クラスをつけてくれるタイミングがわからない。
http://jquerymobile.com/demos/1.0.1/docs/lists/docs-lists.html

Updating lists
If you add items to a listview, you’ll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example:
$(’#mylist’).listview(’refresh’);

これでいけるみたいだけど、listview()がありませんといわれる。
changepageしたあとに
$(’ul#list-result’).listview(’refresh’);
で大丈夫でした。タイミングが難しいですね。
.page() functionを呼ぶ方法もありそうです。

こんな感じです。
スマートフォンやタブレットでこちらのサイト→ http://aucru.com
をご確認ください。
http://jquerymobile.com/
iOS Android Windows Phone BlackBerryに対応したサイトが簡単に作成できます。
これからいろいろなサイトに利用していきたいと思います。

androidで見てみるとページ遷移がパタパタして意味ないなと思ったので、
transitaions : none
page transitions
http://code.jquery.com/mobile/latest/demos/docs/pages/page-transitions.html
globalconfig
http://code.jquery.com/mobile/latest/demos/docs/api/globalconfig.html

$(document).bind(”mobileinit”, function(){
$.mobile.foo = bar;
});

<script src=”jquery.js”></script>
<script src=”custom-scripting.js”></script>
<script src=”jquery-mobile.js”></script>

自分のサイトでは、あまり変わらなかったのですが、どちらにしても綺麗に見えないので、noneにしておきます。
ページデータが多すぎるのかな？スクロールが多過ぎるとか。

同じ問題でreadyを使っているものが多かったのですが、
http://jquerymobile.com/test/docs/api/events.html

Important: Use pageInit(), not $(document).ready()

ということでこう書きました。

$( ‘#page_main’ ).live( ‘pageinit’,function(event){
$(’#search_form’).unbind(’submit’).bind(’submit’, function(){search();});
});

#page_mainは、data-role=pageのIDです。
submitをunbindしていますが、追加だけで良い場合は、要りません。
ここでsearch()を読んでいるのですが、ここでbindした場合、 search()関数内の$(”#input_id”).val(); は有効になります。
他でsearch();を読んでもval()で取得することは出来ませんでした。
http://jquerymobile.com
のサンプルを見ているとhtml5の勉強にもなって面白いですね。
=== ajaxで取得するとid指定した物が2つになる・・・同じelementが増えていく？ ===
ajaxでの遷移を停止する。
* formタグに data-ajax=”false”
* aタグに rel=”externals”
* jquery と jquerymobileの間に設定コードを書く。
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<script type=”text/javascript”>
$(document).live(”mobileinit”, function() {
$.mobile.ajaxEnabled = false;
$.mobile.ajaxLinksEnabled = false;
$.mobile.ajaxFormsEnabled = false;
});
</script>
<script src=”http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js”></script>
* changepageのときのajaxをやめたい・・・
と思ったのですが。
そうじゃなくて、pageのidをちゃんと管理しないといけないみたいですね。
修正が必要です。