android学习之使用html5开发新的可视化_第1页
android学习之使用html5开发新的可视化_第2页
android学习之使用html5开发新的可视化_第3页
android学习之使用html5开发新的可视化_第4页
android学习之使用html5开发新的可视化_第5页
已阅读5页,还剩28页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

CSSJavaScriptrotate函数2的下半部分代码新语义HTML5代码形式的HTML5表单元素8.HTML5APIs的应用function "-webkit-transform2sease-in-$("rtBtn").innerHTML=$("rtBtn").onclick=function()$("rtBtn").innerHTML=}}这个rotate函数使用JavaScript来更改应用到名为formSection的div的CSS。(注意:您正在将$()用作 ementById()的一个别名。)要旋转这个div,将它的-webkit-transform样式设置为rotateZ(-5deg),将其逆时针旋转5度。接下来,将-webkit-transform 。在图3中,左边显示What'syourname?字段旋转之前的初始位置;右边显示该字段部分旋转后的视觉效果及其Undo按钮。3HTML元Chrome、Safari4OperaHTML5的浏览器上的实5显示了相关代码。<!DOCTYPE<styleh2background:-webkit-gradient(radial,4300,43050,200,-webkit-box-reflect:below5px-gradient(linear,lefttop, }color:background:}text-shadow:#6374AB4px-4pxwidth:height:overflow:text-overflow:border:1pxsolidborder-radius:}.abcborder:1pxsolidborder-radius:-webkit-column-rule:1pxsolid}<body<h2>TheGettysburg<h3>AbrahamLincoln,Gettysburg,PA.19,<divFourscoreandsevenyearsagoourfathersbroughtforthoncontinentanewnation,conceivedinliberty,anddedicatedthepropositionthatallmenarecreated<divNowweareengagedinagreatcivilwar,testingwhethernation,oranynation,soconceivedandsodedicated,canendure.Wearemetonagreatbattle-fieldofthatwar.Wecometodedicateaportionofthatfield,asafinalceforthosewhoheregavetheirlivesthatthatnationlive.Itisaltogetherfittingandproperthatweshoulddo我们来逐个看看这个代码中的元素。首先,为“The使用-webkit-text-fill-color、-webkit-text-stroke-带蓝”的效果。 5个像素处反射标题,并对倒影2,您将看到,Android浏览器不rgba函数来指定“红-绿-蓝”值,以及一个alpha1.00.0 5中的下一部分是这篇短文的第一段。文本周围border-radius样式来实现4个圆角。现在,您在Web上到处都能看到这样的圆角,它们通常使用图像来实现。与使用CSS3.0来实现相比,这种方法真是太老土了。通过使用text-shadow样式来向这个段落的文本应用一个阴影。最后,注意段落区域受到了父div的高度和宽度的限制,文本太大了。与在一些较老的浏览器中看到的那样直接截除文本相反,通过设置text-overflow样式可以获得一个美观的省略号(...)效果。-webkit-column-count样式,并设-webkit-column-rule样式来获取这些CSS3.0特 建简单的headers和footers(它们二者也是HTML5中的新元素)时,这也可能是一个很有用的特性。看一下它们以及由HTML5引入的其他一HTML5HTML元素将导致浏览器提供一些新的呈现处理。其他一些元素将添加一些稍后可以通过JavaScript变得可用的额外特性。但是,另外一些元素则不具备上述两种功能。它们与<span>、<div><p>看起来一样,且拥有相同的编程接口。但是,它们将添加额外的语义含义。这些新语义对于页面的非视觉用户(包括使用屏幕阅读器这样的辅助技术的用户)和搜索引擎爬虫这样的计算机程他们编写表现力更强的CSS4展示了一个使用一些新语义元素的Web页面。图 上的一些新HTML5元4header元素、几个navarticlesection元素、aside元素。这些元素不会导致任何特殊4中显示的的代码如6所示。<!DOCTYPE<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <metaname="viewport"content="width=device-width;initial-scale=1.0;um-scale=1.0;user- <metaname="apple-touch-fullscreen"content="YES"/><title>Getthelatest<headerstyle="border:1pxdotted#000;border-<hgroup shave<h2>Eveniftheydon'tsaycolumn-rule:1pxsolid<ahref="new-<a<a <h1>Therearealotofnewmarkupelementsin<timedatetime="2010-05-16"pubdate>Sunday,<section>DidyounoticethatwejusthadtwoButit's<asidestyle="white-overflow:ellipsis;"Ifthispagewasreallypopular,I'dputanadheremakeseriousnav创建几个分隔符。您还在aside上使用了文本溢出样式。这里的关键点是:然后,您可以像使用了<div>和<span>一样显 的文本版本。)图5. 上使用HTML5创建的表5HTML5中可用的许多新6OperaHTML5表单元OperaHTML5单4和 5的代码,以便您更好地理解Opera 7显示了这□□□□□□ " " <label<inputid="phone"name="phone" "required<labelfor="dob">Dateof<inputid="dob"name="dob"type="date"<fieldsetstyle="border:1pxdotted#000;border- <legend>PreferredContact □<input Meth"□□□□<label □

<inputid="phoneMeth"<label<labelfor="climate">Preferredexternal<inputid="climate"name="climate"type="range"max="100"step="5"<labelfor="color">Favorite<inputid="color"name="color"<labelfor="referrer">Where'dyouhearabout<inputtype="url"name="refUrl"id="referrer"<datalist<optionlabel="TechCrunch"□<optionlabel="ReadWrite□ □<option□ <optionlabel="Ajaxian" <button 7formHTML5的许多新特性。注意两个新属性:requiredautofocus。required属性用于表单验证(下面将详细介绍)过程中,autofocus属性允许选择页面上的元 ceholder文本的元素。这 多年来一直在使用的一个模式—将某个示例或解释性文本放置到一个文本框中—但开发人员总是必须修改(hack)该代码。图4展示了 ,phone,date,range,color,和url。现在,这些类型在 Android浏览器上总是呈现为文本字段,但那只是使用语义不太准确的HTML4.0创建它们的样子。图5展示了它们未来的可能外观。date输入在Opera上展示其新UI(一个弹出式日历)前必须获得焦点。这对于图7中的url输入也同样适用,但原因不在于它是url输入,而是它拥有一个list属性。该属性指向datalist来自datalist的可能值(本例中是几个URL)。图7展示了date和datalist特性。7HTML5输随着Webkit持续快速发展,可以预见,许多输入类型将允许更有用供验证,HTML5拥有一组完整的新验证APIs。这些特性目前还没 或基于Android的设备上实现,但已经在它们的桌面8APIsvarinputs varlen=vari=varinput=varerrors=forinput=if(input.nodeName==ifif}}}} varerrMsg="Thereare"+errors.length+"varnotify=varnotificationifif}else}}else}}每个输入元素拥有一个validity属性。可以使用这个属性,或者,也可以使用返回ture或false的checkValidity()函数以及validationMessage属性来获取一条本地错误消息。在本文撰写之 一致或标准的消息,因此,它的用途有限。validity对象可用于检查不同类型的错误,比如valueMissing、rangeOverflow、rangeUnderflow、patternMismatch和tooLong。例如,如果元最后,注意,在8中,您在明确所有的验证错误之后,将尝知类似,可用于Chrome中。因此,您同样可以期望它们将很快应用于Android浏览器。API的使用很简单明 ;反之,则传递想被调用的在本文中,您快HTML5中许UI相关的新特性:从新元素到新样式再到绘图画布。这些特性(除了文末提到的几个例外之外)都可用 基于Android设备上发现的基于Webkit的浏览器上。Bl

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论