1. <p id="ijjhg"></p>
      <acronym id="ijjhg"></acronym>

    2. <p id="ijjhg"></p>
      <table id="ijjhg"><ruby id="ijjhg"><mark id="ijjhg"></mark></ruby></table>
      0712-2888027 189-8648-0214
      微信公眾號

      孝感風信網絡科技有限公司微信公眾號

      當前位置:主頁 > 技術支持 > HTML5/CSS3 > BG-UI一個可以快速上手的后臺UI框架

      BG-UI一個可以快速上手的后臺UI框架

      時間:2024-07-09來源:風信官網 點擊: 1630次
      此項目為后臺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則正常提交;可以返回字符串來對錯誤信息進行提示,錯誤的提示方式已經在框架中進行了封裝。

      欄目列表
      推薦內容
      熱點內容
      展開
      中文字幕第二页在线天堂中文_中文字幕制服丝袜在线观看_美女胸禁止18以下看免费国产_中日韩人妻一级毛片