作者: gkm422  鏈接：http://remind.javaeye.com/blog/222091  發(fā)表時間: 2008年07月31日

聲明：本文系JavaEye網(wǎng)站發(fā)布的原創(chuàng)博客文章，未經(jīng)作者書面許可，嚴(yán)禁任何網(wǎng)站轉(zhuǎn)載本文，否則必將追究法律責(zé)任！

      有時侯告訴用戶應(yīng)該怎么做很重要,尤其是當(dāng)填寫一個復(fù)雜的表格的時候.此代碼使用title屬性在一個單獨(dú)的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這個從那啥網(wǎng)上下就行...

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