当前访客身份:游客 [ 登录  | 注册加入尚学堂]
直播

我来了!

拥有积分:4024
尚学堂雄起!!威武。。。

博客分类

笔记中心

课题中心

提问中心

答题中心

解答题中心

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

我来了! 发表于 2年前 (2014-09-24 12:01:31)  |  评论(1)  |  阅读次数(1963)| 0 人收藏此文章,   我要收藏   
很多懂程序的朋友都知道,动态语言中可以头部底部分离,如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

附件下载:

分享到:0
关注微信,跟着我们扩展技术视野。每天推送IT新技术文章,每周聚焦一门新技术。微信二维码如下:
微信公众账号:尚学堂(微信号:bjsxt-java)
声明:博客文章版权属于原创作者,受法律保护。如果侵犯了您的权利,请联系管理员,我们将及时删除!
(邮箱:webmaster#sxt.cn(#换为@))
北京总部地址:北京市海淀区西三旗桥东建材城西路85号神州科技园B座三层尚学堂 咨询电话:400-009-1906 010-56233821
Copyright 2007-2015 北京尚学堂科技有限公司 京ICP备13018289号-1 京公网安备11010802015183