jQuery tooltips运用
为了做漂亮的气球信息提示框以替换HTML标签中的title属性，BeautyTips (基于jquery的一个插件)完成了这一想法
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
这是demo,蛮漂亮的,在开发过程中有两个重要设置不要忽略了：
jQuery.bt.options.ajaxLoading = '<img src="/images/throbber.gif" width="40" height="40" />';//如果做ajax气球框，那么在interactive这段时间显示一个加载图片以给用户友好提示正在交互信息
jQuery.bt.options.closeWhenOthersOpen = true;//顾名思义，当打开一个气球的时候其他气球都关闭，这个如果不设置的话页面上会弹出很多气球框，让人很烦。。
http://plugins.jquery.com/project/bt,这是jquery BT的介绍,有一点要说明一下,这个效果是基于HTML5标准的(使用到canvas 元素),由于IE浏览器不支持此标签,所以要额外添加一个js库excanvas.js
另外在demo页面会看到如下一段话：
BeautyTips has been tested with jQuery 1.2.6 and 1.3 on Firefox 3.x, Safari 3.x (also works on iPhone!), IE 6.x+, and Opera 8+, but I'm sure other canvas-capable browsers will work as well.
测试时jquery的版本是1.2.6和1.3.x的，不过本人测试jquery1.4.2也是可以用的
下边是个小例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery tooltips</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<!-- <script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.min.js"></script> -->
<script type="text/javascript" src="js/excanvas.min.js"></script>
<!-- <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>-->
<script type="text/javascript" src="js/jquery.bt.min.js"></script>
<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript">
$(document).ready( function() {
jQuery.bt.options.closeWhenOthersOpen = true;
$('#context a').bt({
contentSelector: "$(this).attr('href')",//动态取得某些元素的内容
trigger: 'mouseover',
positions: ['right'] ,
hoverIntentOpts : {interval :0,timeout :0}
});
$('#example1 a').bt('发到qqq',{
showTip : function(box){
$(box).fadeIn(500);
},
hideTip : function(box, callback) {
$(box).animate({
opacity :0
}, 500, callback);
},
shrinkToFit :true,
hoverIntentOpts : {
interval :100,
timeout :100
}
});
});
/*
//为了在项目中简化调用及统一修改可以写成一个公用方法
function tips(args){
jQuery.bt.options.ajaxLoading = '<img src="/images/throbber.gif" width="40" height="40" />';
jQuery.bt.options.closeWhenOthersOpen = true;
$('#'+args.id).bt({
contentSelector: args.title,//动态取得某些元素的内容
trigger: 'mouseover',
positions: ['right'] ,
hoverIntentOpts : {interval :0,timeout :0}
});
}
*/
function car(brand,color){
this.brand=brand;
this.color=color;
}
alert(JSON.stringify(new car("BMW","white")));
</script>
</head>
<body>
<pre>
-----
-
--
-
-----
-
--
-
-----
-
--
-
-----
-
--
-
-----
-
--
-
</pre>
<div id="context">
主页
<a href="http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html">
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html </a>
<br>
<a href="http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html">
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html </a>
<br>
<a href="http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html">
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html </a>
http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/
</div>
<br>
<br>
<div id="example1" >
<a href="javascript:">
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html </a>
<br>
<a href="http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html">
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html </a>
<br>
<a href="http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html">
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html </a>
</div>
<a href="javascript:window.close();">关闭</a>
</body>
</html>