Mingle索引
Web 3.0 即将来临,你准备好了吗?不妨一起分享一起尝试吧!此项目将采用开源方式不断扩充,定时更新版本(暂定为每周)和提供下载。欢迎大家使用和指正,
此气泡式提示部件可快速部署,易于使用,帮你快速的开发出漂亮的页面。
使用方式:
1.当前页面支持DOM模型;
2.链接不但得嵌入在块级的标签中,并且具有title和href两个属性;
3.当鼠标移动经过此链接时,显示美丽的提示。
组成部分:
l 2K的javascript文件;
l 很少的css文件;
l 一张图片;
l 简单的四段html即可展示她的芳容。
我们来看看那四段吧。
1.js文件的引用
1 <script type="text/javascript" src="BubbleTooltips.js"></script>
2.指定有效对象(区域)
我们可以把气泡式提示指定的任意区域,这些区域使用id来标识。
Code
1 <script type="text/javascript">
2 window.onload=function(){enableTooltips("content")};
3 </script>
4
5
3.html片段
Code
1 <span class="tooltip">
2 <span class="top">title of the link</span>
3 <b class="bottom">url of the link, max 30 chars</b>
4 </span>
5
6
4.Css文件
Code
1 tooltip,.tooltip *{display:block} /*added by javascript*/
2 .tooltip{ width: 200px; color:#000;
3
4 font:lighter 11px/1.3 Arial,sans-serif;
5
6 text-decoration:none;text-align:center}
7 .tooltip span.top{padding: 30px 8px 0;
8 background: url(bt.gif) no-repeat top}
9 .tooltip b.bottom{padding:3px 8px 15px;color: #548912;
10 background: url(bt.gif) no-repeat bottom}
11
12
源码下载:点击下载