BG-UI,一个可以快速上手的后台UI框架
清闲居 2019-06-20
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)
