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

最新推荐文章于 2023-08-20 13:55:07 发布

AsTryE

最新推荐文章于 2023-08-20 13:55:07 发布

阅读量2.8k

点赞数

文章标签： Jquery Mobile 目录结构 footer分离

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

摘要: 很多懂程序的朋友都知道，动态语言中可以头部底部分离，如php .net 很容易实现底部分离，Jquery Mobile 如何实现页面头部底部分离实现共用头部底部文件，下面带大家一起看看Jquery Mobile中为什么要头部底部分离：一 ...

很多懂程序的朋友都知道，动态语言中可以头部底部分离，如php .net 很容易实现底部分离，Jquery Mobile 如何实现页面头部底部分离实现共用头部底部文件，下面带大家一起看看

Jquery Mobile中为什么要头部底部分离：

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

1.Jquery Mobile 中的目录结构搭建

模板下载 »

此教程功能简介：

1、jqm ajax跳转项目适用

2、清晰的文件结构

3、封装常用的方法

4、实现Footer页面共用

5、解压稍作修改即可用

注意:

需要放入服务器环境运行，或者用火狐浏览器也可以实现效果，由于footer的载入是ajax实现，所以本地浏览存在跨域问题，不能正常访问。

一、相关文件说明

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();
});