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: './'                        //见下文"路由" };  

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>  

5.2默认动作

前面的data-useDefaultCallBack配置项已经提到了，浏览器接到响应后ajaxForm.js会执行一些默认的动作。

执行的默认动作由服务器返回的json进行定义：

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

注意这里的referer的值为将要显示的页面对应的hash。如果提供的referer以http或https开头，则整个控制台都会被刷新

5.3验证

<form>标签中的data-validate用来配置验证函数名，此验证函数在进行ajax提交前会接收到被jQuery封装的form DOM对象(具体可查看"5.1基本用法"中的代码示例)。

自定义函数返回true则正常提交;可以返回字符串来对错误信息进行提示，错误的提示方式已经在框架中进行了封装。