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

2022-11-23 0 20

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

 

本项目是一个后台UI框架,提供了简单的根据url中的hash进行路由的功能,页面的数据渲染还是交给了服务端。 UI 基于 BootStrap3。兼容移动终端。兼容IE8+等主流浏览器

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

项目地址:https://github.com/liyu365/BG-UI

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

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

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

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

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

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:刷新的目标地址,留空则表示刷新当前页
  • refreshtrue|false是否刷新
  • state:提交是否成功,只有当值为”success”时才视为成功(才会判断是否执行刷新操作)
  • message:提示信息,state不为”success”时会进行提示

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

5.3验证

<form>标签中的data-validate用来配置验证函数名,此验证函数在进行ajax提交前会接收到被jQuery封装的form DOM对象(具体可查看”5.1基本用法”中的代码示例)。 自定义函数返回true则正常提交;可以返回字符串来对错误信息进行提示,错误的提示方式已经在框架中进行了封装。

 

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

发表评论
暂无评论