利用jQuery写的Tips(提示)效果

不得不说,jQuery真的很强大。今天突然想用jQuery替换掉原来的Tips提示功能。因为我考虑到原本的Tips插件“title”的值必须要有“::”这类的字符来区分标题和正文,有点不太友好。

我用Tips主要使用在“abbr”和“acronym”标签中,大家应该都知道,“abbr”是缩写的意思,“acronym”是取首字母的缩写词。原本的插件必需在“title”中加入“::”才会达到好的效果:

在这看来这样是错误的,CSS是Cascading Style Sheets取首字母后的缩写词,而并非是CSS::Cascading Style Sheets,但是要想使用原本的Tips实现效果,必须要将“title”的值设为“CSS::Cascading Style Sheets”。我自己写的Tips效果已经不存在这样的问题了,她会将CSS自动设置为Tips的标题来显示:

这样一来,不论是对用户还是搜索引擎都是很友好的,关键是这样做是正确的。

[Code]<!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" /> <title> Tips提示效果 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content="唏嘘一世"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <style> .tool-tips{ position: absolute; visibility: hidden; z-index: 13000; color: #fff; width:200px; } .tool-title{ font-size:13px; font-weight:bold; margin: 0; color: #9FD4FF; text-align: center; padding: 6px 6px 4px; background: url(http://zhangqian.me/theme/xixuyishi/bubble.png) top left; } .tool-text{ padding: 4px 8px 8px; font-size:12px; color: #cf9; background: url(http://zhangqian.me/theme/xixuyishi/bubble.png) bottom right; } </style> </head> <body> <script> $(document).ready(function(){ $(‘<div class="tool-tips"><div class="tool-title"></div><div class="tool-text"></div></div>’).appendTo(‘body’); $(‘abbr,acronym’).mouseover(function(){ $(this).css(‘cursor’,’help’); $(‘.tool-tips’).css(‘visibility’,’visible’); var xixu = this; if(xixu.title){xixu.yishi=xixu.title;xixu.title=”;} var dual = xixu.yishi.split(‘::’); if(dual.length>1){ myTitle = dual[0]; myText = dual[1]; }else{ myTitle = $(this).text(); myText = xixu.yishi; } $(‘.tool-title’).html(myTitle); $(‘.tool-text’).html(myText); }).mousemove(function(e){ $(‘.tool-tips’).css(‘top’,e.pageY+15); $(‘.tool-tips’).css(‘left’,e.pageX+15); }).mouseout(function(){ $(‘.tool-tips’).css(‘visibility’,’hidden’); }) }) </script> <abbr title="China">CN</abbr> <acronym title="Cascading Style Sheets">CSS</acronym> </body> </html>[/Code]