小編給大家分享一下如何使用移動HTML5前端框架MUI,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯(lián)主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁視覺設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式成都網(wǎng)站建設(shè)、手機(jī)網(wǎng)站制作設(shè)計(jì)、微商城、網(wǎng)站托管及網(wǎng)站維護(hù)、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為效果圖設(shè)計(jì)行業(yè)客戶提供了網(wǎng)站開發(fā)服務(wù)。
一、 使用該框架之前的準(zhǔn)備工作
1. 新建含mui的HTML文件
在Hbuilder中,新建HTML文件,選擇”含mui的HTML“模板,可以快速生成mui頁面模板,該模板默認(rèn)處理了mui的js、css資源引用。
2.輸入mheader
頂部標(biāo)題欄是每個頁面都必需的內(nèi)容,在Hbuilder中輸入mheader,可以快速生成頂部導(dǎo)航欄。
3.輸入mbody
除頂部導(dǎo)航、底部選項(xiàng)卡兩個控件之外,其它控件都建議放在.mui-content
控件內(nèi),在Hbuilder中輸入mbody,可快速生成包含.mui-content
的代碼塊。
二、UI組件
1.accordion(折疊面板)
折疊面板和二級列表類似,如下:
<ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板1</a> <div class="mui-collapse-content"> <p>面板1子內(nèi)容</p> </div> </li> </ul> <ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板2</a> <div class="mui-collapse-content"> <p>面板2子內(nèi)容</p> </div> </li> </ul>
2.buttons(按鈕)
普通按鈕
在button節(jié)點(diǎn)上增加.mui-btn
類,就可以生成默認(rèn)按鈕;如果需要其他顏色的按鈕,則繼續(xù)增加對應(yīng)class即可,比如.mui-btn-blue
即可變成藍(lán)色按鈕
<button type="button" class="mui-btn">默認(rèn)</button> <button type="button" class="mui-btn mui-btn-primary">藍(lán)色</button> <button type="button" class="mui-btn mui-btn-success">綠色</button> <button type="button" class="mui-btn mui-btn-warning">黃色</button> <button type="button" class="mui-btn mui-btn-danger">紅色</button> <button type="button" class="mui-btn mui-btn-royal">紫色</button>
運(yùn)行之后的效果如下:
若希望無底色、有邊框的按鈕,僅需增加.mui-btn-outlined
類即可,代碼如下:
<button type="button" class="mui-btn mui-btn-outlined">默認(rèn)</button> <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">藍(lán)色</button> <button type="button" class="mui-btn mui-btn-success mui-btn-outlined">綠色</button> <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黃色</button> <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">紅色</button> <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button>
運(yùn)行結(jié)果如下:
3.gallery(圖片輪播)
圖片輪播繼承自slide插件,因此其DOM結(jié)構(gòu)、事件均和slide插件相同;
默認(rèn)不支持循環(huán)播放,DOM結(jié)構(gòu)如下:
<div class="mui-slider"> <div class="mui-slider-group"> <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div> </div> </div>
假設(shè)當(dāng)前圖片輪播中有1、2、3、4四張圖片,從第1張圖片起,依次向左滑動切換圖片,當(dāng)切換到第4張圖片時,繼續(xù)向左滑動,接下來會有兩種效果:
支持循環(huán):左滑,直接切換到第1張圖片;
不支持循環(huán):左滑,無反應(yīng),繼續(xù)顯示第4張圖片,用戶若要顯示第1張圖片,必須連續(xù)向右滑動切換到第1張圖片;
當(dāng)顯示第1張圖片時,繼續(xù)右滑是否顯示第4張圖片,是同樣問題;這個問題的實(shí)現(xiàn)需要通過.mui-slider-loop
類及DOM節(jié)點(diǎn)來控制;
若要支持循環(huán),則需要在.mui-slider-group
節(jié)點(diǎn)上增加.mui-slider-loop
類,同時需要重復(fù)增加2張圖片,圖片順序變?yōu)椋?、1、2、3、4、1,代碼示例如下:
<div class="mui-slider"> <div class="mui-slider-group mui-slider-loop"> <!--支持循環(huán),需要重復(fù)圖片節(jié)點(diǎn)--> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div> <!--支持循環(huán),需要重復(fù)圖片節(jié)點(diǎn)--> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div> </div> </div>
mui框架內(nèi)置了圖片輪播插件,通過該插件封裝的JS API,用戶可以設(shè)定是否自動輪播及輪播周期,如下為代碼示例:
//獲得slider插件對象 var gallery = mui('.mui-slider'); gallery.slider({ interval:3000//自動輪播周期,若為0則不自動播放,默認(rèn)為0; });
因此若希望圖片輪播不要自動播放,而是用戶手動滑動才切換,只需要通過如上方法,將interval參數(shù)設(shè)為0即可。
若要跳轉(zhuǎn)到第x張圖片,則可以使用圖片輪播插件的gotoItem方法,例如:
//mui自帶的on事件綁定,只能用事件委派方式 mui(".mui-content").on("tap","#btn",function(){ gallery.slider().gotoItem(2);//調(diào)到第三張圖片,index從0開始 });
4.input(輸入表單)
所有包裹在.mui-input-row
類中的 input、textarea等元素都將被默認(rèn)設(shè)置寬度屬性為width: 100%;
。 將 label 元素和上述控件控件包裹在.mui-input-group
中可以獲得最好的排列。
(密碼輸入框右側(cè)還自帶了一個眼睛圖標(biāo)呢,我覺得特別好用)
代碼如下:
<form class="mui-input-group"> <div class="mui-input-row"> <label>用戶名</label> <input type="text" class="mui-input-clear" placeholder="請輸入用戶名"> </div> <div class="mui-input-row"> <label>密碼</label> <input type="password" class="mui-input-password" placeholder="請輸入密碼"> </div> </form>
mui目前還提供了幾個輸入增強(qiáng)功能:快速刪除、語音輸入*5+ only和密碼框顯示隱藏密碼。
1)快速刪除:只需要在input控件上添加.mui-input-clear
類,當(dāng)input 控件中有內(nèi)容時,右側(cè)會有一個刪除圖標(biāo),點(diǎn)擊會清空當(dāng)前input的內(nèi)容
代碼如下:
<form class="mui-input-group"> <div class="mui-input-row"> <label>快速刪除</label> <input type="text" class="mui-input-clear" placeholder="請輸入內(nèi)容"> </div> </form>
2)搜索框:在.mui-input-row
同級添加.mui-input-search
類,就可以使用search控件
代碼如下:
<div class="mui-input-row mui-search"> <input type="search" class="mui-input-clear" placeholder=""> </div>
3)語音輸入*5+ only:為了方便快速輸入,mui集成了HTML5+的語音輸入,只需要在對應(yīng)input控件上添加.mui-input-speech
類,就可以在5+環(huán)境下使用語音輸入
4)密碼框:給input元素添加.mui-input-password
類即可使用
代碼如下:
<form class="mui-input-group"> <div class="mui-input-row"> <label>密碼框</label> <input type="password" class="mui-input-password" placeholder="請輸入密碼"> </div> </form>
5.list(列表)
mui封裝的列表組件是比較簡單也很好用的。只需要在ul
節(jié)點(diǎn)上添加.mui-table-view
類、在li
節(jié)點(diǎn)上添加.mui-table-view-cell
類即可
<ul class="mui-table-view"> <li class="mui-table-view-cell">Item 1</li> <li class="mui-table-view-cell">Item 2</li> <li class="mui-table-view-cell">Item 3</li> </ul>
運(yùn)行結(jié)果如下圖:
自定義列表高亮顏色
點(diǎn)擊列表,對應(yīng)列表項(xiàng)顯示灰色高亮,若想自定義高亮顏色,只需要重寫.mui-table-view-cell.mui-active
即可,如下:
/*點(diǎn)擊變灰色高亮*/ .mui-table-view-cell.mui-active{ background-color: gray; }
右側(cè)添加導(dǎo)航箭頭
若右側(cè)需要增加導(dǎo)航箭頭,變成導(dǎo)航鏈接,則只需在li
節(jié)點(diǎn)下增加a
子節(jié)點(diǎn),并為該a
節(jié)點(diǎn)增加.mui-navigate-right
類即可,如下:
<ul class="mui-table-view"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 1</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 3</a> </li> </ul>
運(yùn)行結(jié)果如下:
右側(cè)添加數(shù)字角標(biāo)等控件
mui支持將數(shù)字角標(biāo)、按鈕、開關(guān)等控件放在列表中;mui默認(rèn)將數(shù)字角標(biāo)放在列表右側(cè)顯示,代碼如下:
<ul class="mui-table-view"> <li class="mui-table-view-cell">Item 1 <span class="mui-badge mui-badge-primary">1</span> </li> <li class="mui-table-view-cell">Item 2 <span class="mui-badge mui-badge-success">2</span> </li> <li class="mui-table-view-cell">Item 3 <span class="mui-badge">3</span> </li> </ul>
運(yùn)行結(jié)果如下:
(圖文列表)
圖文列表繼承自列表組件,主要添加了.mui-media
、.mui-media-object
、.mui-media-body
、.mui-pull-left/right
幾個類,如下為示例代碼
<ul class="mui-table-view"> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="img/a.jpg"> <div class="mui-media-body"> 幸福 <p class='mui-ellipsis'>能和心愛的人一起睡覺,是件幸福的事情;可是,打呼嚕怎么辦?</p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="img/b.jpg"> <div class="mui-media-body"> 木屋 <p class='mui-ellipsis'>想要這樣一間小木屋,夏天挫冰吃瓜,冬天圍爐取暖.</p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="img/c.jpg"> <div class="mui-media-body"> CBD <p class='mui-ellipsis'>烤爐模式的城,到黃昏,如同打翻的調(diào)色盤一般.</p> </div> </a> </li> </ul>
運(yùn)行結(jié)果如下:
看完了這篇文章,相信你對“如何使用移動HTML5前端框架MUI”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
當(dāng)前標(biāo)題:如何使用移動HTML5前端框架MUI
新聞來源:http://www.rwnh.cn/article26/pcojcg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、網(wǎng)站制作、靜態(tài)網(wǎng)站、建站公司、定制網(wǎng)站、移動網(wǎng)站建設(shè)
聲明:本網(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)