标签归档:HTML5

Google+中URL的渐进增强

在高级浏览器下点击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+针对不同的操作场景和浏览器,做了一些方案处理点击链接后的行为。

  1. 如果直接在浏览器地址栏中输入地址回车,那么就会从服务器拿完整的页面呈现给用户。
  2. 如果浏览器不支持history.pushState,会降级用url hash的方式。
  3. 如果浏览器支持history.pushState,就用AJAX取区块的数据,然后生成HTML刷新到相应的区域上,并调用 history.pushState更新地址栏,生成访问历史。

值得注意的是,Google+对AJAX返回的数据做了缓存处理,再次请求的话会从缓存中获取数据。

Inline Form Labels(2)

很多网站在填写表单的时候,都可以看到这样一种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的时候要考虑到兼容方案。

自定义样式的input[type=range]

今天下午有人在群里提出个问题,能不能把自定义样式应用到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才能自定义样式。