一般 头部和footer页面里会存放一些公用的内容,每个页面都写一遍 头部和footer的内容会显得太繁琐,也不好维护,所以需要实现footer的共用
1.Jquery Mobile 中的目录结构搭建
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文件引入就可以了。