作者: gkm422  链接：http://remind.javaeye.com/blog/222091  发表时间: 2008年07月31日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

      有时侯告诉用户应该怎么做很重要,尤其是当填写一个复杂的表格的时候.此代码使用title属性在一个单独的DOM元素里显示帮助。(翻译的生硬了...)

      

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="jquery.js"></script>
		<script type='text/javascript' src='jquery.autohelp.js'></script>	</head>

	<body>
<form>
	<input type="text" name="demo1" title="Type something" />
	<select name="demo2" title="Select something"><option value=0>Select</option></select>
	<input type="radio" name="demo3" value="foo" title="Pick one (like foo)"> foo
	<input type="radio" name="demo3" value="bar" title="Pick one (like bar)"> bar
</form>
<p id="autohelp">Focus on one of the form elements above.</p>
<script type="text/javascript">
$(document).ready(function() {
	$("form *").autohelp("#autohelp");
});
</script>
</body>
</html>

 

jquery.js这个从那啥网上下就行...

jquery.autohelp.js 代码

$.fn.autohelp = function(t, o) {
	t = $(t); o = o || {};
	var h;
	this.focus(function() { h = t.html(); (o.hide ? t.show() : t).html(this.title); })
	    .blur(function() { (o.hide ? t.hide() : t).html(h); });
	return this;
}

 


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐




文章来源:http://remind.javaeye.com/blog/222091