PhoneGap中文网

 找回密码
 立即注册

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

2013-8-2 19:04| 发布者: admin| 查看: 6766| 评论: 0

摘要: 很多懂程序的朋友都知道,动态语言中可以头部底部分离,如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();
});

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


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



源码下载:


jqmTpt.zip




头晕

难过

扯淡

不解

搞笑
5

支持

超赞

欠扁

刚表态过的朋友 (5 人)

最新评论

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2022-8-15 21:11 , Processed in 0.118625 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部