Jquery Mobile 頁面頭部底部分離實現共用頭部底部檔案
阿新 • • 發佈:2019-02-16
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方法中,有興趣的朋友可以去研究一下。
原始碼下載: