2022-12-10 分類: 網站建設
WeUI 是一套同微信原生視覺體驗一致的H5 UI 基礎樣式庫,由微信官方設計團隊為微信 Web 開發量身設計,它只提供了一組CSS組件,可以令用戶的使用感知更加統一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。
jQuery WeUI 中使用的是官方 WeUI 的 CSS 代碼,并提供了 jQuery/Zepto 版本的 API 實現。因為直接使用了官方的 CSS,所以你不用擔心跟官方版本的沖突。實際上 jQuery WeUI == WeUI + jQuery 插件。
如果你使用過 jQuery,那么你使用 jQuery WeUI 將沒有任何障礙,所有的 JS 組件都是標準的 jQuery 插件:
$.alert("我是一個對話框");//彈出一個actionsheet$.actions({ actions: [{ text: "編輯", onClick: function() { //do something } },{ text: "刪除", onClick: function() { //do something } }]});其中 weui.css 是官方的版本,并未做任何修改。
WeUIButton:
按鈕可以使用a或者button標簽。wap上要觸發按鈕的active態,必須觸發ontouchstart事件,可以在body上加上ontouchstart=""全局觸發。
按鈕常見的操作場景:確定、取消、警示,分別對應class:weui_btn_primary、weui_btn_default、weui_btn_warn,每種場景都有自己的置灰態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:
若系統的alert窗體無法滿足網頁的臨時視圖內容需求,則可以自定義實現與alert形式相似的dialog,并且在dialog中可以自定義地使用各種控件,來滿足需求。
WeUI Progress
WeUI Toast
toast用于臨時顯示某些信息,并且會在數秒后自動消失。這些信息通常是輕量級操作的成功、失敗或等待狀態信息。
WeUI Msg Page
結果頁通常來說可以認為進行一系列操作步驟后,作為流程結束的總結性頁面。結果頁的作用主要是告知用戶操作處理結果以及必要的相關細節(可用于確認 之前的操作是否有誤)等信息;若該流程用于開啟或關閉某些重要功能,可在結果頁增加與該功能相關的描述性內容;除此之外,結果頁也可以承載一些附加價值操 作,例如提供抽獎、關注公眾號等功能入口。
WeUI Article
文字視圖顯示大段文字,這些文字通常是頁面上的主體內容。Article支持分段、多層標題、引用、內嵌圖片、有/無序列表等富文本樣式,并可響應用戶的選擇操作。
在微信客戶端webview中使用Article,必須保證文字有足夠的可讀性和可辨識性、使用規范字體、保證足夠的段間距、段首無縮進。
WeUI Icon
下載+文檔:http://lihongxun945.github.io/jquery-weui/
名稱欄目:水煮魚SEO:weui的jQuery實現版
當前路徑:http://m.newbst.com/news35/221185.html
成都網站建設公司_創新互聯,為您提供定制開發、網站設計公司、網站收錄、企業網站制作、網頁設計公司、網站排名
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容