成都创新互联网站制作重庆分公司

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报告  

    <脚本类型= “ 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” >    

  

      

这个清单展示了基本的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

        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

        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来在画布上绘制文本。您对每个数据点都执行这个操作,为每个数据点创建一个柱状图,其下带有一个标签。

接下来,您需要重新设置此图形的其他部分—尺寸和网格线。首先,放置水平和垂直垂直。对于每条变量,使用moveTo API来设置开始直线直线的起点。然后使用lineTo API来从这个。注意,这并不实际放置一条直线;相反,您调用描边API来替换这条直线。对齐水平和垂直上方后,放置它们的标签布局网格线,方法是均匀间隔本身,然后使用相同的moveTo,lineTo和stroke组合来绘制这些直线。

这就是以编程方式创建这个报告图形所需的所有代码。在这个示例中,您已经看到了很多最重要的,也是最常使用的画布API,但还有其他几个API(用作着色曲线) )。您可以使用这些API完成一些令人震惊的任务,这些任务可以在任何基于Webkit的浏览器上完成。如果您的目标不是布局图形,HTML 5仍旧有很多格式为级联样式表(CSS)3.0的新视觉图像。

奇妙的CSS3世界

正确的HTML 5,您可能会马上想到HTML标记。当然,HTML 5肯定包含新标记,我们将在下一小节中查看其中的部分新标记。在上一小节中,您看到了如何使用一个但是,大部分代码是JavaScript。HTML只是HTML 5的一部分— 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);  

        }  

      

  

<正文onload = “ init()” >   

    <标题>  

        < h2 > CSS3的世界  

        < div >您的浏览器支持哪种CSS3?  

      

    < table id = “ dtable” >    

    < div id = “ formSection” >   

        <标签为= “ name” >您叫什么名字?   

        <输入类型= “文本” id = “名称” >     

        < button id = “ rtBtn” onclick = “ rotate()” >旋转    

      

  

  

清单3中的代码替换标题“ Gettysburg Address”上方的所有UI。您将稍后看到此页面的下半部分的代码。

首先应该检查页面标题。如果您查看清单3底部附近的HTML页面主体,您将看到这个标题实际上位于一个header标记中—这是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部分— tr:nth -child声明—来完成。可以在任意重复的元素上使用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;  

        }  

      

  

<正文onload = “ init()” >   

    < h3 >葛底斯堡地址  

    < h4 >宾夕法尼亚州葛底斯堡,亚伯拉罕·林肯。1863年11月19日  

    < div class = “ xyz” >   

        四分制和七年前,我们的父亲在这方面提出了   

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

            人人平等创造的主张。  

      

    < div class = “ abc” >   

        现在我们正在进行一场内战,测试是否   

            民族,或任何一个如此怀念,如此敬业的国家,   

            忍受。我们在那场战争的伟大战场上相遇。我们有   

            来奉献该领域的一部分,作为最后的休息   

            在这里献出生命的那个人那个国家可能   

            生活。我们应该这样做完全合适和适当。  

      

  

  

我们来逐个看看这个代码中的元素。首先,为“葛底斯堡演说”创建了一个标题,并以几种方式设置其样式。

使用-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变得可用的额外特性。但是,另一些元素则不这些与

看起来一样,并且拥有相同的编程接口。但是,它们将添加额外的语义含义。这些新语义针对页面的非视觉用户(这些新标记还向开发人员提供了一些链接,帮助他们编写表现力更强的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 >获取最新标记  

  

<身体>  

    <标头样式= “边框:1px点#000;边框半径:3px;” >   

        < hgroup align = “中心” >   

            < h2 >实际文档具有标题  

            < h3 >即使他们不这么说  

          

        < 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” >标记   

          

          

      

    <文章>  

       < h2 > HTML5中有很多新的标记元素  

       <时间日期时间= “2010-05-16”  pubdate的>星期日,5月16日   

       <部分>您是否注意到我们只有两个H1?   

       但这很酷!  

       < aside style = “空白:nowrap;溢出:隐藏;文本溢出:省略号;” >    

            如果此页面真的很受欢迎,我会在这里放一个广告并制作一些  

            大量现金  

          

      

  

  

注意,您还应用了一些新的CSS样式来在header周围创建了一个圆角框,并为nav创建了几个分隔符。您还在旁边使用了文本溢出样式。这里的关键点是:无需额外的工作,您就可以创建更重叠的标记,然后,您可以像使用了

一样显示该标记。要查看拥有更多视觉和编程效果的新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复制内容到剪贴板

  

  

    Settings  

      

   
  

      

   

          placeholder="First and last name" required />
  

      

   

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

      

   

          placeholder="Eg. +447500000000" required />
  

      

      

    < fieldset style = “边框:点距1px#000;边框半径:6px” >   

        <图例>首选联系方式  

        < ol >  

            <李>  

                <输入id = “ emailMeth”名称= “ contactMethod”     

                            type = “ radio” >  

                <标签为= “ emailMeth” >电子邮件   

              

            <李>  

                <输入id = “ phoneMeth”名称= “ contactMethod”     

                            type = “ radio” >  

                <标签为= “ phoneMeth” >电话   

              

          

      

    <标签为= “气候” >优选的外部温度   

    <输入id = “气候”名称= “气候”类型= “范围” min = “ 50”       

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

    < label for = “ color” >最喜欢的颜色   

    <输入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()” >保存    

  

  

清单7中的表单元素展示了HTML 5的许多新特性。注意两个新属性:需要和自动对焦。需要属性进行表单验证(以下将详细介绍)过程中,自动对焦属性允许选择页面上的元素以获取焦点。还要注意几个拥有占位符文本的元素。这是许多网站多年来一直在使用的一个模式—将某个示例或解释性文本放置到一个文本标记—但开发人员总是必须修改(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

        输入= 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特性怎么实现”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


本文题目:HTML5移动应用开发新的可视化UI特性怎么实现
文章网址:http://cxhlcq.com/article/gsjpid.html

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部