JQuery Mobile 應用篇

適用於JQuery Mobile-1.1.0

checkboxradio(Checkbox)設定
1.選擇input name=n1 值是100,設定為勾選,並刷新
$('input[name="n1"][value="100"]').prop('checked', true);
$('input[name="n1"]').checkboxradio(); //等同刷新-此方法是動態產生元件使用

2.選擇n2設定不啟用(可看到checkbox但無法點選)
$('input[name="n2"]').prop('disabled', true);
$('input[name="n2"]').checkboxradio(); //等同刷新-此方法是動態產生元件使用

3.建立事件
$('input[type="radio"][name="n2"]').bind( "change",function(){....});


selectmenu(Select下拉式選單)設定
1.選擇id=select1的選項值100設定為預設選項
$('#select1 option[value="100"]').prop('selected', true);
$('#select1' ).selectmenu(); //等同刷新-此方法是動態產生元件使用

2.選擇id=select2 設定為不啟用
$('#select2').prop('disabled', true);
$('#select1' ).selectmenu(); //等同刷新-此方法是動態產生元件使用

Button設定
1.按鈕顯示及隱藏
$('#Button1').closest('.ui-btn').show(); //按鈕顯示
$('#Button1').closest('.ui-btn').hide(); //按鈕隱藏

2.設定按鈕顯示文字
$("#Button1").prev('span').find('span.ui-btn-text').text("這是button1");

3.設定按鈕為不啟用(jquery.mobile-1.4.2可用)
$('#Button1').addClass('ui-state-disabled'); //不啟用
$('#Button1').removeClass('ui-state-disabled'); //移除ui-state-disabled 代表啟用

4.按鈕不啟用(jquery.mobile-1.4.4)
$('#Button1').button().button('disable');
P.S 如果是在ajax中執行可以寫成$('#Button1').button('disable');

備註
2015/01/13
1.假如在jquery mobile的pageinit事件中使用到jquery $post時，必須注意如果在javascript中有使用到$.mobile.changePage切換頁面，此時會在跑一次pageinit事件，大置上如下。
$(document).bind('pageinit', function (init_event) {
   //如果使用$.mobile.changePage切換頁面,會在跑一次pageinit
   $.post('a.aspx',{sd: str_comm},function(data, status){
   .....
   });
});

jquery mobile 切換頁面到html檔無法執行javascript

參考1: http://www.jqmobile.org/thread-254-1-1.html
參考2: http://liuwenxin.blog.51cto.com/4436000/1032260

問題：用a標記的href鏈接跳轉到目的頁面時，綁定的$(document).ready()不執行，需要刷新頁面才能執行？
解決：jquery mobile頁面跳轉是ajax跳轉，所以$(document).ready()是不執行的，如果想用a標記跳轉過來執行一些函數的話有兩種方法：
(1).用js的window.location.href=url跳轉，或者在a標記裡寫rel="external"，這樣頁面就脫離了jquery mobile框架，到了一個新的頁面；
(2).給目的頁面的page加一個id，例如：indexPage,給indexPage綁定pageinit事件，$('#indexPage').live('pageinit',function(event){});就可以了，其實jquery mobile頁面的跳轉就是不同page直接的切換

法1: 如果你原本的超連結標籤是寫成<a href="news.htm" >最新消息</a> 當去點選此連結時，切換到news.htm時，它是不會執行javascript的程式碼，必須在標籤上多加上rel="external"寫法如下  <a href="news.htm" rel="external">最新消息</a>