BG-UI,一個能夠快速上手的後臺UI框架

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: './',                       //見下文"路由"
    navJSON: '../server/nav.json'        //導航菜單的json數據，具體格式能夠查看nav.json文件
};

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"
    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'都會調用。

• 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則正常提交；能夠返回字符串來對錯誤信息進行提示，錯誤的提示方式已經在框架中進行了封裝。

6.License

Under MIT License. Copyright by 李昱(liyu365)