BG-UI:一个后台UI框架

开发 架构
此项目为后台UI框架,并根据url中的hash提供简单的路由功能,页面的数据渲染依然交给服务器端。UI基于BootStrap3。兼容移动端。兼容IE8+及其它主流浏览器。

 BG-UI,一个可以快速上手的后台UI框架

1.简述

 

此项目为后台UI框架,并根据url中的hash提供简单的路由功能,页面的数据渲染依然交给服务器端。

UI基于BootStrap3。兼容移动端。兼容IE8+及其它主流浏览器。

github地址

演示地址

2.目录结构

  1. public 
  2.   ┗css 
  3.     ┠vendor      //存放第三方css文件 
  4.     ┗basic.css   //基础css 
  5.   ┗images 
  6.   ┗js 
  7.     ┠vendor      //存放第三方js文件 
  8.     ┠ajaxForm.js //所有ajax提交都由ajaxForm.js进行包装(非第三方插件,为作者编写) 
  9.     ┗basic.js    //基础js 
  10. tpl 
  11.   ┠...           //存放演示页面,目录结构随意 
  12.   ┠... 
  13.   ┗index.html    //主页面 
  14. server            //存放测试用服务器脚本 
  15. index.html        //入口(登录页面)  

3.配置

在主页面加载basic.js文件之前定义:

  1. window.common_conf = { 
  2.     defaultHash: 'page/desktop.html',    //hash的缺省值 
  3.     baseURL: './'                        //见下文"路由" 
  4. };  

4.路由

实现方式:监听hashChange事件,利用"common_conf.baseURL" + "当前页面的hash"形成请求地址,并用ajax请求服务器来获取需要显示的html。

5.表单的提交、验证、回调

5.1基本用法

只要页面中的<form>标签中包含class为.J_ajaxSubmitBtn的元素,则此表单均受ajaxForm.js(非第三方插件,为作者编写)控制。

当.J_ajaxSubmitBtn元素被点击后,ajaxForm.js会自动收集<form>标签上的属性值,并形成一次ajax提交,例如:

  1. <form 
  2.     method="get" 
  3.     action="../server/ajaxReturn.json" 
  4.     data-validate="validate1" 
  5.     data-callBack="callback1" 
  6.     data-useDefaultCallBack="on" 
  7.     enterSend="on" 
  8.     data-sendingText="提交中" 
  9.     > 
  10.     <input type="text" placeholder="新闻标题" name="title"
  11.     <button type="button" class="btn btn-primary J_ajaxSubmitBtn">查询</button> 
  12. </form> 
  13.  
  14. <script> 
  15.     function validate1($from) { 
  16.         var title = $from.find('input[name="title"]'); 
  17.         if ($.trim(title.val()) == '') { 
  18.             return '新闻标题不能为空'
  19.         } 
  20.  
  21.         return true
  22.     } 
  23.     function callback1(returnData, $from) { 
  24.         console.log($from); 
  25.     } 
  26. </script>  
  • method:提交方式(必须设置)
  • action:提交地址(必须设置)
  • data-validate:提交之前的验证函数名
  • data-callBack:服务器响应后的自定义回调函数名
  • data-useDefaultCallBack:服务器响应后是否执行框架的默认动作。只要值不为'off'都会调用。
  • enterSend:是否支持回车提交。"on"为启用,其他都为不启用
  • data-sendingText:提交过程中.J_ajaxSubmitBtn的提示文字

5.2默认动作

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

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

  1.   "referer"""
  2.   "refresh"true
  3.   "state""success"
  4.   "message""提交成功" 
  5.  
  • 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则正常提交;可以返回字符串来对错误信息进行提示,错误的提示方式已经在框架中进行了封装。

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2014-10-14 15:50:19

UIAndroid

2014-10-14 10:01:10

UIAndroid

2020-04-17 10:58:12

UI设计师按钮

2012-05-28 15:31:57

App-UI

2021-08-10 09:31:54

鸿蒙HarmonyOS应用

2021-08-09 14:32:34

鸿蒙HarmonyOS应用

2020-11-13 18:59:51

UIAndroidJetBrains

2014-07-17 15:38:43

UI设计师移动端

2022-04-18 10:47:55

UI框架鸿蒙操作系统

2011-06-21 13:31:13

JavaScript

2022-06-09 10:27:40

前端框架开源

2010-09-14 09:38:48

AndroidUI

2017-09-15 15:13:33

效果设备UI

2022-02-10 10:48:23

JavaScriptVue.js数据

2012-12-25 14:10:22

AndroidUIzinc30

2009-04-21 08:46:02

GoogleAndroid移动OS

2012-06-14 17:06:38

JavaScript

2011-05-28 14:25:57

设计技巧UIAndroid

2019-01-31 11:11:30

前端开发框架

2022-07-27 10:36:13

前端UI框架
点赞
收藏

51CTO技术栈公众号