1. <u id="epx8e"></u>
        <u id="epx8e"><sub id="epx8e"></sub></u>

        
        
        <video id="epx8e"><big id="epx8e"></big></video>

        <i id="epx8e"><bdo id="epx8e"><delect id="epx8e"></delect></bdo></i>
        0712-2888027 189-8648-0214
        微信公眾號

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

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

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

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

        欄目列表
        推薦內容
        熱點內容
        展開
        亚洲AV无码乱码国产精品桃色_国产欧美亚洲精品第二区软件_精品亚洲AV无码国产一区在线_老熟妇乱子伦中文观看_日韩 欧美 亚洲 精品 少妇_日本按摩高潮A级中文字幕免费观看