HTML5，CSS3与Javascript，iOS下基础WebApp学习经验记录(2)

（11）CSS中的zoom属性缩放div和其所有子元素

缩放一个div除了用javascript调节height和weight属性外，还可以用zoom：X（firefox中如 -moz-transform: scale(X) ）：

yournode{

-moz-transform: scale(X);

zoom:X;

}

X可以是小数也可以是百分比，这么做的好处是zoom效果是级联的，也就是说节点之上所有子元素同样等比缩放。

（12）CSS中的pointer-events属性控制层是否响应事件和穿透事件

pointer-events属性设置为none或者auto可以控制事件是否穿透该层，并阻断时间冒泡的传递，当一个div用到pointer-events=auto时，那么这个div是可以穿透并响应自己和下面的事件的，经过实验发现pointer-events事件也是级联的，如果div设置pointer-events为none,那么其子元素也将不会响应到事件，事件会穿透并直接响应下层。

项目中用到的地方是当需要一个透明的div在最上层，又不想让这一层响应任何事件的时候就把这个层的pointer-events设置为none，这样下面的touch事件，click事件都可以响应了，不受影响。当需要最上层响应事件的时候在把pointer-events设置成auto。另外父元素设置成pointer-events=none，其子元素可以单独的设置成auto接受事件响应。

（13）CSS中font-family属性定义字体

CSS负责定义具体的字体，和利用现成的字体文件，这里用ttf字体举例：

@font-face {

font-family: fontsname;

src: url(‘../fonts/LucidaGrande.ttf’) format(“opentype”);

}

#usefonts{

position: absolute;

right: 29px;

top: 100px;

font-family: fontsname, sans-serif;

font-size: 57px;

text-align: right;

display:block;

letter-spacing: -3px;

}

@font-face负责引用字体文件，这里src: url(‘../fonts/LucidaGrande.ttf’)就是字体文件的位置，format和字体文件的类型相对应，ttf格式对应opentype,然后在#usefonts节点中用 font-family属性使用字体。当然这里有不同浏览器的兼容问题，因为字体没有一个统一的标准去定义，利用字体后可能会收到浏览器的警告，有的字体文件，比如中文字体会很大，甚至20mb会严重影响应用的加载速度。具体使用可参考http://www.font-face.com/#orange_content，这里先做个记录，以后会找到最佳实践。另，line-height调节行高，
letter-spacing调节字间距。

（14）用CSS中display属性来复用html

如果我愿意，其实我可以把所有的页面都写成一个html，然后通过不同的css渲染，那么这个页面不需要这么多元素，那个页面需要另外的其中的一些元素，怎么办？解决办法是把指定节点的display=none；这样被隐藏的元素既不会响应事件也不会占整个布局的空间，属于纯粹的隐藏了。

（15）CSS中background属性设置背景图片

    background:url(“../images/arrow.png”),rgba(0, 0, 0, 0.5);

background-position:764px 50%;

background-repeat: no-repeat;

作用分别是设置具体图片为图片同时设置背景色；设置背景图片的位置，可以用具体像素也可以用百分比；设置背景图片是否重复，这个属性的意思就是类似桌面背景的平铺还是居中，在需要一个类似大理石纹的背景底纹的情况下，可以加载一个很小的图片然后不写background-repeat这个属性，那么背景图会自动从左到右从上到下的复制并铺满屏幕，效果如下图：





 

可见如果素材选择合适那么图与图之间过度很平滑。此外CSS SPRITE技术可以减少服务器请求，大致意思就是把好多小图标放在一张图片上，然后通过background-position来调整位置显示这张图片不同的区域，同样达到换了背景图的效果，但是大大减少了服务器的请求，项目中暂且还没有到，以后会更新。

（16）jQuery ajax-load()方法加载页面

使用jQuery ajax-load()方法可以很简单的加载一个html页面并调用回调函数，这样可以把html文件单独放在指定文件夹中，使项目层次清晰。

$(‘#topBar’).load(‘data/top_bar_items.html’);

$(‘#topBar’).load(‘data/top_bar_items.html’，function(){

console.log(“loaded!”);

});

第一行代码在id=topBar的节点上加载top_bar_items.html页面的内容，第二行是在加载完成后执行function方法，打印加载完毕信息，

（17）jQuery中trigger与on的用法，类似iOS里面的通知机制

这种方式用起来很常见：

$(‘#topBar’).on(‘click’, function() {

console.log(“clicked!”);

});

当id为topBar的节点被点击后执行打印信息。可以理解为topBar在监听名为‘click’的信息，当有人触发了click事件后他发现触发的事件名称为click，和自己监听的’click’一样，那么执行function。下面是trigger用法：

$(‘#app’).trigger(‘information’);

$(‘#app’).on(‘information’, function() {

console.log(“clicked!”);

});

app触发了information信息然后自己又在监听information信息，所以就执行function方法。这样这种触发和监听机制就可以用在任何地方，复杂的交互事件中会大量用到trigger和on方法，比如点击一个节点，其他多个节点受到相应那么就把每个节点都绑定on方法，同时还可以绑定多种不同方法。此外trigger可以传递参数：

$(‘#foo’).on(‘custom’, function(event, param1, param2) {

alert(param1 + “n” + param2);

});

$(‘#foo’).trigger(‘custom’, ['Custom', 'Event']);

param1和param2就是接受的两个参数Custom和Event，具体用法可参见jQuery的API，http://api.jquery.com/trigger/

（18）HTML5-video标签用法

不用flash插件和Quicktime插件，html可以用原生的video标签来嵌入视频文件：

  <video id=”movies” src=”images/testmovie.mp4″ poster=”images/posterimage.png” controls=”controls”   >

</video>

src是视频文件的路径，poster是封面图片，control是控制条，各个浏览器的默认控制条不同。其他的属性比如自动播放，高度宽度等等可参照这个网址http://www.w3school.com.cn/html5/tag_video.asp，这里要注意的是视频的格式，mp4格式可在Safari中使用，火狐不可，ogg格式没有测试，希望以后可以统一。

（19）jQuery存储数据，取出数据data方法

$(“#btn1″).click(function(){

$(“div”).data(“greeting”, “Hello World”);

});

$(“#btn2″).click(function(){

alert($(“div”).data(“greeting”));

});

用法就像iOS里的字典，给div节点增加greeting的键，值是hello world，取出的时候就取键greeting就可以了，项目中用到处是临时判断节点有无变化。

（20）stopPropagation()和return false和preventDefault()

preventDefault()是阻止浏览器默认事件，项目中没用到。stopPropagation()是阻止事件往下传递，比如点击上层div后不想传递到下层的div。return false测试后效果和stopPropagation()一样。项目中真正遇到的问题是touch事件和click事件的冲突，因为iOS相应的是touch事件没有所谓的mouseup click mouseover等事件，故在用click事件stopPropagation()的时候，实际上touchstart已经穿透过去了，这点有待解决。