<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                博主的職位是java后臺開發的,但是由于在公司也要負責一些前端頁面的開發,所以也有接觸到一些前端的框架。 由于博主才工作不到一年,積累經驗并不是很多,因此,本文只介紹三個框架:BUI、Swiper和Bootstrap。另外,這些框架絕不是一篇博客就可以講述清楚的,因此本主要以介紹為主,不過對于每個框架都會配有一個實例講解,因此還是值得一讀的。 ### 一、BUI框架 **1.1、BUI介紹** BUI 是基于 jQuery 兼容 Kissy 的 Web UI 類庫。專注于解決后臺系統的框架方案。 BUI是十分適合作為后臺管理系統的前端框架,因為: (1)后臺管理系統數據以表格形式呈現,然后就是增刪查改等操作,分頁等功能,使用起來十分便利。 (2)BUI還提供了數據統計顯示的各種圖片,什么折線圖、區域圖、柱狀圖、餅圖等等。 (3)BUI還提供了各種按鈕、面包屑,工具欄等等各種前端樣式。 總之,一般后臺管理系統的功能的樣式也實現,BUI基本能夠滿足。其功能點這里無法一一詳細介紹。猿友們可以參考其API:[http://120.26.80.109/docs/api/index.html](http://120.26.80.109/docs/api/index.html),當然對于入門猿友,個人還是十分建議你先閱讀一個實例網站:[http://www.builive.com/](http://www.builive.com/),里面有許多BUI相關實例,如果實例解決不了你的問題再去詳細研究其API。 **1.2、獲取BUI** 如何獲取到最新版的BUI?BUI在github有個開源項目,地址為:[https://github.com/dxq613/bui](https://github.com/dxq613/bui),猿友們可直接下載其對應工程,然后里面有個build目錄,里面是已經打包好的css和js文件,我們只需要用到里面的文件就好了。 **1.3、BUI實例** 我只需要引入下面這五個文件: ~~~ <link href="css/dpl-min.css" rel="stylesheet"> <link href="css/bui-min.css" rel="stylesheet"> <script src="js/jquery-1.8.1.min.js"></script> <script src="js/bui-min.js"></script> <script src="js/layout-min.js"></script> ~~~ 除了jquery是我自己在其他地方下載的,其他的都是來自build目錄。 **下面是一個表格實例效果展示:** ![](https://box.kancloud.cn/2016-03-15_56e77db515259.jpg) **本工程源碼下載(解壓瀏覽器打開即可)** [http://download.csdn.net/detail/u013142781/9419002](http://download.csdn.net/detail/u013142781/9419002) 其他更多功能就待猿友研究使用啦 ### 二、Swiper框架 **2.1、Swiper框架介紹** Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端。? Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。? Swiper開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選擇! 簡單來說,Swiper就是實現了一個滑動切換圖片或面板的效果。顯然是針對移動端的。 一些新聞圖片排本等等是十分適用的,另外在其基礎上,博主還封裝成如下效果哦: ![](https://box.kancloud.cn/2016-03-15_56e77db574794.jpg) 上圖就是博主在Swiper基礎上做成的省市區三聯動效果,因此Swiper對于移動端的滑動場景還是十分有用的。 關于Swiper猿友們可以直接查看其官網:[http://www.swiper.com.cn/](http://www.swiper.com.cn/),官網配有詳細介紹和使用API以及Swiper的下載。 **2.2、Swiper實例** 下面是博主的一個實例,在官網即可下載Swiper插件,實例只需要導入如下兩個文件: ~~~ <link rel="stylesheet" href="css/swiper.min.css"> <script src="js/swiper.min.js"></script> ~~~ 實例效果: ![](https://box.kancloud.cn/2016-03-15_56e77db5a0e54.jpg) 本工程源碼下載(解壓瀏覽器打開即可): [http://download.csdn.net/detail/u013142781/9419005](http://download.csdn.net/detail/u013142781/9419005) 上面的實例過于簡單了一些,其實猿友們可以對Swiper封裝一下,如下效果是博主封裝的一聯動、二聯動、三聯動選擇:、 ![](https://box.kancloud.cn/2016-03-15_56e77db5dad34.jpg)? ![](https://box.kancloud.cn/2016-03-15_56e77db5ef2e7.jpg)? ![](https://box.kancloud.cn/2016-03-15_56e77db61054c.jpg) 由于這是工作上分裝的代碼,不方便提供源碼,請諒解。這里只是提醒各位猿友可在其基礎上分裝出適合自己場景的代碼。 ### 三、Bootstrap框架 **3.1、Bootstrap框架介紹** 可能很多猿友們已經對Bootstrap框架有了一定的了解。 Bootstrap,來自 Twitter,是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。 Bootstrap中包含了豐富的Web組件,根據這些組件,可以快速的搭建一個漂亮、功能完備的網站。其中包括以下組件:下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、路徑導航、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等 另外,通過Less可以對Bootstrap中所有的CSS變量進行修改,并依據自己的需求裁剪代碼。 **另外一個重點是,Bootstrap是自適應的,可以支持PC和移動端頁面,自動調整其樣式寬度高度,做PC端和移動端的網頁都可以使用它。當然,完全做到自適應是不可能的,但是Bootstrap基本適用大部分場景了。** 其官網鏈接:[http://www.bootcss.com/](http://www.bootcss.com/),另外,博主推薦另外一個網站配有其詳細實例:[http://www.runoob.com/bootstrap/bootstrap-intro.html](http://www.runoob.com/bootstrap/bootstrap-intro.html),當然對于入門,這兩者都是十分不錯的選擇。 獲取Bootstrap,可到其官網如下鏈接:[http://v3.bootcss.com/getting-started/#download](http://v3.bootcss.com/getting-started/#download),我們不采用定制版,因此下載這個就好了: ![](https://box.kancloud.cn/2016-03-15_56e77db630d40.jpg) **3.2、Bootstrap實例** 上面我們獲取到Bootstrap的一些css、js和一些字體文件之后,我們還需要去下載jquery,因為Bootstrap是依賴jquery的,這里博主下載的是jquery-1.9.1.min.js,因為我下載的Bootstrap必須要jquery-1.9.1以上版本。 實例只需要導入如下幾個文件: ~~~ <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- 可選的Bootstrap主題文件(一般不用引入) --> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="js/jquery-1.9.1.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="js/bootstrap.min.js"></script> ~~~ 實例效果展示: ![](https://box.kancloud.cn/2016-03-15_56e77db647021.jpg) 上圖只是一個簡單的表單例子,但是Bootstrap是很好看的,這里由于博主時間有限,因此例子比較粗糙,主要以介紹Bootstrap為主。 本工程源碼下載(解壓瀏覽器打開即可): [http://download.csdn.net/detail/u013142781/9419007](http://download.csdn.net/detail/u013142781/9419007) ### 四、通過請求json文件獲取省市區聯動下拉小例子 **4.1、將省市區的數據放到json文件里面,address.json:** ![](https://box.kancloud.cn/2016-03-15_56e77db6583e9.jpg) **4.2、前端通過如下jquery代碼獲取數據:** ~~~ var ADDRESS_DATA_SOURCE = []; function initAddressDataSource(){ $.ajax({ type: 'GET', url: 'json/address.json', async: false, dataType: 'json', success: function(data) { ADDRESS_DATA_SOURCE = data; }, error: function(err) { // 備用方案 alert('獲取省市區數據失敗,使用網絡備用方案...'); } }); } ~~~ **4.3、實例演示** ![](https://box.kancloud.cn/2016-03-15_56e77db68390e.jpg) **4.4、實例源碼下載:** [http://download.csdn.net/detail/u013142781/9420276](http://download.csdn.net/detail/u013142781/9420276) **4.5、chrome跨域訪問問題解決** chrome通過$.ajax請求本地的json文件數據,會出現如下錯誤:XMLHttpRequest cannot load: ![](https://box.kancloud.cn/2016-03-15_56e77db6b5a65.jpg) 上圖錯誤是因為跨域請求資源導致的,由于瀏覽器同源策略,凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不同即為跨域。具體可以查看下表: ![](https://box.kancloud.cn/2016-03-15_56e77db6c618c.jpg) 而我們這里并不是http請求,因此也同樣會出現這個問題。 解決方式是給chrome快捷方式添加啟動參數: ~~~ --allow-file-access-from-files ~~~ 注意一定是給快捷方式添加啟動參數: ![](https://box.kancloud.cn/2016-03-15_56e77db6d8190.jpg) 添加方式: 選中快捷方式圖標,右鍵–>屬性–>快捷方式–>目標(T)的值最后面添加上述參數: ![](https://box.kancloud.cn/2016-03-15_56e77db6e6271.jpg) 注意“- -”前是有個空格的,添加完成之后,重新利用快捷方式打開chrome,然后訪問jsontext.html發現OK了!
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看