Jquery mobile 學習筆記

最近學習移動開發，接觸到了phonegap，而後又須要開始學習jquery mobile。掌握二者是開發輕應用的前提

在學習jquery mobile中，遇到了許多問題讓初學者非常頭疼，無心間找到這個博客http://www.wglong.com/main/index，非常受用。

感謝的同時也在本身的博客留點學習心得。

1 頁面閃屏讓體驗很不爽

//解決閃屏問題
$.mobile.transitionFallbacks.slide = "none";

2 有些時候操做很遲緩

//解決按鈕按下/劃過的狀態感受反應有些遲
$.mobile.buttonMarkup.hoverDelay = "false";

3 tab導航轉屏時會遇到閃屏，固定首尾便可解決

實現footer的固定，只須要在footer中添加data-position="fixed" 和 data-id="myfooter"屬性就能夠了，而對於header也就不言而喻了。

data-id這裏有一點須要注意，就是data-id的值須要保持同樣

4 左右滑動效果實現

$("#login").live('pageinit', function() {
	//bind swipe event
	$('#login').bind("swiperight", function() {
		$.mobile.changePage('index.html', {
			transition : "slide",
			reverse : true
		});
	});
	$('#login').bind("swipeleft", function() {
		$.mobile.changePage('register.html', {
			transition : "slide"
		});
	});
});

5 頁面跳轉公用方法

//頁面跳轉返回方法begin---
function goTo(page) {
	showLoading();
	$.mobile.changePage(page, {
		  transition: "slide"
		});
}
function showLoading(){
	$.mobile.loadingMessageTextVisible = true;
	$.mobile.showPageLoadingMsg("a", "加載中..." );
}
function goBack() {
	$.mobile.back();
}
//---end

　調用時按鈕添加 onclick="goTo('login.html')"

6 ajax調用服務器方法

function ajax(action, params, callback) {
	var url = getUcardPath() + "/mobile.do?method=sign&action=" + action
			+ "&callback=" + callback;
	$.ajax({
		type : 'post',
		url : url,
		data : params,
		dataType : "json",
		success : success_callback,
		error : error_callback
	});
}
function success_callback(result) {
	
}
function error_callback() {

}

　方法調用 ajax(action, params, "login_callback");

 7 點擊屏幕，header和footer會略微抖動？

在header和footer中添加以下屬性：

data-tap-toggle="false"

添加這個屬性也能夠解決點擊屏幕header或footer消失問題。