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消失问题。