今天想给单位的系统弄一个提示插件,懒得自己做,于是就上网百度了几个jQuery插件,挺好用的。下面以tooltipsy插件为例,说明如何使用这些插件。
一、下载
首先到tooltipsy的官网http://tooltipsy.com/下载插件tooltipsy.min.js。貌似官网下载有问题,我是从CSDN下载下来的。
二、安装
在页面引入以下javaScript代码:
1 <script type="text/javascript" src="/path/to/tooltipsy.min.js"></script>
当然,具体路径需要根据实际情况修改。
三、编写样式表
在页面引入以下样式表代码:
1 <STYLE type="text/css"> 2 .tooltipsy { 3 padding: 10px; 4 max-width: 200px; 5 color: #303030; 6 background-color: #f5f5b5; 7 border: 1px solid #deca7e; 8 } 9 </STYLE>
当然这仅仅是最简单的配置,如果有特殊需求,可以查阅官方文档进行相关修改。
四、使用
在HTML部门中的元素,只要在元素属性中加入如下内容就可以使用了,例如:
1 <div> 2 <a class="hastip" title="看到提示了吧" >来摸我</a> 3 </div>
将需要产生tip效果的元素的class属性设置为hastip,title属性设置为需要显示的语句。
在页面中的显示如下:
只要把鼠标移动到相关代码部分,就会弹出提示框。
其他的插件使用方法大同小异
更多的提示插件请看http://www.5icool.org/a/201209/710.html