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

jQuery WeUI 中使用的是官方 WeUI 的 CSS 代碼，并提供了 jQuery/Zepto 版本的 API 實現(xiàn)。因為直接使用了官方的 CSS，所以你不用擔心跟官方版本的沖突。實際上 jQuery WeUI == WeUI + jQuery 插件。

如果你使用過 jQuery，那么你使用 jQuery WeUI 將沒有任何障礙,所有的 JS 組件都是標準的 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標簽。wap上要觸發(fā)按鈕的active態(tài)，必須觸發(fā)ontouchstart事件，可以在body上加上ontouchstart=""全局觸發(fā)。

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

WeUICell：

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

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

WeUIDialog：

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

WeUI Progress

WeUI Toast

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

WeUI Msg Page

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

WeUI Article

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

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

WeUI Icon

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

名稱欄目：水煮魚SEO:weui的jQuery實現(xiàn)版
當前路徑：http://jinyejixie.com/news35/221185.html

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

廣告

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