精品人人槡人妻人人槡,无码午夜国产视频,日韩精品无码有码视频,国产成人精品日本亚洲成熟

<var id="lf53i"><track id="lf53i"><ins id="lf53i"></ins></track></var>

  • <rp id="lf53i"></rp>
    <var id="lf53i"><track id="lf53i"><ins id="lf53i"></ins></track></var>

    <video id="lf53i"></video>
    <b id="lf53i"><acronym id="lf53i"></acronym></b>

      1. 0712-2888027 189-8648-0214
        微信公眾號(hào)

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

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

        BG-UI一個(gè)可以快速上手的后臺(tái)UI框架

        時(shí)間:2017-04-17來(lái)源:風(fēng)信官網(wǎng) 點(diǎn)擊: 1758次
        此項(xiàng)目為后臺(tái)UI框架,并根據(jù)url中的hash提供簡(jiǎn)單的路由功能,頁(yè)面的數(shù)據(jù)渲染依然交給服務(wù)器端。UI基于BootStrap3。兼容移動(dòng)端。兼容IE8+及其它主流瀏覽器。

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

        項(xiàng)目地址:https://github.com/liyu365/BG-UI

        BG-UI一個(gè)可以快速上手的后臺(tái)UI框架

        BG-UI一個(gè)可以快速上手的后臺(tái)UI框架

        BG-UI一個(gè)可以快速上手的后臺(tái)UI框架

        BG-UI一個(gè)可以快速上手的后臺(tái)UI框架

        BG-UI一個(gè)可以快速上手的后臺(tái)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)行包裝(非第三方插件,為作者編寫(xiě))
            ┗basic.js    //基礎(chǔ)js
        tpl
          ┠...           //存放演示頁(yè)面,目錄結(jié)構(gòu)隨意
          ┠...
          ┗index.html    //主頁(yè)面
        server            //存放測(cè)試用服務(wù)器腳本
        index.html        //入口(登錄頁(yè)面)
        

        3.配置

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

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

        4.路由

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

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

        5.1基本用法

        只要頁(yè)面中的<form>標(biāo)簽中包含class為.J_ajaxSubmitBtn的元素,則此表單均受ajaxForm.js(非第三方插件,為作者編寫(xiě))控制。 當(dāng).J_ajaxSubmitBtn元素被點(diǎn)擊后,ajaxForm.js會(huì)自動(dòng)收集<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">查詢(xún)</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:提交之前的驗(yàn)證函數(shù)名
        • data-callBack:服務(wù)器響應(yīng)后的自定義回調(diào)函數(shù)名
        • data-useDefaultCallBack:服務(wù)器響應(yīng)后是否執(zhí)行框架的默認(rèn)動(dòng)作。只要值不為'off'都會(huì)調(diào)用。
        • data-sendingText:提交過(guò)程中.J_ajaxSubmitBtn的提示文字

        5.2默認(rèn)動(dòng)作

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

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

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

        5.3驗(yàn)證

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

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