HTML5文件API之图片预览
图片上传在当今的Web应用中是一个非常常用的功能,如果不需要在上传前进行图片预览则可以简单的使用HTML+Javascript来实现,但如果一定要在上传之前提供图片预览功能则需要求助于Flash来实现。不过,随着HTML5 File API的诞生这一状况终于有了改观,本文将介绍如何使用HTML5 File API快速的实现图片预览功能。
Read the rest of this entry »图片上传在当今的Web应用中是一个非常常用的功能,如果不需要在上传前进行图片预览则可以简单的使用HTML+Javascript来实现,但如果一定要在上传之前提供图片预览功能则需要求助于Flash来实现。不过,随着HTML5 File API的诞生这一状况终于有了改观,本文将介绍如何使用HTML5 File API快速的实现图片预览功能。
Read the rest of this entry »FORM在HTML5中的变化算是比较大的,一方面体现在新增了大量的2.0时代的控件,另一方面则是整个FORM结构的变化。与新增的控件相比,新的FORM结构一样为将来的开发工作提供了很大的便利性。
Read the rest of this entry »在WEB页面中,为了配合Javascript的交互功能,很多时候都需要给HTML标签添加自定义属性(虽然标准不支持这么做),而关于自定义属性的名字则大都也是各自为战的自定义的,或根据功能、或根据项目等等,例如:
<!-来自贴吧—>
<div cid="count_ayjpb" st_type="toupiao"></div>
<!-来自有啊—>
<a href="#" favo_type="x" favo_obj_id="x" favo_title="x"></a>
这样的会造成自定义属性名混乱的问题,而且更为重要的是假如新的HTML标准中需要使用这个自定义属性,而且其含义与你的自定义属性中含义并不相同,这是一个大家都不希望看到的情况。于是在HTML5中给出了解决方案:只要是自定义属性都需要带上"data-"前缀。
The
data-*
collection of author-defined attributes. Authors can define any attribute they want as long as they prefix it with
data-
to avoid clashes with future versions of HTML.
因此,按照这个规范可以改写上面两个例子以获得更好的兼容性:
<!-来自贴吧—>
<div data-cid="count_ayjpb" data-st_type="toupiao"></div>
<!-来自有啊—>
<a href="#" data-favo_type="x" data-favo_obj_id="x" data-favo_title="x"></a>
实际上在淘宝的机票已经有看到这样的使用
<span data-display="inline" data-tnick="x" data-nick="x"></span>
-本文到此结束-
Read the rest of this entry »问题描述
在很多情况下,我们需要这样的一种效果,当鼠标进入元素时做某些操作,而当鼠标离开元素时又做另外一些操作。很自然的我们会想到DOM事件中的onmouseover和onmouseout事件,其中onmouseover表示的是当鼠标从元素之外移入元素时触发的事件,而onmouseout则表示鼠标从元素移出时触发的事件。具体效果请看这个页面。
从页面的效果中可以看出以下两个问题:
当鼠标从当前元素进入到其子元素时会触发当前元素的onmouseout事件,也就是说视其离开了当前元素。
当子元素中发生onmouseove和onmouseout事件时,由于冒泡机制会被父元素捕获。
在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件、DOM操作某些结点等。原来比较常用的是window的onload事件,而该事件的实际效果是:当页面解析/DOM树建立完成,并完成了诸如图片、脚本、样式表甚至是iframe中所有资源的下载后才触发的。这对于很多实际的应用而言有点太“迟”了,比较影响188宝金博下载。为了解决这个问题,FF中便增加了一个DOMContentLoaded方法,与onload相比,该方法触发的时间更早,它是在页面的DOM内容加载完成后即触发,而无需等待其他资源的加载。Webkit引擎从版本525(Webkit nightly 1/2008:525+)开始也引入了该事件,Opera中也包含该方法。到目前为止主流的IE仍然没有要添加的意思。虽然IE下没有,但总是有解决办法的,下文对比了一下几大主流框架对于该事件的兼容性版本实现方案,涉及的框架包括:
Prototype
jQeury
moontools
dojo
yui
ext
关于A标签的页内锚点,记录一下:
1. 目标元素的ID和Name都可以作为锚点,区别在于ID对于目标元素的类型是无限制的,而name则仅适用于以下元素:A, APPLET, FORM, FRAME, IFRAME, IMG, and MAP.
按照W3C的说法,INS和DEL元素是用来标记文档变化的:INS用于标记新插入文档的内容;DEL元素用于标记已经从文档中删除的内容。此外,还可以给这两个元素设置cite和datetime属性。其中,cite为一个URI,语义上用来解释文档发生变化的原因;而datetime则表示文档发生变化的时间。在平常的使用中,很少有人会给这两个标签添加以上的属性(自动添加不算),本文主要介绍通过Javascript以及这两个属性来实现增强型的INS和DEL:当用户鼠标悬停在更改标记之上时,弹出浮动层显示内容变更的时间以及提供一个指向变更依据的链接。
Read the rest of this entry »