建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
BG-UI：一個后臺UI框架
BG-UI,一個可以快速上手的后臺UI框架
1.簡述
此項目為后臺UI框架，并根據(jù)url中的hash提供簡單的路由功能，頁面的數(shù)據(jù)渲染依然交給服務(wù)器端。
UI基于BootStrap3。兼容移動端。兼容IE8+及其它主流瀏覽器。
github地址
演示地址
2.目錄結(jié)構(gòu)
- public
- ┗css
- ┠vendor //存放第三方css文件
- ┗basic.css //基礎(chǔ)css
- ┗images
- ┗js
- ┠vendor //存放第三方j(luò)s文件
- ┠ajaxForm.js //所有ajax提交都由ajaxForm.js進行包裝（非第三方插件，為作者編寫）
- ┗basic.js //基礎(chǔ)js
- tpl
- ┠... //存放演示頁面，目錄結(jié)構(gòu)隨意
- ┠...
- ┗index.html //主頁面
- server //存放測試用服務(wù)器腳本
- index.html //入口（登錄頁面）
3.配置
在主頁面加載basic.js文件之前定義：
- window.common_conf = {
- defaultHash: 'page/desktop.html', //hash的缺省值
- baseURL: './' //見下文"路由"
- };
4.路由
實現(xiàn)方式：監(jiān)聽hashChange事件，利用"common_conf.baseURL" + "當前頁面的hash"形成請求地址，并用ajax請求服務(wù)器來獲取需要顯示的html。
5.表單的提交、驗證、回調(diào)
5.1基本用法
只要頁面中的
- method：提交方式(必須設(shè)置)
- action：提交地址(必須設(shè)置)
- data-validate：提交之前的驗證函數(shù)名
- data-callBack：服務(wù)器響應(yīng)后的自定義回調(diào)函數(shù)名
- data-useDefaultCallBack：服務(wù)器響應(yīng)后是否執(zhí)行框架的默認動作。只要值不為'off'都會調(diào)用。
- enterSend：是否支持回車提交。"on"為啟用，其他都為不啟用
- data-sendingText：提交過程中.J_ajaxSubmitBtn的提示文字
5.2默認動作
前面的data-useDefaultCallBack配置項已經(jīng)提到了，瀏覽器接到響應(yīng)后ajaxForm.js會執(zhí)行一些默認的動作。
執(zhí)行的默認動作由服務(wù)器返回的json進行定義：
- {
- "referer": "",
- "refresh": true,
- "state": "success",
- "message": "提交成功"
- }
- referer：刷新的目標地址，留空則表示刷新當前頁
- refresh：true|false是否刷新
- state：提交是否成功，只有當值為"success"時才視為成功(才會判斷是否執(zhí)行刷新操作)
- message：提示信息，state不為"success"時會進行提示
注意這里的referer的值為將要顯示的頁面對應(yīng)的hash。如果提供的referer以http或https開頭，則整個控制臺都會被刷新
5.3驗證
