jQuery WeUI學習筆記一

阿新 • • 發佈：2019-01-10

一　引言

最近在對時間典當行這一公眾號進行一個粗淺的學習。涉及到WeUI外掛庫，就整理以下筆記。

１　jQuery WeUI官網地址：http://jqweui.com/

２　WeUI 目前只包含 CSS 程式碼，核心檔案是weui.css

　　jQuery WeUI = WeUI + jQuery + 大量拓展元件

　　jQuery WeUI 的元件分兩部分：

基礎元件：weui官方的元件，使用了weui官方的css
拓展元件：jquery weui 專屬的元件

３　jQuery WeUI 是專為微信公眾賬號開發而設計的一個簡潔而強大的UI庫，包含全部WeUI官方的CSS元件，並且額外提供了大量的拓展元件，豐富的元件庫可以極大減少前端開發時間。

jQuery WeUI 的最大特點是它只提供UI元件，並不會對專案所使用的框架和其他庫有任何的限制，幾乎可以在任何環境下使用。無論你的專案是基於jQuery，還是 React, Angular, Vue，你都會發現 jQuery WeUI 能非常方便的和他們結合使用。既是你的專案是一個有很悠久歷史的老專案，也幾乎可以做到拿來即用。

jQuery WeUI 提供了總共30+ 個非常實用的元件：列表，表單，卡片，對話方塊，下拉重新整理等

4 使用下載好外掛，引入文件中即可使用

5 jQuery WeUI的組成，一共有以下導航條目：

所以對於jQuery WeUI的學習，也很簡單，一共三個部分。基礎元件／擴充套件元件／部分案例學習。

二、　基礎元件

１　九宮格 weui_grids

weui_grid	是一個一個的宮格
weui_grid_icon	一個宮格的圖示
weui_grid_label	圖示下面的字

舉例如下：

<div class="weui-grids">
  <a href="" class="weui-grid js_grid">
    <div class="weui-grid__icon">
      <img src="images/icon_nav_button.png" alt="">
    </div>
    <p class="weui-grid__label">
      Button
    </p>
  </a>
  <a href="" class="weui-grid js_grid">
    <div class="weui-grid__icon">
      <img src="images/icon_nav_cell.png" alt="">
    </div>
    <p class="weui-grid__label">
      List
    </p>
  </a>
  ...
</div>

2 頁面底部的導航 weui-tabbar

通過點選按鈕切換頁面的主體內容,一般巢狀在weui_tab內

weui-tab_bd	為tab頁面的主體內容
weui-tabbar_item	為weui-tabbar的子元素，導航區子選單一般為3-5個
weui-tabbar_icon	為每個子選單的圖示
weui-tabbar_label	圖示下面的文字
weui-bar_item--on	每個導航子選單的active狀態

具體使用如下例所示：

<div class="weui-tab">
  <div class="weui-navbar">
    <div class="weui-navbar__item weui-bar__item--on">
      選項一
    </div>
    <div class="weui-navbar__item">
      選項二
    </div>
    <div class="weui-navbar__item">
      選項三
    </div>
  </div>
  <div class="weui-tab__bd">
    <input type="text" id="a">
  </div>
  <div class="weui-tabbar">
    <a href="javascript:;" class="weui-tabbar__item weui-bar__item--on">
      <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
      <div class="weui-tabbar__icon">
        <img src="./images/icon_nav_button.png" alt="">
      </div>
      <p class="weui-tabbar__label">微信</p>
    </a>
    <a href="javascript:;" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <img src="./images/icon_nav_msg.png" alt="">
      </div>
      <p class="weui-tabbar__label">通訊錄</p>
    </a>
    <a href="javascript:;" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <img src="./images/icon_nav_article.png" alt="">
      </div>
      <p class="weui-tabbar__label">發現</p>
    </a>
    <a href="javascript:;" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <img src="./images/icon_nav_cell.png" alt="">
      </div>
      <p class="weui-tabbar__label">我</p>
    </a>
  </div>
</div>

自動切換

在正確的HTML結構前提下，給 .weui-tabbar__item 或者 .weui-navbar__item 加上 href="#id" 指向一個 .weui-tab__bd-item，即可實現點選的時候自動切換。但是請自行確保初始狀態的一致。

<div class="weui-tab">
  <div class="weui-tab__bd">
    <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
      <h1>頁面一</h1>
    </div>
    <div id="tab2" class="weui-tab__bd-item">
      <h1>頁面二</h1>
    </div>
    ...
  </div>

  <div class="weui-tabbar">
    <a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
      ...
    </a>
    <a href="#tab2" class="weui-tabbar__item">
      ...
    </a>
    ...
  </div>
</div>

3 柵格 weui-flex

<div class="weui-flex">
  <div class="weui-flex__item">weui</div>
  <div class="weui-flex__item">weui</div>
</div>

4 按鈕 weui-btn_***

按鈕可以使用 a 或者 button 標籤。

按鈕常見的操作場景：確定、取消、警示，分別對應class：weui-btn_primary、weui-btn_default、weui-btn_warn，每種場景都有自己的置灰態 weui-btn_disabled，除此外還有一種鏤空按鈕 weui-btn_plain-xxx，客戶端webview裡的按鈕尺寸有兩類，預設寬度100%，小型按鈕寬度自適應，兩邊邊框與文字間距0.75em：

<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>
<a href="javascript:;" class="weui-btn weui-btn_plain-default">按鈕</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-primary">按鈕</a>

.weui-btn_loading 可以使按鈕變為loading狀態

5 列表 weui-cells

cell由 thumbnailweui-cell__hd、bodyweui-cell__bd、accessoryweui-cell__ft三部分組成

<div class="weui-cells">
  <div class="weui-cell">
    <div class="weui-cell__hd"><img src=""></div>
    <div class="weui-cell__bd">
      <p>標題文字</p>
    </div>
    <div class="weui-cell__ft">說明文字</div>
  </div>
  <div class="weui-cell">
    <div class="weui-cell__hd"><img src=""></div>
    <div class="weui-cell__bd">
      <p>標題文字</p>
    </div>
    <div class="weui-cell__ft">說明文字</div>
  </div>
</div>

執行結果如下：

帶連結的列表

<div class="weui-cells">
  <a class="weui-cell weui-cell_access" href="javascript:;">
    <div class="weui-cell__bd">
      <p>cell standard</p>
    </div>
    <div class="weui-cell__ft">
    </div>
  </a>
  <a class="weui-cell weui-cell_access" href="javascript:;">
    <div class="weui-cell__bd">
      <p>cell standard</p>
    </div>
    <div class="weui-cell__ft">
    </div>
  </a>
</div>

只有weui-cell__bd和weui-cell__ft，沒有weui-cell__hd。另外，整個weui-cell_**被標籤a包圍

執行結果如下：

單選列表/複選列表

weui-cells_radio	單選列表
weui-cells_checkbox	複選列表
weui-icon-checked	列表項預設選中
weui-check	一個列表項
weui-cell_link	文字顯示為連結狀態

使用如下：

<div class="weui-cells weui-cells_radio">
  <label class="weui-cell weui-check__label" for="x11">
    <div class="weui-cell__bd">
      <p>cell standard</p>
    </div>
    <div class="weui-cell__ft">
      <input type="radio" class="weui-check" name="radio1" id="x11">
      <span class="weui-icon-checked"></span>
    </div>
  </label>
  <label class="weui-cell weui-check__label" for="x12">
 <div class="weui-cell__bd">
      <p>cell standard</p>
    </div>
    <div class="weui-cell__ft">
      <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">
      <span class="weui-icon-checked"></span>
    </div>
  </label>
  <a href="javascript:void(0);" class="weui-cell weui-cell_link">
    <div class="weui-cell__bd">新增更多</div>
  </a>
</div>

6 滑動刪除（ swipeout ） weui-cell_swiped

Swipeout 可以在列表的某一項中向左滑動出現操作按鈕，類似微信聊天列表中的滑動功能。

預設情況下，當頁面載入完成後，會自動初始化帶有 .weui-cell_swiped 類的列表條目，此時不需要做任何手動初始化。

如果你是動態生成的DOM，或者在JS載入之後的DOM，那麼這樣初始化:

$('.weui-cell_swiped').swipeout()

你可以手動呼叫方法來開啟或者關閉

$('.weui-cell__swiped').swipeout('open') //開啟
$('.weui-cell__swiped').swipeout('close') //關閉

7 表單 weui-cells__form

表單是基於列表的佈局實現的.包括很多常用的表單控制元件：

weui-label	輸入標籤文字
weui-input	輸入框樣式
weui-cell_vcode	.weui-cell_vcode { padding-top: 0; padding-right: 0; padding-bottom: 0;
weui-cell__warn	整個表單報錯
weui-icon-warn	報錯圖示
weui-cells__title	小標題/佔一行
weui-switch	切換狀態
weui-textarea	輸入多行文字框
weui-textarea__counter	文字框字元限制提示
weui-cells__tips	底部說明文字底部說明文字

示例程式碼如下：

<div class="weui-cells weui-cells_form">
  <div class="weui-cell">
    <div class="weui-cell__hd"><label class="weui-label">qq</label></div>
    <div class="weui-cell__bd">
      <input class="weui-input" type="number" pattern="[0-9]*" placeholder="請輸入qq號">
    </div>
  </div>
  <div class="weui-cell weui-cell_vcode">
    <div class="weui-cell__hd">
      <label class="weui-label">手機號</label>
    </div>
    <div class="weui-cell__bd">
      <input class="weui-input" type="tel" placeholder="請輸入手機號">
    </div>
    <div class="weui-cell__ft">
      <button class="weui-vcode-btn">獲取驗證碼</button>
    </div>
  </div>
  <div class="weui-cell">
    <div class="weui-cell__hd"><label for="" class="weui-label">日期</label></div>
    <div class="weui-cell__bd">
      <input class="weui-input" type="date" value="">
    </div>
  </div>
  <div class="weui-cell">
    <div class="weui-cell__hd"><label for="" class="weui-label">時間</label></div>
    <div class="weui-cell__bd">
      <input class="weui-input" type="datetime-local" value="" placeholder="">
    </div>
  </div>
  <div class="weui-cell weui-cell_vcode">
    <div class="weui-cell__hd"><label class="weui-label">驗證碼</label></div>
    <div class="weui-cell__bd">
      <input class="weui-input" type="number" placeholder="請輸入驗證碼">
    </div>
    <div class="weui-cell__ft">
      <img class="weui-vcode-img" src="./images/vcode.jpg">
    </div>
  </div>
</div>
<div class="weui-cells__tips">底部說明文字底部說明文字</div>

<div class="weui-cells__title">表單報錯</div>
<div class="weui-cells weui-cells_form">
  <div class="weui-cell weui-cell_warn">
    <div class="weui-cell__hd"><label for="" class="weui-label">卡號</label></div>
    <div class="weui-cell__bd">
      <input class="weui-input" type="number" pattern="[0-9]*" value="weui input error" placeholder="請輸入卡號">
    </div>
    <div class="weui-cell__ft">
      <i class="weui-icon-warn"></i>
    </div>
  </div>
</div>

執行結果如下：

weui-select	下拉列表
weui-agree__checkbox	同意條款的小方框
weui-btn-area	weui-btn-area { margin: 1.17647059em 15px .3em;}內部用來放置按鈕
weui-btn	提交按鈕樣式

       <div class="weui-cell__hd">
          <select class="weui-select" name="select2">
            <option value="1">+86</option>
            <option value="2">+80</option>
            <option value="3">+84</option>
            <option value="4">+87</option>
          </select>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" pattern="[0-9]*" placeholder="請輸入號碼">
        </div>
      </div>

</div>
    <div class="weui-cells__title">選擇</div>
    <div class="weui-cells">
      <div class="weui-cell weui-cell_select">
        <div class="weui-cell__bd">
          <select class="weui-select" name="select1">
            <option selected="" value="1">微訊號</option>
            <option value="2">QQ號</option>
            <option value="3">Email</option>
          </select>
        </div>
      </div>
      <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
          <label for="" class="weui-label">國家/地區</label>
        </div>
        <div class="weui-cell__bd">
          <select class="weui-select" name="select2">
            <option value="1">中國</option>
            <option value="2">美國</option>
            <option value="3">英國</option>
          </select>
        </div>
      </div>
    </div>
    <label for="weuiAgree" class="weui-agree">
      <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox">
      <span class="weui-agree__text">
        閱讀並同意<a href="javascript:void(0);">《相關條款》</a>
      </span>
    </label>
    <div class="weui-btn-area">
      <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">確定</a>
    </div>

執行結果如下：

8 檔案上傳

目前檔案上傳僅有CSS樣式，並沒有對應的JS外掛。

weui-uploader__hd	為彈性盒佈局
weui-uploader__title	.weui-uploader__title { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
weui-uploader__files	去除圖片的li樣式
weui-uploader__file	放置上傳圖片，已經規定好圖片的寬和高
weui-uploader__file-content	圖片上放置說明文字
weui-icon-warn	圖片上傳失敗圖示
weui-uploader__input-box	待上傳圖片區，高寬已經定好，
weui-uploader__input	待上傳圖片區，input框的class

例項程式碼如下：

<div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="weui-uploader">
            <div class="weui-uploader__hd">
              <p class="weui-uploader__title">圖片上傳</p>
              <div class="weui-uploader__info">0/2</div>
            </div>
            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" id="uploaderFiles">
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                  <div class="weui-uploader__file-content">失敗啦
                    <i class="weui-icon-warn"></i>
                  </div>
                </li>
                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                  <div class="weui-uploader__file-content">50%</div>
                </li>
              </ul>
              <div class="weui-uploader__input-box">
                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

執行結果如下：

9 訊息頁面

結果頁通常來說可以認為進行一系列操作步驟後，作為流程結束的總結性頁面。結果頁的作用主要是告知使用者操作處理結果以及必要的相關細節（可用於確認之前的操作是否有誤）等資訊；若該流程用於開啟或關閉某些重要功能，可在結果頁增加與該功能相關的描述性內容；除此之外，結果頁也可以承載一些附加價值操作，例如提供抽獎、關注公眾號等功能入口。

weui-msg	訊息頁面類名
weui-msg__icon-area	用來放置圖示
weui-icon-success weui-icon_msg	圖示顏色和圖示大小
weui-msg__text-area	用來放置主體訊息
weui-msg__title	訊息標題
weui-msg__desc	訊息正文（字型和字型顏色）
weui-msg__extra-area	底部連結文字，絕對定位，位於頁面最底部
weui-footer	底部文字字型大小和字型顏色
weui-footer__text	底部版權資訊，小一號字 .weui-footer__text { padding: 0 .34em; font-size: 12px;}

例項程式碼如下：

<div class="weui-msg">
  <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
  <div class="weui-msg__text-area">
    <h2 class="weui-msg__title">操作成功</h2>
    <p class="weui-msg__desc">內容詳情，可根據實際需要安排，如果換行則不超過規定長度，居中展現<a href="javascript:void(0);">文字連結</a></p>
  </div>
  <div class="weui-msg__opr-area">
    <p class="weui-btn-area">
      <a href="javascript:;" class="weui-btn weui-btn_primary">推薦操作</a>
      <a href="javascript:;" class="weui-btn weui-btn_default">輔助操作</a>
    </p>
  </div>
  <div class="weui-msg__extra-area">
    <div class="weui-footer">
      <p >
        <a href="javascript:void(0);" class="weui-footer__link">底部連結文字</a>
      </p>
      <p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
    </div>
  </div>
</div>

執行結果如下：

10 對話方塊

若系統的alert窗體無法滿足網頁的臨時檢視內容需求，則可以自定義實現與alert形式相似的dialog，並且在dialog中可以自定義地使用各種控制元件，來滿足需求。

Alert

$.alert("自定義的訊息內容", "標題", function() {
  //點選確認後的回撥函式
});

程式碼段如下：

 <a href="javascript:;" id='show-alert' class="weui-btn weui-btn_primary">顯示 Alert</a>

js程式碼：

$(document).on("click", "#show-alert", function() {
        $.alert("下午寫不完作業就不要吃飯", "警告！");
      });

執行結果如下：

Confirm 顯示一段確認訊息，有一個確認按鈕和一個取消按鈕

$.confirm("自定義的訊息內容","自定義的標題", function() {
  //點選確認後的回撥函式
  }, function() {
  //點選取消後的回撥函式
  });

程式碼段如下：

 <a href="javascript:;" id='show-confirm' class="weui-btn weui-btn_primary">顯示 Confirm</a>

js程式碼：

 $(document).on("click", "#show-confirm", function() {
        $.confirm("您確定要取消本次釋出嗎?", "確認刪除?", function() {
          $.toast("釋出已經取消!");
        }, function() {
          //取消操作
        });
      });

執行結果如下：

Promopt 顯示一個帶有輸入框的對話方塊,可以讓使用者輸入資訊

$.prompt("自定義的訊息內容", function(text) {
  //點選確認後的回撥函式
  //text 是使用者輸入的內容
}, function() {
  //點選取消後的回撥函式
});

//如果引數過多，建議通過 object 方式傳入
$.prompt({
  title: '標題',
  text: '內容文案',
  input: '輸入框預設值',
  empty: false, // 是否允許為空
  onOK: function (input) {
    //點選確認
  },
  onCancel: function () {
    //點選取消
  }
});

程式碼段如下:

 <a href="javascript:;" id='show-prompt' class="weui-btn weui-btn_primary">顯示 Prompt</a>

js程式碼如下：

$(document).on("click", "#show-prompt", function() {
        $.prompt({
          text: "名字不能超過6個字元，不得出現不和諧文字",
          title: "輸入姓名",
          onOK: function(text) {
            $.alert("您的名字是:"+text, "角色設定成功");
          },
          onCancel: function() {
            console.log("取消了");
          },
          input: 'Mr Noone'
        });
 });

執行結果如下：

顯示一個登入框：

$.login("自定義的訊息內容", function(username, password) {
  // 這裡進行登入操作
}, function() {
});

程式碼段如下：

 <a href="javascript:;" id='show-login' class="weui-btn weui-btn_primary">顯示登入彈窗</a>

js程式碼如下：

 $(document).on('click', '#show-login', function() {
        $.login({
          title: '登入',
          text: '請輸入使用者名稱和密碼',
          onOK: function (username, password) {
            console.log(username, password);
            $.toast('登入成功!');
          },
          onCancel: function () {
            $.toast('取消登入!', 'cancel');
          }
        });
      });

執行結果如下：

自定義對話方塊

上述的三種對話方塊都是 $.modal 的一種特殊形式。你可以通過 $.modal 來定製對話方塊:

$.modal({
  title: "Hello",
  text: "我是自定義的modal",
  buttons: [
    { text: "支付寶", onClick: function(){ console.log(1)} },
    { text: "微信支付", onClick: function(){ console.log(2)} },
    { text: "取消", className: "default", onClick: function(){ console.log(3)} },
  ]
});

程式碼段如下：

  <a href="javascript:;" id='show-custom' class="weui-btn weui-btn_primary">顯示自定義對話方塊</a>

js程式碼段如下：

 $(document).on("click", "#show-custom", function() {
        $.modal({
          title: "Hello",
          text: "我是自定義的modal",
          buttons: [
            { text: "支付寶", onClick: function(){ $.alert("你選擇了支付寶"); } },
            { text: "微信支付", onClick: function(){ $.alert("你選擇了微信支付"); } },
            { text: "取消", className: "default"},
          ]
        });
      });

執行結果如下：

11 載入提示

weui-loadmore	用來放置載入中的樣式
weui-loading	載入中的圖示
weui-loadmore_line	正在載入兩邊是線型
weui-loadmore_dot weui-loadmore__tips	二者必須一起使用 .weui-loadmore_dot .weui-loadmore__tips { padding: 0 .16em;}

使用例項：

<div class="weui-loadmore">
  <i class="weui-loading"></i>
  <span class="weui-loadmore__tips">正在載入</span>
</div>
<div class="weui-loadmore weui-loadmore_line">
  <span class="weui-loadmore__tips">暫無資料</span>
</div>
<div class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
  <span class="weui-loadmore__tips"></span>
</div>

執行結果如下：

12 ActionSheet

用於顯示包含一系列可互動的動作集合，包括說明、跳轉等。由底部彈出，一般用於響應使用者對頁面的點選。

ActionSheet 只能通過 JavaScript 進行呼叫:

通過 $.actions(params) 方法開啟 ActionSheet。可用引數如下：

引數名	說明
actions	選單項，關於每一個選單項的配置請參見下文
title	可以給彈層設定一個標題，如果不設定則不會顯示標題
onClose	關閉彈層的回撥函式

actions 引數是一個數組，陣列中的每一項都是一個選單。

對每一個選單的可用配置如下：

引數名	說明
text	選單顯示的文案
className	選單上額外追加的class
onClick	點選之後的回撥函式

從 V0.7.0 開始，可以通過 className 引數配置不同的顏色或者背景

例項程式碼如下：

  <a href="javascript:;" id='show-actions' class="weui-btn weui-btn_primary">顯示 ActionSheet</a>

js程式碼段如下:

 $(document).on("click", "#show-actions", function() {
        $.actions({
          title: "選擇操作",
          onClose: function() {
            console.log("close");
          },
          actions: [
            {
              text: "釋出",
              className: "color-primary",
              onClick: function() {
                $.alert("釋出成功");
              }
            },
            {
              text: "編輯",
              className: "color-warning",
              onClick: function() {
                $.alert("你選擇了“編輯”");
              }
            },
            {
              text: "刪除",
              className: 'color-danger',
              onClick: function() {
                $.alert("你選擇了“刪除”");
              }
            }
          ]
        });
      });

執行結果如下：

13 Toast

用於臨時顯示某些資訊，並且會在數秒後自動消失。這些資訊通常是輕量級操作的成功、失敗或等待狀態資訊。

Toast 只能通過 JavaScript 進行呼叫:

$.toast();
$.toast("操作成功");

Toast 有三種模式可以選擇，預設是 成功 模式，還有 取消 和 禁止 兩種模式:

從 V0.7.1 版本開始，新增了一個純文字模式。

$.toast("取消操作", "cancel");
$.toast("禁止操作", "forbidden");
$.toast("純文字", "text");
// 第二個引數可以是時間，單位毫秒
$.toast("訊息", 20000);

例項程式碼如下：

      <a href="javascript:;" id='show-toast' class="weui-btn weui-btn_primary">顯示 Toast 成功</a>
      <a href="javascript:;" id='show-toast-cancel' class="weui-btn weui-btn_primary">顯示 Toast 取消</a>
      <a href="javascript:;" id='show-toast-forbidden' class="weui-btn weui-btn_primary">顯示 Toast 禁止</a>
      <a href="javascript:;" id='show-toast-text' class="weui-btn weui-btn_primary">顯示 Toast 純文字</a>
      <a href="javascript:;" id='show-loading' class="weui-btn weui-btn_primary">顯示 Loading</a>

js程式碼段如下：

 $(document).on("click", "#show-toast", function() {
        $.toast("操作成功", function() {
          console.log('close');
        });
      })
      .on("click", "#show-toast-cancel", function() {
        $.toast("取消操作", "cancel", function(toast) {
          console.log(toast);
        });
      })
      .on("click", "#show-toast-forbidden", function() {
        $.toast("禁止操作", "forbidden");
      })
      .on("click", "#show-toast-text", function() {
        $.toast("純文字", "text");
      })
      .on("click", "#show-loading", function() {
        $.showLoading();

        setTimeout(function() {
          $.hideLoading();
        }, 3000)
      });

14 toptip

顯示在頁面頂部的輕量級提示，一般用來反饋使用者的操作結果，比如表單校驗失敗等。

JS方法定義如下：

$.toptip(text, [duration, type]);

示例：

$.toptip('操作成功', 'success');
$.toptip('操作失敗', 'error');
$.toptip('警告', 'warning');

$.toptip('操作成功', 2000, 'success');  //設定顯示時間

注意，此元件從 V0.7.2 版本開始才可以使用。

例項程式碼如下：

$(document)
      .on('click', '#show-success', function() {
        $.toptip('操作成功', 'success');
      })
      .on('click', '#show-error', function() {
        $.toptip('操作失敗', 'error');
      })
      .on('click', '#show-warning', function() {
        $.toptip('警告', 'warning');
      })

15 圖示

weui-icon-success/info/warn

圖示型別、顏色

weui-icon_msg

圖示大小

.weui-icon_msg {

font-size: 93px;}

程式碼段如下：

<i class="weui-icon-success weui-icon_msg"></i>
<i class="weui-icon-info weui-icon_msg"></i>
<i class="weui-icon-warn weui-icon_msg-primary"></i>
<i class="weui-icon-warn weui-icon_msg"></i>
<i class="weui-icon-waiting weui-icon_msg"></i>

<i class="weui-icon-success"></i>
<i class="weui-icon-success-no-circle"></i>
<i class="weui-icon-circle"></i>
<i class="weui-icon-warn"></i>
<i class="weui-icon-download"></i>
<i class="weui-icon-info-circle"></i>
<i class="weui-icon-cancel"></i>
<i class="weui-icon-search"></i>

執行結果如下：

16 搜尋欄

搜尋欄，類似於微信原生的搜尋欄，應用於常見的搜尋場景。

weui-search-bar__form	用來放置搜尋框
weui-icon-search	點選搜尋框以後，出現input框 <input class="weui-search-bar__input" id="searchInput" placeholder="搜尋" required="" type="search">
weui-search-bar__label	input搜尋框樣式
weui-search-bar__cancel-btn	右側搜尋框取消樣式

程式碼段如下：

 <div class="weui-search-bar" id="searchBar">
      <form class="weui-search-bar__form" action="#">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜尋" required="">
          <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
          <i class="weui-icon-search"></i>
          <span>搜尋</span>
        </label>
      </form>
      <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>

執行結果如下：

17 面板 panel

weui-panel	放置圖文的容器面板
weui-media-box
weui-media-box_appmsg
weui-media-box__hd	hd面板的頭部
weui-media-box__bd	bd面板的內容
weui-media-box__title	面板內容裡面的標題
weui-media-box__desc	面板內容裡面的正文（描述）
weui-panel__ft	ft面板的尾部

程式碼段如下：

 <div class="weui-panel weui-panel_access">
        <div class="weui-panel__hd">圖文組合列表</div>
        <div class="weui-panel__bd">
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src="" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">標題一</h4>
              <p class="weui-media-box__desc">由各種物質組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的執行軌道。</p>
            </div>
          </a>
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" src='' alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">標題二</h4>
              <p class="weui-media-box__desc">由各種物質組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的執行軌道。</p>
            </div>
          </a>
        </div>
        <div class="weui-panel__ft">
          <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
            <div class="weui-cell__bd">檢視更多</div>
            <span class="weui-cell__ft"></span>
          </a>    
        </div>
      </div>

執行結果如下：

程式碼段如下：

<div class="weui-panel weui-panel_access">
        <div class="weui-panel__hd">文字組合列表</div>
        <div class="weui-panel__bd">
          <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title">標題一</h4>
            <p class="weui-media-box__desc">由各種物質組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的執行軌道。</p>
          </div>
          <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title">標題二</h4>
            <p class="weui-media-box__desc">由各種物質組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的執行軌道。</p>
          </div>
        </div>
        <div class="weui-panel__ft">
          <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
            <div class="weui-cell__bd">檢視更多</div>
            <span class="weui-cell__ft"></span>
          </a>    
        </div>
      </div>

執行結果如下：

18 導航欄

因為微信本身就有一個頂部的標題欄，所以這個導航欄其實是在標題欄之下的二級導航欄，因此它實際上就是一個放在頁面頂部的 tabbar 而已。

自動切換

在正確的HTML結構前提下，給 .weui-tabbar__item 或者 .weui-navbar__item 加上 href="#id" 指向一個 .weui-tab__bd-item，即可實現點選的時候自動切換。

初識狀態顯示的標籤，需要自行新增 .weui-bar__item--on 和 .weui-tab__bd-item--active.

weui-navbar	放置選項卡
weui-navbar__item	選項卡樣式
weui-bar__item--on	預設active 的選項卡
weui-tab__bd-item--active	預設active的頁面
weui-tab__bd-item	放置頁面內容

例項程式碼如下：

 <div class="weui-tab">
      <div class="weui-navbar">
        <a class="weui-navbar__item weui-bar__item--on" href="#tab1">
          選項一
        </a>
        <a class="weui-navbar__item" href="#tab2">
          選項二
        </a>
        <a class="weui-navbar__item" href="#tab3">
          選項三
        </a>
      </div>
      <div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
          <h1>頁面一</h1>
        </div>
        <div id="tab2" class="weui-tab__bd-item">
          <h1>頁面二</h1>
        </div>
        <div id="tab3" class="weui-tab__bd-item">
          <h1>頁面三</h1>
        </div>
      </div>
    </div>

執行結果如下：

jQuery WeUI學習筆記一

自動切換

自動切換

jQuery WeUI學習筆記一

jQuery學習筆記(一)

jquery -- 學習筆記(一)

Jquery學習筆記一

前端技術（JQuery）學習筆記（一）JQuery文件準備就緒事件、JQuery事件處理、JQuery物件與DOM物件的、JQuery取值

jquery 深入學習筆記之中的一個（事件綁定）

AngularJS入門學習筆記一

Halcon學習筆記(一)

django學習筆記一

Linux學習筆記(一)

Tomcat學習筆記(一)

ELK學習筆記(一)---安裝ELK 5.x版

Git學習筆記(一)

轉：C#制作ORM映射學習筆記一自定義Attribute類

ES6學習筆記(一)

backbone學習筆記一

Microsoft.SQL.Server2012.Performance.Tuning.Cookbook學習筆記(一)

python學習筆記(一)

jquery-mobile 學習筆記之中的一個（基礎屬性）

QuartZ .Net 學習筆記一: 源碼下載與查看

jQuery WeUI學習筆記一

自動切換

自動切換

相關推薦