BG-UI,一個可以快速上手的后臺UI框架

1.簡述

此項目為后臺UI框架，并根據url中的hash提供簡單的路由功能，頁面的數據渲染依然交給服務器端。

UI基于BootStrap3。兼容移動端。兼容IE8+及其它主流瀏覽器。

github地址

演示地址

2.目錄結構

public 
  ┗css 
    ┠vendor      //存放第三方css文件 
    ┗basic.css   //基礎css 
  ┗images 
  ┗js 
    ┠vendor      //存放第三方js文件 
    ┠ajaxForm.js //所有ajax提交都由ajaxForm.js進行包裝（非第三方插件，為作者編寫） 
    ┗basic.js    //基礎js 
tpl 
  ┠...           //存放演示頁面，目錄結構隨意 
  ┠... 
  ┗index.html    //主頁面 
server            //存放測試用服務器腳本 
index.html        //入口（登錄頁面）  

3.配置

在主頁面加載basic.js文件之前定義：

window.common_conf = { 
    defaultHash: 'page/desktop.html',    //hash的缺省值 
    baseURL: './'                        //見下文"路由" 
};  

4.路由

實現方式：監聽hashChange事件，利用"common_conf.baseURL" + "當前頁面的hash"形成請求地址，并用ajax請求服務器來獲取需要顯示的html。

5.表單的提交、驗證、回調

5.1基本用法

只要頁面中的<form>標簽中包含class為.J_ajaxSubmitBtn的元素，則此表單均受ajaxForm.js(非第三方插件，為作者編寫)控制。

當.J_ajaxSubmitBtn元素被點擊后，ajaxForm.js會自動收集<form>標簽上的屬性值，并形成一次ajax提交，例如：

<form 
    method="get" 
    action="../server/ajaxReturn.json" 
    data-validate="validate1" 
    data-callBack="callback1" 
    data-useDefaultCallBack="on" 
    enterSend="on" 
    data-sendingText="提交中" 
    > 
    <input type="text" placeholder="新聞標題" name="title"> 
    <button type="button" class="btn btn-primary J_ajaxSubmitBtn">查詢</button> 
</form> 
 
<script> 
    function validate1($from) { 
        var title = $from.find('input[name="title"]'); 
        if ($.trim(title.val()) == '') { 
            return '新聞標題不能為空'; 
        } 
 
        return true; 
    } 
    function callback1(returnData, $from) { 
        console.log($from); 
    } 
</script>  

• method：提交方式(必須設置)
• action：提交地址(必須設置)
• data-validate：提交之前的驗證函數名
• data-callBack：服務器響應后的自定義回調函數名
• data-useDefaultCallBack：服務器響應后是否執行框架的默認動作。只要值不為'off'都會調用。
• enterSend：是否支持回車提交。"on"為啟用，其他都為不啟用
• data-sendingText：提交過程中.J_ajaxSubmitBtn的提示文字

5.2默認動作

前面的data-useDefaultCallBack配置項已經提到了，瀏覽器接到響應后ajaxForm.js會執行一些默認的動作。

執行的默認動作由服務器返回的json進行定義：

{ 
  "referer": "", 
  "refresh": true, 
  "state": "success", 
  "message": "提交成功" 
}  

• referer：刷新的目標地址，留空則表示刷新當前頁
• refresh：true|false是否刷新
• state：提交是否成功，只有當值為"success"時才視為成功(才會判斷是否執行刷新操作)
• message：提示信息，state不為"success"時會進行提示

注意這里的referer的值為將要顯示的頁面對應的hash。如果提供的referer以http或https開頭，則整個控制臺都會被刷新

5.3驗證

<form>標簽中的data-validate用來配置驗證函數名，此驗證函數在進行ajax提交前會接收到被jQuery封裝的form DOM對象(具體可查看"5.1基本用法"中的代碼示例)。

自定義函數返回true則正常提交;可以返回字符串來對錯誤信息進行提示，錯誤的提示方式已經在框架中進行了封裝。