本篇教程探討了HTML5教程 如何使用原生UI，希望閱讀本篇文章以后大家有所收獲，幫助大家HTML5+CSS3從入門到精通 。

<

原生UI的設計目的

HTML和css有一個優勢就是靈活的樣式設計。在大多數情況下，我們都應該使用HTML+css來負責UI。但是有些情況下，我們發現HTML+css的UI不滿足需求。

1.?絕對置頂HTML的video等元素，以及5+的map等原生元素，這些原生控件的層級高于div。對于一些彈出的需要置頂的控件，會造成div模式的控件無法絕對置頂，就像在web開發里彈出的div被flash遮住一樣。使用div方式開發的如下彈出控件：alert、confirm、actionSheet、waiting、date、time、prompt、toast，都存在這個問題。為此，HTML5+擴展了上述native級別的UI控件，保證可以絕對置頂。

2.?跨webview如果界面使用webview方式的tab選項卡，但想從底部彈出一個菜單actionsheet，此時使用div方式的彈出菜單由于無法跨webview，只能看到一部分。此時就需要使用nativeUI里的actionsheet才能跨webview。

3.?全屏遮罩彈出控件時，需要對整個屏幕的其他部分做陰影遮罩。使用div遮罩，同樣無法蒙住video、map等原生控件，也無法跨webview。而且原生的遮罩還可以蒙住手機頂部狀態條，這都是div遮罩做不到的。HTML5+擴展的nativeUI控件，保證可以全屏遮罩。

原生UI的特點

為解決上述問題，HTML5+提供了原生ui，分別在

1.?plus.nativeUI規范。plus.nativeUI對原生的常用彈出型UI控件做了封裝，包括警告框、確認框、彈出輸入框、彈出底部菜單、等待框、可自動消失的提示條等。參考：http://www.html5plus.org/#specification#/specification/nativeUI.html2.?plus.nativeobj規范。與nativeUI不同plus.nativeobj提供的是底層的繪圖和寫字功能，?參考：http://html5plus.org/doc/zh_cn/nativeobj.htmlhttp://ask.dcloud.net.cn/article/665

原生UI的特點有：1.?絕對置頂，不擔心被其他原生控件遮擋2.?可以跨webview顯示3.?全屏遮罩，保證手機屏幕其他部分處于蒙灰狀態4.?原生樣式及高性能體驗nativeUI的特點是，調用OS的UI控件，確保和本機體驗一致。在iOS6、iOS7+、Android2.3、Android4.x、Android5上，OS是不同的設計風格，但彈出框和當前OS風格一致。并且原生的控件展示，比div+css的方式執行效率更高。

nativeUI的局限性

相比div+css，plus.nativeUI也有一個缺點就是可定制性差。開發者無法使用css修飾這些彈出控件的樣式，它們長的、且只能長得和本機OS的風格一樣。所以在需要個性化設計控件且不在意絕對置頂、跨webview、全屏遮罩這些問題時，也可以使用div+css方式制作彈出控件。plus.nativeobj的view由于可以自己貼圖寫字，定制型比較強，但使用較復雜。這里有對nativeobj的view的描述http://ask.dcloud.net.cn/article/665

mui框架的封裝

與nativeUI不同，mui同時也補充封裝了一些div方式的彈出控件。包括div方式的alert、confirm、actionSheet、popover...，可以在nativeUI遇到限制時使用。另外如果要同時多端發布到非5+環境下比如微信公眾號里時，則使用mui.alert會自動判斷切換，在5+環境下調用plus.nativeUI.alert，在非5+環境下則使用div模式。

彈出半透明的webview，萬能但消耗內存

有時我們發現nativeUI彈出的東西沒法滿足定制需求，而div方式的彈出控件又無法絕對置頂。除了nativeobj的view外，還有一種辦法，就是多消耗點內存，即干脆彈出一個非全屏半透明webview。webview的WebviewStyle對象中可以設置zindex來置頂，可以設置高寬，可以設置遮罩，可以設置透明度。在webview里可以隨便自定義界面，然后通過webview的evaljs方法做webview之間的窗體通訊并返回結果。

本文由職坐標整理并發布，希望對同學們有所幫助。了解更多詳情請關注職坐標WEB前端HTML5/CSS3頻道！

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的html怎么用ui打开,HTML5教程 如何使用原生UI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。