2022-12-10 分類: 網(wǎng)站建設(shè)
WeUI 是一套同微信原生視覺(jué)體驗(yàn)一致的H5 UI 基礎(chǔ)樣式庫(kù),由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信 Web 開(kāi)發(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 插件。
如果你使用過(guò) jQuery,那么你使用 jQuery WeUI 將沒(méi)有任何障礙,所有的 JS 組件都是標(biāo)準(zhǔn)的 jQuery 插件:
$.alert("我是一個(gè)對(duì)話框");//彈出一個(gè)actionsheet$.actions({ actions: [{ text: "編輯", onClick: function() { //do something } },{ text: "刪除", onClick: function() { //do something } }]});其中 weui.css 是官方的版本,并未做任何修改。
WeUIButton:
按鈕可以使用a或者button標(biāo)簽。wap上要觸發(fā)按鈕的active態(tài),必須觸發(fā)ontouchstart事件,可以在body上加上ontouchstart=""全局觸發(fā)。
按鈕常見(jiàn)的操作場(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:
WeUICell:
Cell,列表視圖,用于將信息以列表的結(jié)構(gòu)顯示在頁(yè)面上,是wap上最常用的內(nèi)容結(jié)構(gòu)。Cell由多個(gè)section組成,每個(gè)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ú)法滿足網(wǎng)頁(yè)的臨時(shí)視圖內(nèi)容需求,則可以自定義實(shí)現(xiàn)與alert形式相似的dialog,并且在dialog中可以自定義地使用各種控件,來(lái)滿足需求。
WeUI Progress
WeUI Toast
toast用于臨時(shí)顯示某些信息,并且會(huì)在數(shù)秒后自動(dòng)消失。這些信息通常是輕量級(jí)操作的成功、失敗或等待狀態(tài)信息。
WeUI Msg Page
結(jié)果頁(yè)通常來(lái)說(shuō)可以認(rèn)為進(jìn)行一系列操作步驟后,作為流程結(jié)束的總結(jié)性頁(yè)面。結(jié)果頁(yè)的作用主要是告知用戶操作處理結(jié)果以及必要的相關(guān)細(xì)節(jié)(可用于確認(rèn) 之前的操作是否有誤)等信息;若該流程用于開(kāi)啟或關(guān)閉某些重要功能,可在結(jié)果頁(yè)增加與該功能相關(guān)的描述性內(nèi)容;除此之外,結(jié)果頁(yè)也可以承載一些附加價(jià)值操 作,例如提供抽獎(jiǎng)、關(guān)注公眾號(hào)等功能入口。
WeUI Article
文字視圖顯示大段文字,這些文字通常是頁(yè)面上的主體內(nèi)容。Article支持分段、多層標(biāo)題、引用、內(nèi)嵌圖片、有/無(wú)序列表等富文本樣式,并可響應(yīng)用戶的選擇操作。
在微信客戶端webview中使用Article,必須保證文字有足夠的可讀性和可辨識(shí)性、使用規(guī)范字體、保證足夠的段間距、段首無(wú)縮進(jìn)。
WeUI Icon
下載+文檔:http://lihongxun945.github.io/jquery-weui/
網(wǎng)站題目:水煮魚(yú)SEO:weui的jQuery實(shí)現(xiàn)版
文章網(wǎng)址:http://jinyejixie.com/news/221185.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、用戶體驗(yàn)、營(yíng)銷型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、品牌網(wǎng)站建設(shè)、App設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容