<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>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                # weui WeUI是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信 Web 開發量身設計,可以令用戶的使用感知更加統一。包含button、cell、dialog、 progress、 toast、article、icon等各式元素。 嚴格的講它是一個css庫。算一個精簡的庫 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>WeUI</title> <link rel="stylesheet" href="path/to/weui/dist/style/weui.min.css"/> </head> <body> </body> </html> ~~~ 但它的demo里提供了不少好東西 打開weui/examples/index.html就可以演示效果 ![](https://i5ting.github.io/wechat-dev-with-nodejs/weui/weui.gif) * 模板是加載,替換了常規的ajax(頁面少的時候是個好辦法) * 實現了container里的顯示隱藏效果 * pushstate改變url 結構 * container * page1 * page2 看一下代碼結構 ![](https://i5ting.github.io/wechat-dev-with-nodejs/weui/3.png) ### helloworld copy ~~~ <div class="container js_container"> ... </div> ~~~ 預覽一下效果,看到圖片都未展示,于是把example里的images放到public/images下 此時預覽,發現圖片特別大,這肯定是css沒有加載,于是把example.css放到public/demo下 改名為myweui.css 在html里引入即可 ~~~ <link rel="stylesheet" href="./myweui.css" /> ~~~ 此時預覽就可以了。此例用于測試樣式是足夠的,是為helloworld1 可是我如何點擊,進入下一頁呢 ### 多頁操作 把之前例子的 ~~~ <script type="text/html" id="tpl_button"> <div class="page"> <div class="hd"> <h1 class="page_title">Button</h1> </div> <div class="bd spacing"> <a href="javascript:;" class="weui_btn weui_btn_primary">按鈕</a> <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按鈕</a> <a href="javascript:;" class="weui_btn weui_btn_warn">確認</a> <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">確認</a> <a href="javascript:;" class="weui_btn weui_btn_default">按鈕</a> <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按鈕</a> <div class="button_sp_area"> <a href="javascript:;" class="weui_btn weui_btn_plain_default">按鈕</a> <a href="javascript:;" class="weui_btn weui_btn_plain_primary">按鈕</a> <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按鈕</a> <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按鈕</a> </div> </div> </div> </script> ~~~ 放到.container下面,這樣就定義了模板 此時點擊button按鈕是不會有顯示的。 那么我再找找例子里,是不是少什么東西? 把example.js放到public/demo下,改名為myweui.js 引入 ~~~ <script src="./myweui.js"></script> ~~~ 此時刷新就好了。 也就是說所有的東西都在這個js里,我們之前說的pushstate、各種效果等都在這里 看一下按鈕是如何定義和響應的 ~~~ <a class="weui_cell js_cell" href="javascript:;" data-id="button"> <span class="weui_cell_hd"> <img src="/images/icon_nav_button.png" class="icon_nav" alt=""></span> <div class="weui_cell_bd weui_cell_primary"> <p>Button</p> </div> <div class="weui_cell_ft"> </div> </a> ~~~ * class="weui_cell js_cell" * data-id="button" 這樣就行了? 我們看一下myweui.js ~~~ $(function () { ~~~ 這很明顯是zeptojs寫法 ~~~ // page stack var stack = []; var $container = $('.js_container'); $container.on('click', '.js_cell[data-id]', function () { var id = $(this).data('id'); go(id); }); ~~~ 頭幾行,定義了一個stack,我們想一下那個推進來的效果, * 默認顯示,為棧的第一個元素 * 如果push進來就,stack里push一個,設置為當前顯示的 * 如果點擊返回呢,stack里pop出去最后一個,設置上一個為顯示的 * 如果返回了棧頂,點返回就沒效果了 這里的click事件,它的事件是.js_cell[data-id] 也就是class=js_cell,并且有data-id屬性。 對比一下button的按鈕 ~~~ <a class="weui_cell js_cell" href="javascript:;" data-id="button"> ~~~ 如此,大概你就該明白了。 那么事件里面是 ~~~ var id = $(this).data('id'); go(id); ~~~ 就用button這個例子講,這個id應該是data-id="button"里的button,對吧? 然后go就跳轉了,也就是push的效果應該是它弄的 ~~~ function go(id){ var $tpl = $($('#tpl_' + id).html()).addClass('slideIn').addClass(id); $container.append($tpl); stack.push($tpl); // why not use `history.pushState`, https://github.com/weui/weui/issues/26 //history.pushState({id: id}, '', '#' + id); location.hash = '#' + id; $($tpl).on('webkitAnimationEnd', function (){ $(this).removeClass('slideIn'); }).on('animationend', function (){ $(this).removeClass('slideIn'); }); // tooltips if (id == 'cell') { $('.js_tooltips').show(); setTimeout(function (){ $('.js_tooltips').hide(); }, 3000); } } ~~~ 看一下源碼 * $container.append($tpl);是dom元素插入 * stack.push($tpl); 視圖棧壓入最新的 * location.hash = '#' + id;是pushstate更改url地址 * 其他就是動畫或者根據id干點壞事了 稍微注意一下:我們push的頁面從哪里來的? ~~~ var $tpl = $($('#tpl_' + id).html()).addClass('slideIn').addClass(id); $container.append($tpl); ~~~ 我們知道id是data-id="button"里的button,也就是說我們要根據id=“tpl_button”來找模板里的html。 想想我們之前是不是拷貝了一個這樣的模板? ok,只要是class=js_cell,并且有data-id屬性的就會觸發點擊時間,根據tpl_button里的內容顯示(push)。 這是push,那么返回pop呢? ~~~ // location.hash = '#hash1' 和點擊后退都會觸發`hashchange`,這個demo頁面只關心后退 $(window).on('hashchange', function (e) { if (/#.+/gi.test(e.newURL)) { return; } var $top = stack.pop(); if (!$top) { return; } $top.addClass('slideOut').on('animationend', function () { $top.remove(); }).on('webkitAnimationEnd', function () { $top.remove(); }); }); ~~~ location.hash變了 * var $top = stack.pop();很明顯出棧了 * if (!$top) {return;} 是如果棧頂,不做操作 * 然后處理$top,然后出棧的視圖移除掉 最外面的視圖移除了,很明顯就是上一個視圖顯示了。 so,原理就是這么簡單 時間有限,視圖和其他點擊事件控件的演示就不講了 ### weui的缺點 weui的優點 * 它很好的解決推入和返回的問題 * 它有微信一樣的ui界面 * 它還提供了基本的ui組件(彈出框,actionsheet等) 那么它的缺點呢?頁面內容過長的時候,滑動不流暢,以為它就沒解決這個問題呢 這不正是iscroll解決的問題么? 如果weui加上iscroll的特性,是不是就很棒了?
                  <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>

                              哎呀哎呀视频在线观看