模板下載 »

此教程功能簡介：

1、jqm ajax跳轉專案適用

2、清晰的檔案結構

3、封裝常用的方法

4、實現Footer頁面共用

5、解壓稍作修改即可用

注意:

一、相關檔案說明

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方法中，有興趣的朋友可以去研究一下。 

原始碼下載：