Jquery Mobile 页面头部底部分离实现共用头部底部文件

模板下载 »

此教程功能简介：

1、jqm ajax跳转项目适用

2、清晰的文件结构

3、封装常用的方法

4、实现Footer页面共用

5、解压稍作修改即可用

一、相关文件说明

1、init.js

文件所在目录：jqmTpt\js\config\init.js

文件描述：存放jqm初始化相关参数，例如:

//初始化配置
$(document).bind("mobileinit", function(){
	$.mobile.loadingMessage = '努力加载中...';
    $.mobile.buttonMarkup.hoverDelay = "false";//按钮延迟效果取消
});

2、global.js

文件所在目录：jqmTpt\js\global\global.js

文件描述：存放全局的方法以及配置，包括：

• 全局配置
• localStorage缓存
• sessionStorage缓存
• json数据转换
• 页面跳转与返回
• 自定义alert
• loading 加载提示
• 页面刷新
• 加载底部菜单 

3、custom.js

文件所在目录：jqmTpt\js\custom.js

文件描述：存放自定义的js方法。

二、关于footer.html共用的实现

一般footer页面里会存放一些公用的内容，每个页面都写一遍footer的内容会显得太繁琐，也不好维护，所以需要实现footer的共用。

基本原理：通过页面设置data-footer="./global/footer.html"，用ajax去加载footer文件的内容，并动态载入到当前页面。

调用方法：

1、page div设置data-footer="./global/footer.html"属性。

2、调用如下方法：

var $page;
$(document).on("pagecreate", function(e) {
	$page = $(e.target);
	var pageId = $page.attr("id");
	//加载底部菜单
	createFooter($page,pageId);
	pageRefresh();
});

由于custom.js中已经包含此方法，所以只需要把custom.js文件引入就可以了。

实现方法在global.js中的createFooter方法中，有兴趣的朋友可以去研究一下。 

源码下载：

jqmTpt.zip