jQuery WeUI学习笔记一
生活随笔
收集整理的這篇文章主要介紹了
jQuery WeUI学习笔记一
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一 引言
最近在對(duì)時(shí)間典當(dāng)行這一公眾號(hào)進(jìn)行一個(gè)粗淺的學(xué)習(xí)。涉及到WeUI插件庫，就整理以下筆記。
１ jQuery WeUI官網(wǎng)地址：http://jqweui.com/
２ WeUI 目前只包含 CSS 代碼，核心文件是weui.css
jQuery WeUI = WeUI + jQuery + 大量拓展組件
jQuery WeUI 的組件分兩部分：
- 基礎(chǔ)組件：weui官方的組件，使用了weui官方的css
- 拓展組件：jquery weui 專屬的組件
３ jQuery WeUI 是專為微信公眾賬號(hào)開發(fā)而設(shè)計(jì)的一個(gè)簡(jiǎn)潔而強(qiáng)大的UI庫，包含全部WeUI官方的CSS組件，并且額外提供了大量的拓展組件，豐富的組件庫可以極大減少前端開發(fā)時(shí)間。
jQuery WeUI 的最大特點(diǎn)是它只提供UI組件，并不會(huì)對(duì)項(xiàng)目所使用的框架和其他庫有任何的限制，幾乎可以在任何環(huán)境下使用。無論你的項(xiàng)目是基于jQuery，還是 React, Angular, Vue， 你都會(huì)發(fā)現(xiàn) jQuery WeUI 能非常方便的和他們結(jié)合使用。既是你的項(xiàng)目是一個(gè)有很悠久歷史的老項(xiàng)目，也幾乎可以做到拿來即用。
jQuery WeUI 提供了總共30+ 個(gè)非常實(shí)用的組件：列表，表單，卡片，對(duì)話框，下拉刷新等
4? 使用 下載好插件，引入文檔中即可使用
5? jQuery WeUI的組成，一共有以下導(dǎo)航條目：
所以對(duì)于jQuery WeUI的學(xué)習(xí)，也很簡(jiǎn)單，一共三個(gè)部分。基礎(chǔ)組件／擴(kuò)展組件／部分案例學(xué)習(xí)。
二、 基礎(chǔ)組件
１ 九宮格??? weui_grids
| weui_grid | 是一個(gè)一個(gè)的宮格 |
| weui_grid_icon | 一個(gè)宮格的圖標(biāo) |
| weui_grid_label | 圖標(biāo)下面的字 |
<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 頁面底部的導(dǎo)航? weui-tabbar
通過點(diǎn)擊按鈕切換頁面的主體內(nèi)容,一般嵌套在weui_tab內(nèi)
| weui-tab_bd | 為tab頁面的主體內(nèi)容 |
| weui-tabbar_item | 為weui-tabbar的子元素，導(dǎo)航區(qū)子菜單一般為3-5個(gè) |
| weui-tabbar_icon | 為每個(gè)子菜單的圖標(biāo) |
| weui-tabbar_label | 圖標(biāo)下面的文字 |
| weui-bar_item--on | 每個(gè)導(dǎo)航子菜單的active狀態(tài) |
自動(dòng)切換
在正確的HTML結(jié)構(gòu)前提下，給 .weui-tabbar__item 或者 .weui-navbar__item 加上 href="#id" 指向一個(gè) .weui-tab__bd-item，即可實(shí)現(xiàn)點(diǎn)擊的時(shí)候自動(dòng)切換。但是請(qǐng)自行確保初始狀態(tài)的一致。<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 標(biāo)簽。
按鈕常見的操作場(chǎng)景：確定、取消、警示，分別對(duì)應(yīng)class：weui-btn_primary、weui-btn_default、weui-btn_warn，每種場(chǎng)景都有自己的置灰態(tài) weui-btn_disabled，除此外還有一種鏤空按鈕 weui-btn_plain-xxx，客戶端webview里的按鈕尺寸有兩類，默認(rèn)寬度100%，小型按鈕寬度自適應(yīng)，兩邊邊框與文本間距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">確認(rèn)</a> <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">確認(rèn)</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 可以使按鈕變?yōu)閘oading狀態(tài)
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>標(biāo)題文字</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>標(biāo)題文字</p></div><div class="weui-cell__ft">說明文字</div></div> </div>運(yùn)行結(jié)果如下：
帶鏈接的列表
<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。另外，整個(gè)weui-cell_**被標(biāo)簽a包圍
運(yùn)行結(jié)果如下：
單選列表/復(fù)選列表
| weui-cells_radio | 單選列表 |
| weui-cells_checkbox | 復(fù)選列表 |
| weui-icon-checked | 列表項(xiàng)默認(rèn)選中 |
| weui-check | 一個(gè)列表項(xiàng) |
| weui-cell_link | 文字顯示為鏈接狀態(tài) |
使用如下：
<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 滑動(dòng)刪除 （ swipeout? ） weui-cell_swiped
Swipeout 可以在列表的某一項(xiàng)中向左滑動(dòng)出現(xiàn)操作按鈕，類似微信聊天列表中的滑動(dòng)功能。
默認(rèn)情況下，當(dāng)頁面加載完成后，會(huì)自動(dòng)初始化帶有 .weui-cell_swiped 類的列表?xiàng)l目，此時(shí)不需要做任何手動(dòng)初始化。
如果你是動(dòng)態(tài)生成的DOM，或者在JS加載之后的DOM，那么這樣初始化:
$('.weui-cell__swiped').swipeout('open') //打開 $('.weui-cell__swiped').swipeout('close') //關(guān)閉
7? 表單 weui-cells__form
表單是基于列表的布局實(shí)現(xiàn)的.包括很多常用的表單控件：
| weui-label | 輸入標(biāo)簽文字 |
| weui-input | 輸入框樣式 |
| weui-cell_vcode | .weui-cell_vcode { |
| weui-cell__warn | 整個(gè)表單報(bào)錯(cuò) |
| weui-icon-warn | 報(bào)錯(cuò)圖標(biāo) |
| weui-cells__title | 小標(biāo)題/占一行 |
| weui-switch | 切換狀態(tài) |
| 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="請(qǐng)輸入qq號(hào)"></div></div><div class="weui-cell weui-cell_vcode"><div class="weui-cell__hd"><label class="weui-label">手機(jī)號(hào)</label></div><div class="weui-cell__bd"><input class="weui-input" type="tel" placeholder="請(qǐng)輸入手機(jī)號(hào)"></div><div class="weui-cell__ft"><button class="weui-vcode-btn">獲取驗(yàn)證碼</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">時(shí)間</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">驗(yàn)證碼</label></div><div class="weui-cell__bd"><input class="weui-input" type="number" placeholder="請(qǐng)輸入驗(yàn)證碼"></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">表單報(bào)錯(cuò)</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">卡號(hào)</label></div><div class="weui-cell__bd"><input class="weui-input" type="number" pattern="[0-9]*" value="weui input error" placeholder="請(qǐng)輸入卡號(hào)"></div><div class="weui-cell__ft"><i class="weui-icon-warn"></i></div></div> </div>運(yùn)行結(jié)果如下：
| weui-select | 下拉列表 |
| weui-agree__checkbox | 同意條款的小方框 |
| weui-btn-area | weui-btn-area { margin: 1.17647059em 15px .3em;}內(nèi)部用來放置按鈕 |
| weui-btn | 提交按鈕樣式 |
運(yùn)行結(jié)果如下：
8 文件上傳
目前文件上傳僅有CSS樣式，并沒有對(duì)應(yīng)的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 | 放置上傳圖片，已經(jīng)規(guī)定好圖片的寬和高 |
| weui-uploader__file-content | 圖片上放置說明文字 |
| weui-icon-warn | 圖片上傳失敗圖標(biāo) |
| weui-uploader__input-box | 待上傳圖片區(qū)，高寬已經(jīng)定好， |
| weui-uploader__input | 待上傳圖片區(qū)，input框的class |
實(shí)例代碼如下：
<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>運(yùn)行結(jié)果如下：
9 消息頁面
結(jié)果頁通常來說可以認(rèn)為進(jìn)行一系列操作步驟后，作為流程結(jié)束的總結(jié)性頁面。結(jié)果頁的作用主要是告知用戶操作處理結(jié)果以及必要的相關(guān)細(xì)節(jié)（可用于確認(rèn)之前的操作是否有誤）等信息；若該流程用于開啟或關(guān)閉某些重要功能，可在結(jié)果頁增加與該功能相關(guān)的描述性內(nèi)容；除此之外，結(jié)果頁也可以承載一些附加價(jià)值操作，例如提供抽獎(jiǎng)、關(guān)注公眾號(hào)等功能入口。
| weui-msg | 消息頁面類名 |
| weui-msg__icon-area | 用來放置圖標(biāo) |
| weui-icon-success weui-icon_msg | 圖標(biāo)顏色和圖標(biāo)大小 |
| weui-msg__text-area | 用來放置主體消息 |
| weui-msg__title | 消息標(biāo)題 |
| weui-msg__desc | 消息正文（字體和字體顏色） |
| weui-msg__extra-area | 底部鏈接文本，絕對(duì)定位，位于頁面最底部 |
| weui-footer | 底部文字字體大小和字體顏色 |
| weui-footer__text | 底部版權(quán)信息，小一號(hào)字 .weui-footer__text { padding: 0 .34em; |
實(shí)例代碼如下：
<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">內(nèi)容詳情，可根據(jù)實(shí)際需要安排，如果換行則不超過規(guī)定長度，居中展現(xiàn)<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>運(yùn)行結(jié)果如下：
10? 對(duì)話框
若系統(tǒng)的alert窗體無法滿足網(wǎng)頁的臨時(shí)視圖內(nèi)容需求，則可以自定義實(shí)現(xiàn)與alert形式相似的dialog，并且在dialog中可以自定義地使用各種控件，來滿足需求。
Alert
$.alert("自定義的消息內(nèi)容", "標(biāo)題", function() {//點(diǎn)擊確認(rèn)后的回調(diào)函數(shù) });代碼段如下：
<a href="javascript:;" id='show-alert' class="weui-btn weui-btn_primary">顯示 Alert</a>js代碼：
$(document).on("click", "#show-alert", function() {$.alert("下午寫不完作業(yè)就不要吃飯", "警告！");});運(yùn)行結(jié)果如下：
Confirm? 顯示一段確認(rèn)消息，有一個(gè)確認(rèn)按鈕和一個(gè)取消按鈕
代碼段如下：
<a href="javascript:;" id='show-confirm' class="weui-btn weui-btn_primary">顯示 Confirm</a>js代碼：
$(document).on("click", "#show-confirm", function() {$.confirm("您確定要取消本次發(fā)布嗎?", "確認(rèn)刪除?", function() {$.toast("發(fā)布已經(jīng)取消!");}, function() {//取消操作});});運(yùn)行結(jié)果如下：
Promopt?? 顯示一個(gè)帶有輸入框的對(duì)話框,可以讓用戶輸入信息
$.prompt("自定義的消息內(nèi)容", function(text) {//點(diǎn)擊確認(rèn)后的回調(diào)函數(shù)//text 是用戶輸入的內(nèi)容 }, function() {//點(diǎn)擊取消后的回調(diào)函數(shù) }); //如果參數(shù)過多，建議通過 object 方式傳入 $.prompt({title: '標(biāo)題',text: '內(nèi)容文案',input: '輸入框默認(rèn)值',empty: false, // 是否允許為空onOK: function (input) {//點(diǎn)擊確認(rèn)},onCancel: function () {//點(diǎn)擊取消} });代碼段如下:
<a href="javascript:;" id='show-prompt' class="weui-btn weui-btn_primary">顯示 Prompt</a>js代碼如下：
$(document).on("click", "#show-prompt", function() {$.prompt({text: "名字不能超過6個(gè)字符，不得出現(xiàn)不和諧文字",title: "輸入姓名",onOK: function(text) {$.alert("您的名字是:"+text, "角色設(shè)定成功");},onCancel: function() {console.log("取消了");},input: 'Mr Noone'});});運(yùn)行結(jié)果如下：
Login
顯示一個(gè)登錄框：
$.login("自定義的消息內(nèi)容", function(username, password) {// 這里進(jìn)行登錄操作 }, function() { });代碼段如下：
<a href="javascript:;" id='show-login' class="weui-btn weui-btn_primary">顯示登錄彈窗</a>js代碼如下：
$(document).on('click', '#show-login', function() {$.login({title: '登錄',text: '請(qǐng)輸入用戶名和密碼',onOK: function (username, password) {console.log(username, password);$.toast('登錄成功!');},onCancel: function () {$.toast('取消登錄!', 'cancel');}});});運(yùn)行結(jié)果如下：
自定義對(duì)話框
上述的三種對(duì)話框都是 $.modal 的一種特殊形式。你可以通過 $.modal 來定制對(duì)話框:
代碼段如下：
<a href="javascript:;" id='show-custom' class="weui-btn weui-btn_primary">顯示自定義對(duì)話框</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"},]});});運(yùn)行結(jié)果如下：
11 加載提示
| weui-loadmore | 用來放置加載中的樣式 |
| weui-loading | 加載中的圖標(biāo) |
| weui-loadmore_line | 正在加載兩邊是線型 |
weui-loadmore_dot weui-loadmore__tips | 二者必須一起使用 .weui-loadmore_dot .weui-loadmore__tips { |
使用實(shí)例：
<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">暫無數(shù)據(jù)</span> </div> <div class="weui-loadmore weui-loadmore_line weui-loadmore_dot"><span class="weui-loadmore__tips"></span> </div>運(yùn)行結(jié)果如下：
12 ActionSheet
用于顯示包含一系列可交互的動(dòng)作集合，包括說明、跳轉(zhuǎn)等。由底部彈出，一般用于響應(yīng)用戶對(duì)頁面的點(diǎn)擊。
ActionSheet 只能通過 JavaScript 進(jìn)行調(diào)用:
通過 $.actions(params) 方法打開 ActionSheet?？捎脜?shù)如下：
| actions | 菜單項(xiàng)，關(guān)于每一個(gè)菜單項(xiàng)的配置請(qǐng)參見下文 |
| title | 可以給彈層設(shè)置一個(gè)標(biāo)題，如果不設(shè)置則不會(huì)顯示標(biāo)題 |
| onClose | 關(guān)閉彈層的回調(diào)函數(shù) |
actions 參數(shù)是一個(gè)數(shù)組，數(shù)組中的每一項(xiàng)都是一個(gè)菜單。
對(duì)每一個(gè)菜單的可用配置如下：
| text | 菜單顯示的文案 |
| className | 菜單上額外追加的class |
| onClick | 點(diǎn)擊之后的回調(diào)函數(shù) |
從 V0.7.0 開始， 可以通過 className 參數(shù)配置不同的顏色或者背景
實(shí)例代碼如下：
<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: "發(fā)布",className: "color-primary",onClick: function() {$.alert("發(fā)布成功");}},{text: "編輯",className: "color-warning",onClick: function() {$.alert("你選擇了“編輯”");}},{text: "刪除",className: 'color-danger',onClick: function() {$.alert("你選擇了“刪除”");}}]});});運(yùn)行結(jié)果如下：
13 Toast
用于臨時(shí)顯示某些信息，并且會(huì)在數(shù)秒后自動(dòng)消失。這些信息通常是輕量級(jí)操作的成功、失敗或等待狀態(tài)信息。
Toast 只能通過 JavaScript 進(jìn)行調(diào)用:
$.toast(); $.toast("操作成功");Toast 有三種模式可以選擇，默認(rèn)是 成功 模式，還有 取消 和 禁止 兩種模式:
從 V0.7.1 版本開始，新增了一個(gè)純文本模式。
$.toast("取消操作", "cancel"); $.toast("禁止操作", "forbidden"); $.toast("純文本", "text"); // 第二個(gè)參數(shù)可以是時(shí)間，單位毫秒 $.toast("消息", 20000);實(shí)例代碼如下：
<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
顯示在頁面頂部的輕量級(jí)提示，一般用來反饋用戶的操作結(jié)果，比如表單校驗(yàn)失敗等。
JS方法定義如下：
$.toptip(text, [duration, type]);示例：
$.toptip('操作成功', 'success'); $.toptip('操作失敗', 'error'); $.toptip('警告', 'warning');$.toptip('操作成功', 2000, 'success'); //設(shè)置顯示時(shí)間注意，此組件從 V0.7.2 版本開始才可以使用。
實(shí)例代碼如下：
$(document).on('click', '#show-success', function() {$.toptip('操作成功', 'success');}).on('click', '#show-error', function() {$.toptip('操作失敗', 'error');}).on('click', '#show-warning', function() {$.toptip('警告', 'warning');})15? 圖標(biāo)
| weui-icon-success/info/warn | 圖標(biāo)類型、顏色 |
| weui-icon_msg | 圖標(biāo)大小 .weui-icon_msg { ??? font-size: 93px;} |
運(yùn)行結(jié)果如下：
16? 搜索欄
搜索欄，類似于微信原生的搜索欄，應(yīng)用于常見的搜索場(chǎng)景。
| weui-search-bar__form | 用來放置搜索框 |
| weui-icon-search | 點(diǎn)擊搜索框以后，出現(xiàn)input框 <input class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="" type="search"> |
| weui-search-bar__label | input搜索框樣式 |
| weui-search-bar__cancel-btn | 右側(cè)搜索框取消樣式 |
運(yùn)行結(jié)果如下：
17? 面板 panel
| weui-panel | 放置圖文的容器面板 |
| weui-media-box | ? |
| weui-media-box_appmsg | ? |
| weui-media-box__hd | hd面板的頭部 |
| weui-media-box__bd | bd面板的內(nèi)容 |
| weui-media-box__title | 面板內(nèi)容里面的標(biāo)題 |
| weui-media-box__desc | 面板內(nèi)容里面的正文（描述） |
| weui-panel__ft | ft面板的尾部 |
運(yùn)行結(jié)果如下：
代碼段如下：
<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">標(biāo)題一</h4><p class="weui-media-box__desc">由各種物質(zhì)組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的運(yùn)行軌道。</p></div><div class="weui-media-box weui-media-box_text"><h4 class="weui-media-box__title">標(biāo)題二</h4><p class="weui-media-box__desc">由各種物質(zhì)組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的運(yùn)行軌道。</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>運(yùn)行結(jié)果如下：
18? 導(dǎo)航欄
因?yàn)槲⑿疟旧砭陀幸粋€(gè)頂部的標(biāo)題欄，所以這個(gè)導(dǎo)航欄其實(shí)是在標(biāo)題欄之下的二級(jí)導(dǎo)航欄，因此它實(shí)際上就是一個(gè)放在頁面頂部的 tabbar 而已。
自動(dòng)切換
在正確的HTML結(jié)構(gòu)前提下，給 .weui-tabbar__item 或者 .weui-navbar__item 加上 href="#id" 指向一個(gè) .weui-tab__bd-item，即可實(shí)現(xiàn)點(diǎn)擊的時(shí)候自動(dòng)切換。
初識(shí)狀態(tài)顯示的標(biāo)簽，需要自行添加 .weui-bar__item--on 和 .weui-tab__bd-item--active.
| weui-navbar | 放置選項(xiàng)卡 |
| weui-navbar__item | 選項(xiàng)卡樣式 |
| weui-bar__item--on | 默認(rèn)active 的選項(xiàng)卡 |
| weui-tab__bd-item--active | 默認(rèn)active的頁面 |
| weui-tab__bd-item | 放置頁面內(nèi)容 |
運(yùn)行結(jié)果如下：
總結(jié)
以上是生活随笔為你收集整理的jQuery WeUI学习笔记一的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [react] 有使用过Consumer
- 下一篇： pom.xml里发布和下载包