jQuery WeUI学习笔记一
生活随笔
收集整理的這篇文章主要介紹了
jQuery WeUI学习笔记一
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一 引言
最近在對時間典當行這一公眾號進行一個粗淺的學習。涉及到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狀態 |
自動切換
在正確的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
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('open') //打開 $('.weui-cell__swiped').swipeout('close') //關閉
7? 表單 weui-cells__form
表單是基于列表的布局實現的.包括很多常用的表單控件：
| weui-label | 輸入標簽文字 |
| weui-input | 輸入框樣式 |
| weui-cell_vcode | .weui-cell_vcode { |
| 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 | 提交按鈕樣式 |
運行結果如下：
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; |
實例代碼如下：
<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? 顯示一段確認消息，有一個確認按鈕和一個取消按鈕
代碼段如下：
<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
顯示一個登錄框：
$.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 來定制對話框:
代碼段如下：
<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 { |
使用實例：
<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;} |
運行結果如下：
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 | 右側搜索框取消樣式 |
運行結果如下：
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"><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 | 放置頁面內容 |
運行結果如下：
總結
以上是生活随笔為你收集整理的jQuery WeUI学习笔记一的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [react] 有使用过Consumer
- 下一篇： pom.xml里发布和下载包