精品国语人妻色乱码二区,免费乱理伦片在线观看2018,日韩精品视频在线播放,高潮无码又爽又刺激视频在线

<source id="8jepl"><menu id="8jepl"></menu></source>
    <source id="8jepl"><menu id="8jepl"></menu></source>
    <rp id="8jepl"><mark id="8jepl"><label id="8jepl"></label></mark></rp>
          <source id="8jepl"><menu id="8jepl"><label id="8jepl"></label></menu></source>
          <source id="8jepl"></source>
              <source id="8jepl"></source>
                <video id="8jepl"><menu id="8jepl"></menu></video>
                0712-2888027 189-8648-0214
                微信公眾號

                孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

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

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

                時間:2017-04-17來源:風(fēng)信官網(wǎng) 點擊: 1758次
                此項目為后臺UI框架,并根據(jù)url中的hash提供簡單的路由功能,頁面的數(shù)據(jù)渲染依然交給服務(wù)器端。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.目錄結(jié)構(gòu)

                public
                  ┗css
                    ┠vendor      //存放第三方css文件
                    ┗basic.css   //基礎(chǔ)css
                  ┗images
                  ┗js
                    ┠vendor      //存放第三方j(luò)s文件
                    ┠ajaxForm.js //所有ajax提交都由ajaxForm.js進(jìn)行包裝(非第三方插件,為作者編寫)
                    ┗basic.js    //基礎(chǔ)js
                tpl
                  ┠...           //存放演示頁面,目錄結(jié)構(gòu)隨意
                  ┠...
                  ┗index.html    //主頁面
                server            //存放測試用服務(wù)器腳本
                index.html        //入口(登錄頁面)
                

                3.配置

                在主頁面加載basic.js文件之前定義:

                window.common_conf = {
                    defaultHash: 'page/desktop.html',    //hash的缺省值
                    baseURL: './',                       //見下文"路由"
                    navJSON: '../server/nav.json'        //導(dǎo)航菜單的json數(shù)據(jù),具體格式可以查看nav.json文件
                };
                

                4.路由

                實現(xiàn)方式:監(jiān)聽hashChange事件,利用"common_conf.baseURL" + "當(dāng)前頁面的hash"形成請求地址,并用ajax請求服務(wù)器來獲取需要顯示的html。

                5.表單的提交、驗證、回調(diào)

                5.1基本用法

                只要頁面中的<form>標(biāo)簽中包含class為.J_ajaxSubmitBtn的元素,則此表單均受ajaxForm.js(非第三方插件,為作者編寫)控制。 當(dāng).J_ajaxSubmitBtn元素被點擊后,ajaxForm.js會自動收集<form>標(biāo)簽上的屬性值,并形成一次ajax提交,例如:

                <form
                    method="get"
                    action="../server/ajaxReturn.json"
                    data-validate="validate1"
                    data-callBack="callback1"
                    data-useDefaultCallBack="on"
                    data-sendingText="提交中"
                    >
                    <input type="text" placeholder="新聞標(biāo)題" 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 '新聞標(biāo)題不能為空';
                        }
                
                        return true;
                    }
                    function callback1(returnData, $from) {
                        console.log($from);
                    }
                </script>
                
                • method:提交方式(必須設(shè)置)
                • action:提交地址(必須設(shè)置)
                • data-validate:提交之前的驗證函數(shù)名
                • data-callBack:服務(wù)器響應(yīng)后的自定義回調(diào)函數(shù)名
                • data-useDefaultCallBack:服務(wù)器響應(yīng)后是否執(zhí)行框架的默認(rèn)動作。只要值不為'off'都會調(diào)用。
                • data-sendingText:提交過程中.J_ajaxSubmitBtn的提示文字

                5.2默認(rèn)動作

                前面的data-useDefaultCallBack配置項已經(jīng)提到了,瀏覽器接到響應(yīng)后ajaxForm.js會執(zhí)行一些默認(rèn)的動作。 執(zhí)行的默認(rèn)動作由服務(wù)器返回的json進(jìn)行定義:

                {
                  "referer": "",
                  "refresh": true,
                  "state": "success",
                  "message": "提交成功"
                }
                
                • referer:刷新的目標(biāo)地址,留空則表示刷新當(dāng)前頁
                • refreshtrue|false是否刷新
                • state:提交是否成功,只有當(dāng)值為"success"時才視為成功(才會判斷是否執(zhí)行刷新操作)
                • message:提示信息,state不為"success"時會進(jìn)行提示

                注意這里的referer的值為將要顯示的頁面對應(yīng)的hash。如果提供的referer以http或https開頭,則整個控制臺都會被刷新

                5.3驗證

                <form>標(biāo)簽中的data-validate用來配置驗證函數(shù)名,此驗證函數(shù)在進(jìn)行ajax提交前會接收到被jQuery封裝的form DOM對象(具體可查看"5.1基本用法"中的代碼示例)。 自定義函數(shù)返回true則正常提交;可以返回字符串來對錯誤信息進(jìn)行提示,錯誤的提示方式已經(jīng)在框架中進(jìn)行了封裝。

                欄目列表
                推薦內(nèi)容
                熱點內(nèi)容
                展開