WeUI 是一套同微信原生視覺體驗(yàn)一致的H5 UI 基礎(chǔ)樣式庫，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信 Web 開發(fā)量身設(shè)計(jì)，它只提供了一組CSS組件，可以令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。

jQuery WeUI 中使用的是官方 WeUI 的 CSS 代碼，并提供了 jQuery/Zepto 版本的 API 實(shí)現(xiàn)。因?yàn)橹苯邮褂昧斯俜降?CSS，所以你不用擔(dān)心跟官方版本的沖突。實(shí)際上 jQuery WeUI == WeUI + jQuery 插件。

如果你使用過 jQuery，那么你使用 jQuery WeUI 將沒有任何障礙,所有的 JS 組件都是標(biāo)準(zhǔn)的 jQuery 插件：

$.alert("我是一個對話框");//彈出一個actionsheet$.actions({ actions: [{ text: "編輯", onClick: function() { //do something } },{ text: "刪除", onClick: function() { //do something } }]});<link rel="stylesheet" href="/jquery-weui/dist/lib/weui.css"> <link rel="stylesheet" href="/jquery-weui/dist/css/jquery-weui.css"> <!-- body 最后 --> <script src="/jquery-weui/dist/lib/jquery-2.1.4.js"></script> <script src="/jquery-weui/dist/js/jquery-weui.js"></script>

其中 weui.css 是官方的版本，并未做任何修改。

WeUIButton：

按鈕可以使用a或者button標(biāo)簽。wap上要觸發(fā)按鈕的active態(tài)，必須觸發(fā)ontouchstart事件，可以在body上加上ontouchstart=""全局觸發(fā)。

按鈕常見的操作場景：確定、取消、警示，分別對應(yīng)class：weui_btn_primary、weui_btn_default、weui_btn_warn，每種場景都有自己的置灰態(tài)weui_btn_disabled，除此外還有一種鏤空按鈕weui_btn_plain_xxx，客戶端webview里的按鈕尺寸有兩類，默認(rèn)寬度100%，小型按鈕寬度自適應(yīng)，兩邊邊框與文本間距0.75em：

WeUICell：

Cell，列表視圖，用于將信息以列表的結(jié)構(gòu)顯示在頁面上，是wap上最常用的內(nèi)容結(jié)構(gòu)。Cell由多個section組成，每個section包括section headerweui_cells_title以及cellsweui_cells。

cell由thumnailweui_cell_hd、bodyweui_cell_bd、accessoryweui_cell_ft三部分組成，cell采用自適應(yīng)布局，在需要自適應(yīng)的部分加上classweui_cell_primary即可。

WeUIDialog：

若系統(tǒng)的alert窗體無法滿足網(wǎng)頁的臨時視圖內(nèi)容需求，則可以自定義實(shí)現(xiàn)與alert形式相似的dialog，并且在dialog中可以自定義地使用各種控件，來滿足需求。

WeUI Progress

WeUI Toast

toast用于臨時顯示某些信息，并且會在數(shù)秒后自動消失。這些信息通常是輕量級操作的成功、失敗或等待狀態(tài)信息。

WeUI Msg Page

結(jié)果頁通常來說可以認(rèn)為進(jìn)行一系列操作步驟后，作為流程結(jié)束的總結(jié)性頁面。結(jié)果頁的作用主要是告知用戶操作處理結(jié)果以及必要的相關(guān)細(xì)節(jié)(可用于確認(rèn) 之前的操作是否有誤)等信息;若該流程用于開啟或關(guān)閉某些重要功能，可在結(jié)果頁增加與該功能相關(guān)的描述性內(nèi)容;除此之外，結(jié)果頁也可以承載一些附加價值操 作，例如提供抽獎、關(guān)注公眾號等功能入口。

WeUI Article

文字視圖顯示大段文字，這些文字通常是頁面上的主體內(nèi)容。Article支持分段、多層標(biāo)題、引用、內(nèi)嵌圖片、有/無序列表等富文本樣式，并可響應(yīng)用戶的選擇操作。

在微信客戶端webview中使用Article，必須保證文字有足夠的可讀性和可辨識性、使用規(guī)范字體、保證足夠的段間距、段首無縮進(jìn)。

WeUI Icon

下載+文檔：http://lihongxun945.github.io/jquery-weui/

名稱欄目：水煮魚SEO:weui的jQuery實(shí)現(xiàn)版
當(dāng)前路徑：http://www.rwnh.cn/news35/221185.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站收錄、企業(yè)網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)