技术控

    今日:123| 主题:49331
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] BG-UI:一个后台UI框架

[复制链接]
木槿落空樱桃忽而 发表于 2016-10-18 13:51:55
73 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
简述

    此项目为UI框架,并根据url中的hash提供简单的路由功能,页面的数据渲染依然交给服务器端。
    UI基于BootStrap3。兼容移动端。兼容IE8+及其它主流浏览器。
          github地址   
          演示地址   
    觉得好请点star哦~
    目录结构

  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        //入口(登录页面)
复制代码
配置

  在主页面加载basic.js文件之前定义:
  1. window.common_conf = {
  2.     defaultHash: 'page/desktop.html',    //hash的缺省值
  3.     baseURL: './'                        //见下文"路由"
  4. };
复制代码
路由

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

  基本用法

    只要页面中的      <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. <script>
  14.     function validate1($from) {
  15.         var title = $from.find('input[name="title"]');
  16.         if ($.trim(title.val()) == '') {
  17.             return '新闻标题不能为空';
  18.         }
  19.         return true;
  20.     }
  21.     function callback1(returnData, $from) {
  22.         console.log($from);
  23.     }
  24. </script>
复制代码

       
  •               method:提交方式(必须设置)      
       
  •               action:提交地址(必须设置)      
       
  •               data-validate:提交之前的验证函数名      
       
  •               data-callBack:服务器响应后的自定义回调函数名      
       
  •               data-useDefaultCallBack:服务器响应后是否执行框架的默认动作。只要值不为'off'都会调用。      
       
  •               enterSend:是否支持回车提交。"on"为启用,其他都为不启用      
       
  •               data-sendingText:提交过程中        .J_ajaxSubmitBtn的提示文字      
      
  默认动作

    前面的      data-useDefaultCallBack配置项已经提到了,服务器接到响应后ajaxForm.js会执行一些默认的动作。   
    执行的默认动作由服务器返回的json进行定义:
   
  1. {
  2.   "referer": "",
  3.   "refresh": true,
  4.   "state": "success",
  5.   "message": "提交成功"
  6. }
复制代码

       
  •               referer:刷新的目标地址,留空则表示刷新当前页      
       
  •               refresh:        true|false是否刷新      
       
  •               state:提交是否成功,只有当值为"success"时才视为成功(才会判断是否执行刷新操作)      
       
  •               message:提示信息,state不为"success"时会进行提示      
      
  验证

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




上一篇:RecyclerView 加载更多与 CoordinatorLayout
下一篇:What is new for Virtual SAN 6.5?
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

刘怡 发表于 2016-10-26 17:24:32
老天,你让夏天和冬天同房了吧?生出这鬼天气!  
回复 支持 反对

使用道具 举报

souzt 发表于 2016-11-5 19:39:07
我就是路过,拿积分走人!!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表