海南苯概企业管理有限公司

此項(xiàng)目為后臺(tái)UI框架，并根據(jù)url中的hash提供簡(jiǎn)單的路由功能，頁面的數(shù)據(jù)渲染依然交給服務(wù)器端。UI基于BootStrap3。兼容移動(dòng)端。兼容IE8+及其它主流瀏覽器。

演示地址：https://liyu365.github.io/BG-UI/

項(xiàng)目地址：https://github.com/liyu365/BG-UI

2.目錄結(jié)構(gòu)

public
  ┗css
    ┠vendor      //存放第三方css文件
    ┗basic.css   //基礎(chǔ)css
  ┗images
  ┗js
    ┠vendor      //存放第三方j(luò)s文件
    ┠ajaxForm.js //所有ajax提交都由ajaxForm.js進(jìn)行包裝（非第三方插件，為作者編寫）
    ┗basic.js    //基礎(chǔ)js
tpl
  ┠...           //存放演示頁面，目錄結(jié)構(gòu)隨意
  ┠...
  ┗index.html    //主頁面
server            //存放測(cè)試用服務(wù)器腳本
index.html        //入口（登錄頁面）

3.配置

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

window.common_conf = {
    defaultHash: 'page/desktop.html',    //hash的缺省值
    baseURL: './',                       //見下文"路由"
    navJSON: '../server/nav.json'        //導(dǎo)航菜單的json數(shù)據(jù)，具體格式可以查看nav.json文件
};

4.路由

實(shí)現(xiàn)方式：監(jiān)聽hashChange事件，利用"common_conf.baseURL" + "當(dāng)前頁面的hash"形成請(qǐng)求地址，并用ajax請(qǐng)求服務(wù)器來獲取需要顯示的html。

5.表單的提交、驗(yàn)證、回調(diào)

5.1基本用法

只要頁面中的<form>標(biāo)簽中包含class為.J_ajaxSubmitBtn的元素，則此表單均受ajaxForm.js（非第三方插件，為作者編寫）控制。 當(dāng).J_ajaxSubmitBtn元素被點(diǎn)擊后，ajaxForm.js會(huì)自動(dòng)收集<form>標(biāo)簽上的屬性值，并形成一次ajax提交，例如：

<form
    method="get"
    action="../server/ajaxReturn.json"
    data-validate="validate1"
    data-callBack="callback1"
    data-useDefaultCallBack="on"
    data-sendingText="提交中"
    >
    <input type="text" placeholder="新聞標(biāo)題" 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 '新聞標(biāo)題不能為空';
        }

        return true;
    }
    function callback1(returnData, $from) {
        console.log($from);
    }
</script>

• method：提交方式(必須設(shè)置)
• action：提交地址(必須設(shè)置)
• data-validate：提交之前的驗(yàn)證函數(shù)名
• data-callBack：服務(wù)器響應(yīng)后的自定義回調(diào)函數(shù)名
• data-useDefaultCallBack：服務(wù)器響應(yīng)后是否執(zhí)行框架的默認(rèn)動(dòng)作。只要值不為'off'都會(huì)調(diào)用。
• data-sendingText：提交過程中.J_ajaxSubmitBtn的提示文字

5.2默認(rèn)動(dòng)作

前面的data-useDefaultCallBack配置項(xiàng)已經(jīng)提到了，瀏覽器接到響應(yīng)后ajaxForm.js會(huì)執(zhí)行一些默認(rèn)的動(dòng)作。 執(zhí)行的默認(rèn)動(dòng)作由服務(wù)器返回的json進(jìn)行定義：

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

• referer：刷新的目標(biāo)地址，留空則表示刷新當(dāng)前頁
• refresh：true|false是否刷新
• state：提交是否成功，只有當(dāng)值為"success"時(shí)才視為成功（才會(huì)判斷是否執(zhí)行刷新操作）
• message：提示信息，state不為"success"時(shí)會(huì)進(jìn)行提示

注意這里的referer的值為將要顯示的頁面對(duì)應(yīng)的hash。如果提供的referer以http或https開頭，則整個(gè)控制臺(tái)都會(huì)被刷新

5.3驗(yàn)證

<form>標(biāo)簽中的data-validate用來配置驗(yàn)證函數(shù)名，此驗(yàn)證函數(shù)在進(jìn)行ajax提交前會(huì)接收到被jQuery封裝的form DOM對(duì)象（具體可查看"5.1基本用法"中的代碼示例）。 自定義函數(shù)返回true則正常提交；可以返回字符串來對(duì)錯(cuò)誤信息進(jìn)行提示，錯(cuò)誤的提示方式已經(jīng)在框架中進(jìn)行了封裝。