2014年2月18日 星期二

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){
   .....
   });
});

沒有留言:

張貼留言