七月 18, 2011
by 小寒
2 comments
在高级浏览器下点击Google+的一些链接，并不是直接从服务器返回完整的页面，而是通过AJAX刷新页面的局部。
如在首页点击以下链接：
- https://plus.google.com/stream
- https://plus.google.com/photos
- https://plus.google.com/photos
- https://plus.google.com/circles
浏览器通过AJAX请求服务器返回数据，动态刷新页面上的一部分区域，这样做可以减少网络传输，快速响应，以达到更好的用户体验。同时我们注意 到，点击链接的时候，浏览器上的地址栏也做出了相应的调整，并且不会刷新整个页面。如点击“圈子”的时候，地址会变为 https://plus.google.com/circles。
这在早期浏览器版本下是做不到的，因为给window.location赋值会导致整个页面的刷新，除非是用改变URL的hash达到同样的目 的。Google+是用HTML5中history.pushState来实现替换当前的URL同时不刷新整个页面。
关于history.pushState的官方文档：https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
Google+针对不同的操作场景和浏览器，做了一些方案处理点击链接后的行为。
- 如果直接在浏览器地址栏中输入地址回车，那么就会从服务器拿完整的页面呈现给用户。
- 如果浏览器不支持history.pushState，会降级用url hash的方式。
- 如果浏览器支持history.pushState，就用AJAX取区块的数据，然后生成HTML刷新到相应的区域上，并调用 history.pushState更新地址栏，生成访问历史。
值得注意的是，Google+对AJAX返回的数据做了缓存处理，再次请求的话会从缓存中获取数据。
JavaScript
八月 10, 2010
by 小寒
3 comments
很多网站在填写表单的时候，都可以看到这样一种UI，input[type=text]里面有提示的文字，当鼠标点进去之后提示文字就消失了。关于这种UI，之前有写过文章介绍过http://www.zhoumingzhi.com/?p=182。在本文中主要是介绍以HTML 5的实现方式以及兼容方案。
一，HTML 5的实现方式
HTML 5的input元素引入了placeholder的属性，就是为了实现本文开头所说的效果，代码也很简单。
<input type="text" placeholder="请输入一些文字" />
二，对不支持HTML 5浏览器的兼容方案
对于不支持HTML 5的浏览器，上面的方法就不可行了。但是placeholder这个属性可以利用起来，结合JS实现想达到的效果。下面结合代码说明实现方法：
首先要用JS检测一下浏览器支不支持placeholder这个属性。
(function() {
var tmp = document.createElement("input");
window.supports = {
// 检测input是否支持placeholder特性
placeholder: "placeholder" in tmp
}
})();
如果支持的话就什么也不做，浏览器会帮你实现这个效果。
如果不支持则要写段JS。为了方便说明用到了jQuery，代码如下：
// 绑定input的placeholder
function bindPlaceholder(input) {
if(!window.supports.placeholder) {
var jqInput = $(input),
placeholder = jqInput.attr("placeholder");
if(placeholder) {
if(input.value == "") {
input.value = placeholder;
$(input).addClass("placeholder");
}
jqInput.focus(function() {
if(this.value == placeholder) {
$(this).removeClass("placeholder");
this.value = "";
}
}).blur(function() {
if(this.value == "") {
$(this).addClass("placeholder");
this.value = placeholder;
}
});
}
}
}
上述代码中有个叫placeholder的CSS类，这个主要是让占位符的字体颜色变灰。CSS如下：
.placeholder {
color: #a9a9a9;
}
实现上面的函数之后，就可以在页面初始化的时候调用了。
$("input[placeholder]").each(function() {
bindPlaceholder(this);
});
三，结论
HTML 5中有很多很方便的特性，但是目前不是所有浏览器都支持，所以在用HTML 5的时候要考虑到兼容方案。
UI
七月 21, 2010
by 小寒
0 comments
今天下午有人在群里提出个问题，能不能把自定义样式应用到HTML 5中的range元素上。晚上研究了一下，是可以实现上述的需求的。请用Chrome查看Demo。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>自定義樣式的input[type=range]</title>
<style type="text/css">
#range {
width: 600px;
height: 10px;
background: rgba(60, 114, 230, .8);
border: 1px solid #333;
-webkit-border-radius: 5px;
-webkit-appearance: none !important;
}
#range::-webkit-slider-thumb{
width: 28px;
height: 28px;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#fff),
to(#ccc)
);
border: 1px solid #000;
-webkit-box-shadow: 0 0 6px #000;
-webkit-border-radius: 14px;
-webkit-appearance: none !important;
}
#result {
border: 2px solid #ccc;
width: 32px;
}
</style>
</head>
<body>
<input type='range' min='0' max='1000' value='0' id='range' />
<input type='text' id='result'/>
<script type='text/javascript'>
var result = document.getElementById('result');
document.getElementById('range').onchange = function() {
result.value = this.value;
}
</script>
</body>
</html>
代码中的”-webkit-appearance: none !important”很重要，要先把-webkit-appearance设置为none才能自定义样式。
CSS, HTML
