HTML5移動應用開發新的可視化UI特性怎么實現

這篇文章主要介紹“HTML5移動應用開發新的可視化UI特性怎么實現”，在日常操作中，相信很多人在HTML5移動應用開發新的可視化UI特性怎么實現問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5移動應用開發新的可視化UI特性怎么實現”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

先決條件

在這里中，您將使用最新的Web技術開發Web應用程序。這里的大部分代碼只是HTML，JavaScript和CSS —所有Web發人員的核心技術。所需的最重要的工具是用于進行測試的瀏覽器。此處大部分代碼將在最新桌面瀏覽器上運行，但也有一些例外，我們將在文章中進行說明。當然，您也必須在移動瀏覽器上測試，從而，您需要最新的iPhone和Android SDK。

通過Canvas實現圖形效果

多年以來，Web開發人員一直在重復畫布上。現在，為什么還有人會重復瀏覽器中的一個原生畫圖API呢？然后，它允許您創建某種圖形界面，否則您將需要某種瀏覽器插件（每Web開發人員抱怨Canvas的原因是：盡管現在它可用于Firefox和Safari已經很多年，但最流行的桌面瀏覽甚至Internet Explorer 9的早期版本也不支持Canvas。因此，多年來，Canvas一直是最大的技術笑話。您可能會發現，這些令人驚嘆的Canvas樣例多層整個Internet，但您不能僅僅因為Internet Explorer不支持它就將它用作其他大多數Web應用程序。幸運的是，對于移動Web開發人員來說，Canvas沒有這樣的限制。您瞄準的所有基于Webkit的瀏覽器都能實現Canvas并極大地優化其性能。

Canvas API是一個低級畫圖API，它支持創建直線，曲線，矩形和圓圈，并使用彩色，漸變色等填充它們。在Canvas上，您可以創建文本，執行多種的幾何轉換。可以想見，這樣的API的用途是無限的。我們來看一個使用Canvas來創建一個圖形報告的應用程序。圖1展示了該應用程序的屏幕截圖：一個顯示每年結果的柱狀圖。

圖1.運行在Android瀏覽器上的基于Canvas的報告應用程序

運行在Android瀏覽器上的基于Canvas的報告應用程序的屏幕截圖 

圖1所顯示的不是瀏覽器中的一幅靜態圖像。這個報告圖形是使用這個Canvas API實時生成的。清單1展示了創建這個報告的HTML。

清單1.報告HTML

XML / HTML代碼將內容復制到文本

<！DOCTYPE html >  

< html >  

<頭>  

    < meta http-equiv = “ Content-Type”內容= “ text / html; charset = UTF-8” >    

    < meta name = “ viewport” content =“寬度=設備寬度； 初始比例= 1 .0;     

        最大比例= 1 .0; 用戶可縮放= 0 ;“ />  

    < meta name = “ apple-touch-fullscreen”內容= “ YES” />     

    < title > HTML 5報告</ title >  

    <腳本類型= “ text / javascript” >   

        函數init（）{  

            var  data  = [{year：“ 2007”，sales：49}，  

                {year：“ 2008”，sales：131}，  

                {year：“ 2009”，sales：294}，   

                {year：“ 2010”，sales：405}]]；  

            var  report  = {x：“年”，  

                    y：“銷售”，  

                    值：數據};  

            圖表（report，350，300）;  

        }  

    </腳本>  

</頭>  

<正文onload = “ init（）” >   

    < canvas id = “ graph” > </ canvas >   

</ body >  

</ html >      

這個清單展示了基本的HTML結構。這個文檔的主體擁有一個單一的canvas標記。在init函數（在文檔主體加載時調用）中，您定義的靜態數據（報告數據）將其傳遞到圖形函數。這里將報告定義為靜態數據，但很容易將其想象為使用Ajax通過網絡動態下載。report函數包含所有有趣的代碼，我們來看看清單2。

清單2. graph函數

JavaScript代碼將內容復制到

函數 圖（報告，maxWidth，maxHeight）{  

    var  data = report.values;  

    var  canvas = document.getElementById（“ graph” ）;  

    var  axisBuffer = 20;  

    canvas.height = maxHeight + 100;  

    canvas.width = maxWidth;  

    var  ctx = canvas.getContext（“ 2d” ）;  

    var  width = 50;  

    var  buffer = 20;  

    var  i = 0;  

    var  x =緩沖區+ axisBuffer;  

    ctx.font =  “粗體12px sans-serif” ;  

    ctx.textAlign =  “開始” ;  

    對于 （i = 0; i <data.length; i ++）{  

        ctx.fillStyle = “ rgba（ 0，0，200，0.9  ）” ;  

        ctx.fillRect（x，maxHeight-（data [i] [report.y] / 2），   

                 寬度，（data [i] [report.y] / 2））；  

        ctx.fillStyle = “ rgba（ 0，0，0，0.9  ）” ;  

        ctx.fillText（data [i] [report.x]，x +（width / 4），maxHeight + 15）;  

        x + =寬度+緩沖區;  

    }  

    //繪制水平軸  

    ctx.moveTo（axisBuffer，maxHeight）;  

    ctx.lineTo（axisBuffer + maxWidth，maxHeight）;  

    ctx.strokeStyle =  “黑色” ;  

    ctx.stroke（）;  

    //繪制垂直軸  

    ctx.moveTo（axisBuffer，0）;  

    ctx.lineTo（axisBuffer，maxHeight）;  

    ctx.stroke（）;  

    //繪制網格線  

    var  lineSpacing = 50;  

    var  numLines = maxHeight / lineSpacing;  

    var  y = lineSpacing;  

    ctx.font =  “ 10px sans-serif” ;  

    ctx.textBaseline =  “中間” ;  

    對于 （i = 0; i <numLines; i ++）{  

        ctx.strokeStyle =  “ rgba（0,0,0,0.25）” ;  

        ctx.moveTo（axisBuffer，y）;  

        ctx.lineTo（axisBuffer + maxWidth，y）;  

        ctx.stroke（）;  

        ctx.fillStyle = “ rgba（ 0,0,0，0.75  ）” ;  

        ctx.fillText（“” +（2 *（maxHeight -y）），0，y）;  

        y + = lineSpacing;   

    }  

}  

在這個函數的第一部分中，您建立了創建這個報告需要的對象，尺寸畫布的寬度和高度，填充變量等。您還創建了畫布對象，因為這是用于進行所有實際畫圖的對象。然后，您通過迭代報告數據，繪制圖1中的柱狀圖。首先，您設置fillStyle屬性。這就像設置一個顏色一樣簡單，您使用CSS時也可能會生成。在本例中，使用rgba標記來設置顏色，以及alpha值（這是顏色的短暫，稍后我們討論奇妙的CSS3世界時時引入這個參數）。設置fillStyle屬性后，使用fillRect API來為數據點創建柱狀圖。此處，您指定這個矩形，起點（x，y）以及它的高度和寬度。接下來，您重新定義fillStyle，因為您想打印一些文本，作為報告的一部分。您使用fillText API來在畫布上繪制文本。您對每個數據點都執行這個操作，為每個數據點創建一個柱狀圖，其下帶有一個標簽。

接下來，您需要重新設置此圖形的其他部分&mdash;尺寸和網格線。首先，放置水平和垂直垂直。對于每條變量，使用moveTo API來設置開始直線直線的起點。然后使用lineTo API來從這個。注意，這并不實際放置一條直線；相反，您調用描邊API來替換這條直線。對齊水平和垂直上方后，放置它們的標簽布局網格線，方法是均勻間隔本身，然后使用相同的moveTo，lineTo和stroke組合來繪制這些直線。

這就是以編程方式創建這個報告圖形所需的所有代碼。在這個示例中，您已經看到了很多最重要的，也是最常使用的畫布API，但還有其他幾個API（用作著色曲線） ）。您可以使用這些API完成一些令人震驚的任務，這些任務可以在任何基于Webkit的瀏覽器上完成。如果您的目標不是布局圖形，HTML 5仍舊有很多格式為級聯樣式表（CSS）3.0的新視覺圖像。

奇妙的CSS3世界

正確的HTML 5，您可能會馬上想到HTML標記。當然，HTML 5肯定包含新標記，我們將在下一小節中查看其中的部分新標記。在上一小節中，您看到了如何使用一個<canvas>但是，大部分代碼是JavaScript。HTML只是HTML 5的一部分&mdash; JavaScript和CSS也是同樣重要的部分。HTML5中的許多新用戶界面元素由CSS標準的最新版本。 CSS 3.0提供。在圖2中，一個使用多個CSS 3.0新技術的Web頁面出現在基于Android的手機和iPhone上。

圖2.移動設備的新CSS功能

比較Android和iPhone移動設備上的新CSS功能的屏幕截圖 

圖2在一個基于Android的設備和iPhone上展示了許多新CSS功能。左邊的圖像來自一個基于Android的設備。它比右邊的圖像尺寸，原因是它來自一個Motorola Droid，它比對右邊的圖像的iPhone 3GS擁有的分辨率更高的屏幕。因此，您在Droid上將看到更多的頁面內容。但是，您可能會看到，標題“葛底斯堡地址”有一個倒影，該倒影在iPhone這只是一個細節提醒：即使基于Android的設備和iPhone都擁有基于Webkit的瀏覽器，但它們之間也也有細微的差異，因此您在測試時必須更加細心。現在看一下生成這個漂亮頁面的代碼（見清單3），首先從頁面頂端開始。

清單3.頁面上半部分的代碼

XML / HTML代碼將內容復制到文本

<！DOCTYPE html >  

< html >  

<頭>  

    <腳本類型= “ text / javascript” >   

        函數$ {id）{  

            返回document.getElementById（id）;  

        }  

        函數init（）{  

            var  i = 0 ;  

            var  row  = {};  

            var  cell  = {};  

            var  topic  = [“ nth-child”，“ gradients”，“ alpha”，“ text effect”，   

                          “反思”，“變革”]；  

            對于（i = 0 ; i < topic.length ; i ++）{  

                行 = 文檔.createElement（“ tr”）;  

                單元格 = 文檔.createElement（“ td”）;  

                cell.appendChild（document.createTextNode（topics [i]））;  

                row.appendChild（cell）;  

                $（“ dtable”）。appendChild（row）;  

            }  

        }  

    </腳本>  

    <樣式類型= “ text / css” >   

        標頭 >  h2 {  

            顏色：黃色；  

            背景：-webkit-gradient（線性，左上，左下，   

                             從（藍色）到（白色））  

        }  

        tr：nth-child（4n + 1）{顏色：海軍；}  

        tr：nth-child（4n + 2）{顏色：綠色；}  

        tr：nth-child（4n + 3）{顏色：栗色；}  

        tr：nth-child（4n + 4）{顏色：紫色；}  

        輸入[ type = “ text” ] {  

            背景：rgba（150，30，30，0.5）;  

        }  

    </ style >  

</頭>  

<正文onload = “ init（）” >   

    <標題>  

        < h2 > CSS3的世界</ h2 >  

        < div >您的瀏覽器支持哪種CSS3？</ div >  

    </標頭>  

    < table id = “ dtable” > </ table >   

    < div id = “ formSection” >   

        <標簽為= “ name” >您叫什么名字？</標簽>   

        <輸入類型= “文本” id = “名稱” > </輸入>    

        < button id = “ rtBtn” onclick = “ rotate（）” >旋轉</ button >    

    </ div >  

</ body >  

</ html >  

清單3中的代碼替換標題“ Gettysburg Address”上方的所有UI。您將稍后看到此頁面的下半部分的代碼。

首先應該檢查頁面標題。如果您查看清單3底部附近的HTML頁面主體，您將看到這個標題實際上位于一個header標記中&mdash;這是HTML 5中一個一個新的HTML元素。

現在看看style元素（位于清單3中的HTML主體上方）。這個文本 的樣式使用帶有選擇器標頭> h2的CSS設置。此規則將文本顏色設置為黃色，同時將其背景設置為藍色和白色。背景應用有梯度。這是您看到的前綴為-webkit的CSS特性的首個示例。您可能會出錯，這個指向使這個CSS專為Webkit的瀏覽器。但是，在眾多情況下，這些情況是CSS 3.0標準的一部分，但它們本身在這個標準中還在不斷微小變化的部分。大量情況下，Webkit瀏覽器和基于Mozilla Firefox的瀏覽器都已經實現了這些特性。如果您的開發也需要針對Mozilla瀏覽器（Firefox的移動版本Fennec，該版本在歐洲的諾基亞智能手機上迅速流行起來），那么您通常可以將-webkit逐步更改為-moz。

如圖2所示，當您顯示該表的內容時，相鄰兩行的顏色各不相同。這個任務使用下一個CSS部分&mdash; tr：nth -child聲明&mdash;來完成。可以在任意重復的元素上使用nth-child聲明。您傳遞一個使用謂詞的公式，檢查它是否是一個有效的元素規則。在本例中，您聲明表單行號為4n + 1（1、5、9，等等）的行的顏色為海軍藍，表單行號為4n + 2（2、6、10，等等）的行的顏色為綠色，以此類推，其余過去，您經常需要對表，列表等組件實現類似的視覺效果，但通常是通過繁瑣的JavaScript來實現。

最后的視覺元素是紅色的文本分支，帶有標簽 和文本按鈕旋轉。這個文本字段的紅色是使用一個特定于類型的輸入選擇器實現的。換句話說，這是一個CSS規則，只適用于類型為text的輸入元素。現在，您可能想知道Rotate Button到底作用何在？看看清單4中的代碼就明白了，該代碼調用一個稱為rotate的函數。

清單4.使用CSS的JavaScript rotation函數

JavaScript代碼將內容復制到

函數 rotate（）{  

    $（“ formSection” ）.style [ “ -webkit-transform” ] =  “ rotateZ（-5deg）” ;  

    $（“ formSection” ）.style [ “ -webkit-transition” ] =   

          “ -webkit-transform 2s輕松輸入輸出” ；  

    $（“ rtBtn” ）. innerHTML =  “撤消” ;  

    $（“ rtBtn” ）.onclick =  function （）{  

        $（“ formSection” ）.style [ “ -webkit-transform” ] =  “” ;  

        $（“ rtBtn” ）. innerHTML =  “旋轉” ;  

        $（“ rtBtn” ）. setAttribute （“ onclick” ，  “ rotate（）” ）;  

    }  

}  

這個旋轉函數使用JavaScript來更改應用到稱為formSection的div的CSS。（注意：您正在將$（）使用document.getElementById（）的一個別名。）要旋轉這個div，將它的-webkit-transform樣式設置為rotateZ（-5deg），將其逆時針旋轉5度。然后，將-webkit-transform樣式設置為-webkit-transform 2s easy-in-out。這使旋轉耗時兩秒鐘，緩慢啟動，加速，然后在最后再次減速。在圖3中，左邊顯示您叫什么名字？平行旋轉之前的初始位置；右邊顯示該分支部分旋轉后的視覺效果及其撤消按鈕。

圖3.旋轉HTML元素

在一個移動設備上旋轉HTML元素的屏幕截圖 

參見參考資料中的鏈接查看這個效果在Chrome，Safari 4和Opera等兼容HTML 5的瀏覽器上的實際運行情況。

現在我們轉到圖2中的頁面的下半部分。這里您看到幾個有趣的圖像，文本效果以及布局示例。清單5顯示了相關代碼。

清單5.圖2的下半部分代碼

XML / HTML代碼將內容復制到文本

<！DOCTYPE html >  

< html >  

<頭>  

    <樣式類型= “ text / css” >   

        h3 {  

            -webkit-text-fill-color：藍色；  

            -webkit-text-stroke-color：黃色；  

            -webkit-text-stroke-width：1.5px;  

            背景：-webkit-gradient（radial，430 50，0，430 50，200，from（red），   

到（＃000））;  

            -webkit-box-reflect：5px以下-webkit-gradient（線性，左上，左   

底部，從（透明），色標（0.5，透明），到（白色））;  

        }  

        h4 {  

            顏色：rgba（0,0,255,0.75）;  

            背景：rgba（255,255,0,0.5）;  

        }  

        .xyz {  

            文字陰影：＃6374AB 4px -4px 2px;  

            空白：nowrap;  

            寬度：14em;   

            高度：2em；   

            溢出：隱藏；  

            文字溢出：省略號；   

            邊框：1px實線#bbb;   

            border-radius：9px;               

            背景顏色：#fff;  

        }  

        .abc {  

            邊框：1px實線＃000；  

            border-radius：9px;          

            -webkit-column-count：4;  

            -webkit-column-rule：1px solid＃a00;  

            -webkit-column-gap：0.75em;  

        }  

    </ style >  

</頭>  

<正文onload = “ init（）” >   

    < h3 >葛底斯堡地址</ h3 >  

    < h4 >賓夕法尼亞州葛底斯堡，亞伯拉罕&middot;林肯。1863年11月19日</ h4 >  

    < div class = “ xyz” >   

        四分制和七年前，我們的父親在這方面提出了   

        大洲一個自由自由孕育并致力于   

            人人平等創造的主張。  

    </ div >  

    < div class = “ abc” >   

        現在我們正在進行一場內戰，測試是否   

            民族，或任何一個如此懷念，如此敬業的國家，   

            忍受。我們在那場戰爭的偉大戰場上相遇。我們有   

            來奉獻該領域的一部分，作為最后的休息   

            在這里獻出生命的那個人那個國家可能   

            生活。我們應該這樣做完全合適和適當。  

    </ div >  

</ body >  

</ html >  

我們來逐個看看這個代碼中的元素。首先，為“葛底斯堡演說”創建了一個標題，并以幾種方式設置其樣式。

使用-webkit-text-fill-color，-webkit-text-stroke-color和-webkit-text-stroke-width樣式來創建“黃中帶藍”的效果。

通過設置背景樣式-webkit-gradient來在文本后面放置一個紅色黑色背景。注意，這是一個放射狀排列，而導致您看到的是一個線性漸變。這兩種在智能手機上的效果都很好。

通過設置-webkit-box-reflect樣式對標題應用一個倒影。設置這個樣式以在標題下方5個位置處反射標題，反向倒影應用一個漸變效果。這里的效果使倒影看起來好像正在淡出。如果回顧一下圖2，您將看到，Android瀏覽器不支持這個對倒影應用一個漸變的組合：它只是呈現不帶任何排序的倒影。

繼續移動到下一個標題，對它應用一個非常簡單的樣式：文本一種顏色，背景另一種顏色。這兩種顏色都使用rgba函數來指定“紅-綠-藍”值，以及一個alpha亮度值。值1.0完全不透明，值0.0則為透明。

清單5中的下一部分是此處短文的第一段。文本周圍有一個邊界，您使用新的border-radius樣式來實現4個圓角。現在，您在網站上到處都能看到這樣的圓角，它們通常使用圖像來實現。與使用CSS 3.0來實現命名，這種方法真是太老土了。通過使用text-shadow樣式來向這個這一文本的一個文本應用一個陰影。最后，注意區域受到了影響父div的高度和寬度的限制，文本太大了。與在一些較老的瀏覽器中看到的那樣直接截取文本相反，通過設置text-overflow樣式可以看到一個省略的省略號（...）效果。

最后，來到文本的最后部分。它的周圍也有一個邊界，但是注意，它出現在4個帶有列分隔符的列中。變量，設置-webkit-column-count樣式，并設置配套的- webkit-column-rule樣式來獲取這些分隔符。可以想見，如果沒有這些新的CSS 3.0特性，像這樣的格式化文本將會是多么的繁瑣！當您創建簡單的headers和footer（它們同時也是HTML 5中的新元素）時，這也可能是一個很有用的特性。看一下它們以及由HTML 5約會的其他一些新標記。

新語義

HTML 5向HTML標記添加了許多新元素。其中一些元素將導致引導瀏覽器提供一些新的呈現處理。其他一些元素將添加一些稍后可以通過JavaScript變得可用的額外特性。但是，另一些元素則不這些與<span>，<div>和<p>看起來一樣，并且擁有相同的編程接口。但是，它們將添加額外的語義含義。這些新語義針對頁面的非視覺用戶（這些新標記還向開發人員提供了一些鏈接，幫助他們編寫表現力更強的CSS選擇器。圖4展示了包括使用屏幕閱讀器這樣的輔助技術的用戶）和搜索引擎爬蟲這樣的計算機程序很重要。一個使用一些新語義元素的網頁。

圖4. iPhone上的一些新HTML 5元素

iPhone上的新HTML 5元素標題，導航，文章，部分以及一旁的屏幕截圖 

圖4中的這個示例擁有一個header元素，幾個nav元素，一個article元素，一個section元素以及以及一個side元素。這些元素不會導致任何特殊呈現。它們只是添加語義值，您可以使用它們來編寫圖4中顯示的圖片的代碼如清單6所示。

清單6. HTML 5中的新語義元素

XML / HTML代碼將內容復制到文本

<！DOCTYPE html >  

< html >  

<頭>  

< meta http-equiv = “ Content-Type”內容= “ text / html; charset = UTF-8” >    

    < meta name = “ viewport” content =“寬度=設備寬度； 初始比例= 1 .0;     

        最大比例= 1 .0; 用戶可縮放= 0 ;“ />  

    < meta name = “ apple-touch-fullscreen”內容= “ YES” />     

< title >獲取最新標記</ title >  

</頭>  

<身體>  

    <標頭樣式= “邊框：1px點＃000；邊框半徑：3px;” >   

        < hgroup align = “中心” >   

            < h2 >實際文檔具有標題</ h2 >  

            < h3 >即使他們不這么說</ h3 >  

        </ hgroup >  

        < hgroup >  

        < nav style = “ -webkit-column-count：3; -webkit-column-rule：1px solid＃a00;” >   

            <一個HREF = “新css.html” > CSS3 </一> < BR />   

            <一個HREF = “Report.htm1”進行>畫布</一> < BR />   

            <一個HREF = “elements.html” >標記</一>   

        </導航>  

        </ hgroup >  

    </標頭>  

    <文章>  

       < h2 > HTML5中有很多新的標記元素</ h2 >  

       <時間日期時間= “2010-05-16”  pubdate的>星期日，5月16日</時間>   

       <部分>您是否注意到我們只有兩個H1？   

       但這很酷！</部分>  

       < aside style = “空白：nowrap;溢出：隱藏;文本溢出：省略號;” >    

            如果此頁面真的很受歡迎，我會在這里放一個廣告并制作一些  

            大量現金  

        </一旁>  

    </ article >  

</ body >  

</ html >  

注意，您還應用了一些新的CSS樣式來在header周圍創建了一個圓角框，并為nav創建了幾個分隔符。您還在旁邊使用了文本溢出樣式。這里的關鍵點是：無需額外的工作，您就可以創建更重疊的標記，然后，您可以像使用了<div>和<span>一樣顯示該標記。要查看擁有更多視覺和編程效果的新HTML 5元素的一個示例，請看圖5。（查看圖5的文本版本。）

圖5.在iPhone上使用HTML 5創建的表單

在iPhone上使用HTML 5表單元素創建的幾個表單的屏幕截圖 

圖5中的屏幕使用了在HTML 5中可用的許多新表單元素。在很多情況下，這些元素看起來就像現有的元素，但您可以期望瀏覽器添加這些更豐富的表單元素的更好的視覺表示。為展示大致效果，圖6顯示了上述表單元素在Opera桌面瀏覽器中的效果。（查看圖6的文本版本。）

圖6. Opera的HTML 5表單元素

Opera上使用HTML 5表單元素創建的幾個表單的屏幕截圖 

Opera，一直是實現HTML 5特性的先行者，這對于新的表單元素而言尤其如此。現在，看看生成清單4和清單5的代碼，更好地理解Opera之所以采用其呈現方式的原因。清單7顯示了這個代碼。

清單7.代碼形式的HTML 5表單元素

XML/HTML Code復制內容到剪貼板

<form id="settings">  

<fieldset id="inputs" style="border: 1px solid #000;border-radius: 6px;">  

    <legend>Settings</legend>  

    <label for="name">Username</label>  

    <input id="name" name="name" type="text" required autofocus /><br/>  

    <label for="name">Name</label>  

    <input id="name" name="name" type="text"   

          placeholder="First and last name" required /><br/>  

    <label for="email">Email</label>  

    <input id="email" name="email" type="email"             

           placeholder="example@domain.com" required /><br/>  

    <label for="phone">Phone</label>  

    <input id="phone" name="phone" type="tel"   

          placeholder="Eg. +447500000000" required /><br/>  

    <label for="dob">Date of birth</label>  

    <input id="dob" name="dob" type="date" required/>  

    < fieldset style = “邊框：點距1px＃000；邊框半徑：6px” >   

        <圖例>首選聯系方式</圖例>  

        < ol >  

            <李>  

                <輸入id = “ emailMeth”名稱= “ contactMethod”     

                            type = “ radio” >  

                <標簽為= “ emailMeth” >電子郵件</標簽>   

            </ li >  

            <李>  

                <輸入id = “ phoneMeth”名稱= “ contactMethod”     

                            type = “ radio” >  

                <標簽為= “ phoneMeth” >電話</標簽>   

            </ li >  

        </ ol >  

    </ fieldset >  

    <標簽為= “氣候” >優選的外部溫度</標簽>   

    <輸入id = “氣候”名稱= “氣候”類型= “范圍” min = “ 50”       

          最大= “100”步驟= “5”的值= “70” /> < BR />    

    < label for = “ color” >最喜歡的顏色</ label >   

    <輸入ID = “顏色”名稱= “顏色”類型= “顏色” /> < BR />     

    <標簽為= “ referrer” >您從哪里得知我們的？</標簽>   

    <輸入類型= “ url”名稱= “ refUrl” id = “推薦人” list = “ urls” />      

    < datalist id = “ urls” >   

        <選項標簽= “ TechCrunch”值= “ http://www.techcrunch.com/” >    

        <選項標簽= “ ReadWrite Web”值= “ http://www.readwriteweb.com/” >    

        <選項標簽= “ Engadget”值= “ http://www.engadget.com/” >    

        <選項標簽= “ Ajaxian”值= “ http://www.ajaxian.com/” >    

    </數據列表> < BR />  

    < button type = “ button” onclick = “ checkInputs（）” >保存</ button >    

</ fieldset >  

</表單>  

清單7中的表單元素展示了HTML 5的許多新特性。注意兩個新屬性：需要和自動對焦。需要屬性進行表單驗證（以下將詳細介紹）過程中，自動對焦屬性允許選擇頁面上的元素以獲取焦點。還要注意幾個擁有占位符文本的元素。這是許多網站多年來一直在使用的一個模式&mdash;將某個示例或解釋性文本放置到一個文本標記&mdash;但開發人員總是必須修改（hack ）該代碼。圖4展示了iPhone如何整潔地實現這個模式。

接下來，您將看到一些支持輸入元素的新類型，例如電子郵件，電話，日期，范圍，顏色和url。現在，這些類型在iPhone和Android瀏覽器上總是呈現為文本分段，但那只是使用圖5展示了它們未來的可能外觀。date輸入在Opera上展示其新UI（一個插入式日歷）前必須獲得焦點。這對于圖7中的url輸入也同樣適用，但原因不在于它是url輸入，又原因不在于它是一個list屬性。該屬性指向datalist元素，該元素包含該對應的支持的值。當您聚焦該分段時，您將看到來自datalist的可能值（本例中是幾個URL）。圖7展示了日期和數據列表特性。

圖7.帶有日期和數據列表的HTML 5輸入

帶有日期和數據列表的HTML 5輸入的屏幕截圖 

隨著Webkit持續快速發展，可以預見，許多輸入類型將允許提供更有用的視覺表示。Opera將為您帶來更好的未來。許多這些輸入對應也提供驗證，HTML 5擁有完整的新驗證API 。這些特性目前還沒有在iPhone或基于Android的設備上實現，但已經在其的桌面對等設備上實現，因此，預計可以很快在移動瀏覽器上實現這些特性。清單8展示了這些新的驗證API的使用情況。

清單8. HTML 5驗證API的應用

JavaScript代碼將內容復制到

函數 checkInputs（）{  

    var 輸入= document.getElementById（“輸入” ）.childNodes;  

    var  len = inputs.length;  

    var  i = 0;  

    var  input =  null ;  

    var  errors = [];  

    為 （i = 0; i <len; i ++）{  

        輸入= inputs.item（i）;  

        如果 （input.nodeName ==  “ INPUT” ）{  

            如果 （input.validity）{  

                如果 （！input.checkValidity（））{  

                    errors.push（input.validationMessage）;  

                }  

            }  

        }  

    }  

    var  errMsg =  “有”  + errors.length +  “錯誤” ;  

    var  notify =  function （）{  

        var  notification =   

            webkitNotifications.createNotification（null ，  “ Errors！” ，errMsg）;  

        notification.show（）;  

    };  

    如果 （window.webkitNotifications）{  

        如果 （webkitNotifications.checkPermission（））{  

            webkitNotifications.requestPermission（notify）;  

        } 其他 {  

            通知（）;  

        }  

    } 其他 {  

        警報（errMsg）;  

    }  

}  

每個輸入元素擁有一個有效性屬性。可以使用這個屬性，或者，也可以使用返回ture或false的checkValidity（）函數以及驗證消息屬性來獲取一條本地錯誤消息。在此處撰寫之時，多個最新的桌面瀏覽器并不能為validationMessage返回任何一致或標準的消息，因此，它的用途有限。validity可以使用檢查不同類型的錯誤，值缺少，rangeOverflow，rangeUnderflow，patternMismatch和tooLong。例如，如果元素擁有一個必要的屬性而用戶留空，那么validity.valueMissing將為true。

最后，注意，在清單8中，您在明確所有的驗證錯誤之后，將嘗試使用webkitNotifications。這些通知與您的桌面計算機上的通知類似，可使用最新版本Chrome中。因此，您同樣可以期望它們將API的使用很簡單明了。惟一需要注意的是，您需要檢查用戶是否已提供您的站點許可來使用這個API。如果沒有，您必須請求許可；反之，則傳遞想要被調用的函數。

到此，關于“HTML5移動應用開發新的可視化UI特性怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！