<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jQuery.niceTitle.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jQuery.niceTitle.js"></script>
<title>jQuery.niceTitle design by lee(IT北瓜)</title>
<style type="text/css">
body {
margin: 0;
text-align: center;
font: 14px "微软雅黑",verdana,arial,sans-serif;
}
img {
border: 0;
}
.info {
text-align: left;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("a, input, img, div, span").niceTitle({showLink: false});//要排除一些例外的元素,例如可以用a:not([class='nono'])来排除calss为"nono"的a元素
});
</script>
</head>
<body>
<div style="height: 50px; width: 300px; background-color: #FFC;" title="Multi-line display | line 1 | line 2 | ...">
<br />
Multi-line display
<br />
</div>
<div style="height: 50px; width: 300px; background-color: #F6C;" title="I am a div wraps a input.">
<input type="text" value="I am a input." title="I am title..." />
</div>
<div id="niceTitleDemo" title="I am a outer div." style="background-color: #90C; width: 300px;">
<a href="http://www.imleeo.com" title="jQuery niceTitle plugin design">jQuery niceTitle plugin</a><br /><br /><br />
<a href="http://www.imleeo.com" title="I am tag a, I include an img, so I will auto hide the img's alt and img's title.">
<img src="http://imleeo.com/jquery-example/images/logo.jpg" alt="I am 'img' in a tag 'a', so my parent tag 'a' has not niceTitle." title="I am 'img' in a tag 'a', so my parent tag 'a' has not niceTitle." />
</a>
<br />
<img src="http://imleeo.com/jquery-example/images/logo.jpg" alt="I am a lonely img, no tag a wraps me." title="I am a lonely img, no tag a warps me." />
</div>
<div style="height: 50px; width: 300px; background-color: #00F;" title="I am a inner div.">I am a inner div.</div>
<div title="I am another outer div." style="background-color: #999; width: 300px;">
Use:<br />
$(document).ready(function(){$("a, input, img, div, span").niceTitle();});<br />
<a href="http://www.imleeo.com" title="For more information, please visit my blog.">www.imleeo.com</a><br />
Download:<a href="http://plugins.jquery.com/project/niceTitle" title="Download from jQuery.com">jQuery niceTitle plugin</a>
</div>
<div style="height: 50px; width: 300px; background-color: #6CF;" title="I am a div wraps a span.">
<span id="test-span" title="I am a span.">I am a span.</span>
</div>
<div style="width: 1000px; background-color: #339; text-align: left;" title="Information about niceTitle.">
/*<br />
* jQuery niceTitle plugin<br />
* Version 1.00 (1-SEP-2009)<br />
* @author leeo(IT北瓜)<br />
* @requires jQuery v1.2.6 or later<br />
*<br />
* Examples at: http://imleeo.com/jquery-example/jQuery.niceTitle.html<br />
* Copyright (c) 2009-2010 IT北瓜www.imleeo.com<br />
* Dual licensed under the MIT and GPL licenses:<br />
* http://www.opensource.org/licenses/mit-license.php<br />
* http://www.gnu.org/licenses/gpl.html<br />
<br />
*History:<br />
*Version 1.00 (1-SEP-2009) The first release<br />
*Version 1.10 (7-SEP-2009) Fixed the bug in IE when change parameter "bgColor"(add code: line: 68,69)<br />
*Version 1.20 (14-SEP-2009) Hide the "img"'s alt and title attributes if "a" includes an image.(code line: 21,46-53,84-87)<br />
*Version 2.00 (19-SEP-2009) Now niceTitle can works for all HTML tags. Thanks <font color="#FF0000">Macek</font>'s advice.<br />
*/
</div>
</body>
</html>