利用jQuery写的Tips（提示）效果
不得不说，jQuery真的很强大。今天突然想用jQuery替换掉原来的Tips提示功能。因为我考虑到原本的Tips插件“title”的值必须要有“::”这类的字符来区分标题和正文，有点不太友好。
我用Tips主要使用在“abbr”和“acronym”标签中，大家应该都知道，“abbr”是缩写的意思，“acronym”是取首字母的缩写词。原本的插件必需在“title”中加入“::”才会达到好的效果：
|
1 2 3 |
<acronym title="CSS::Cascading Style Sheets">CSS</a> <abbr title="CN::China">CN</abbr> |
在这看来这样是错误的，CSS是Cascading Style Sheets取首字母后的缩写词，而并非是CSS::Cascading Style Sheets，但是要想使用原本的Tips实现效果，必须要将“title”的值设为“CSS::Cascading Style Sheets”。我自己写的Tips效果已经不存在这样的问题了，她会将CSS自动设置为Tips的标题来显示：
|
1 2 |
<acronym title="Cascading Style Sheets">CSS</a> <abbr title="China">CN</abbr> |
这样一来，不论是对用户还是搜索引擎都是很友好的，关键是这样做是正确的。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(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'); }) } |
[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]
