记事本

Inline Form Labels（2）

八月 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的时候要考虑到兼容方案。

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

七月 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

jQuery实例为什么在firebug下表现出数组的特征

七月 6, 2010 by 小寒 1 comment

在firebug下面用console.debug($(‘a’))打印jQuery()返回值时，会发现控制台输出是一个数组，但我们知道jQuery()返回的确实一个对象，只不过这个对象有length属性和数字的下标，最重要的是还有一个splice方法。只要满足这三点，就会在控制台输出一个数组。自己建了个例子模拟一下。

function Foo() {
    return new Foo.prototype.init();
}
Foo.prototype = {
    init: function() {
        this.length = 1;
        this[0] = 'hello world';
        return this;
    },
    say: function() {
        alert('hi');
    },
    length: 0,
    splice: [].splice
}
Foo.prototype.init.prototype = Foo.prototype;

Foo();

PS: 如果想用firebug打印完整的jQuery对象，请用console.dir()。

JavaScript

让IE支持RGBa的背景色

六月 28, 2010 by 小寒 0 comments

文章部分内容来自：RGBa Browser Support

老版本的IE不支持RGBa的背景色，不过我们可以用滤镜实现同样的效果。上代码：

<!DOCTYPE html>
<html>
	<head>
		<title>Demo</title>
		<style type="text/css">
			#div1 {
				padding: 10px;
				width: 380px;
				height: 205px;
				background: url(shuizhu.jpg);
			}
			#div2 {
				color: #FFF;
				font-size: 40px;
				font-weight: bold;
				text-align: center;

				height: 205px;
				line-height: 205px;
				background: rgba(125, 0, 0, .3);
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B7D0000
						,endColorstr=#4B7D0000);
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				Hello world!
			</div>
		</div>
	</body>
</html>

DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的，其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢？很简单，先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4B。

下面附上示例中用到的图片：

CSS

有关.clearfix的一些事

六月 26, 2010 by 小寒 3 comments

一，什么是.clearfix

很多网站都讲到一个盒子清除内部浮动时可以用到.clearfix。

.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	height: 0;
}
.clearfix {
	zoom: 1;
}

<div class="clearfix">
	<div class="floated"></div>
</div>

上面的代码就是.clearfix的定义和应用，简单的说下.clearfix的原理：

在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。
在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素内部插入一个clear: both的块级元素，从而达到清除浮动的作用。这时的代码相当于：
```
<div>
	<div class="floated"></div>
	<div style="clear: both"></div>
</div>
```

二，总结

在IE6, 7下面只要是触发了hasLayout的元素就可以清除内部浮动了。而在标准浏览器下面清除元素内部浮动的方法有很多，大多数的情况下.clearfix:after都可以满足需求。除了.clearfix:after这种方式，其余的方法无非就是产生新的Block Formatting Context以达到目的……

CSS

白话Block Formatting Context

六月 24, 2010 by 小寒 10 comments

转载须写明出处，附带本文链接。关于文中的示例，请忘掉IE浏览器，用标准浏览器查看。

一，啥是Block Formatting Context

当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。

二，怎样才能形成Block Formatting Context

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context

float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。

三，Block Formatting Context在生产中有什么作用

Block Formatting Context可以阻止边距折叠（margin collapsing）。我们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个Block Formatting Context中。换句话说，在同一个布局环境中（Block Formatting Context）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。
Block Formatting Context可以包含内部元素的浮动。考虑一下下面的例子（请用标准浏览器查看）：
```
<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
		}
		#red, #orange, #yellow, #green {
			width: 100px;
			height: 100px;
			float: left;
		}
		#red {
			background: red;
		}
		#orange {
			background: orange;
		}
		#yellow {
			background: yellow;
		}
		#green {
			background: green;
		}
	</style>
</head>
<body>
	<div id="c1">
		<div id="red"></div>
		<div id="orange"></div>
	</div>
	<div id="c2">
		<div id="yellow"></div>
		<div id="green"></div>
	</div>
</body>
</html>
```
在上面的代码本意是做一个两行两列的布局，但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中，即便通过#c1, #c2这两个div划分，浮动之后它们还会一个接着一个排列，并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中，从而闭合浮动。通过上面的分析，让#c1形成新的Block Formatting Context就可以解决问题。
Block Formatting Context可以阻止元素被浮动覆盖。请看示例：
```
<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
		}
		#left {
			width: 100px;
			height: 100px;
			background: red;
			float: left;
		}
		#right {
			height: 200px;
			background: yellow;
		}
	</style>
</head>
<body>
	<div id="left"></div>
	<div id="right"></div>
</body>
</html>
```
在标准浏览器下可以看到，普通的#right元素被浮动的#left元素所覆盖了。要想避免这种情况，有一种方法就是让#right形成新的Block Formatting Context。但是这里一定要注意的是，浮动不会覆盖的只是Block Formatting Context的border-box。换句话说，形成Block Formatting Context元素的margin还是会被浮动所覆盖掉的。

如果想全面了解Block Formatting Context，请看CSS 101: Block Formatting Context这篇文章。

CSS, 原创

« Previous page | Next page »

这里全是流水账

Inline Form Labels（2）

一，HTML 5的实现方式

二，对不支持HTML 5浏览器的兼容方案

三，结论

判断元素位置关系的一些方法

底部浮动条的一种兼容方案

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

几个版本的Y组合子

jQuery实例为什么在firebug下表现出数组的特征

缓存的一点测试