jquery 提示简单效果插件 cluetip

时间：2024-07-21 17:03:56

介绍一个不错的jquery插件-cluetip

我们在做web项目的时候，经常会使用到提示效果。html自带的提示效果是label标签的title，但是这个效果过于简单和难看，并且不方便调整样式。

今天我偶然发现个jQuery的插件，可以很方便的做出漂亮的提示效果。

来分享下吧！先看效果

jquery 提示简单效果插件 cluetip

接下来我们开始写代码：

1.先将js，css,图片都拷贝到程序里,注意图片的路劲，如果与给的例子不一致，则需要修改css里的图片引用路径。

2. 页面头部引用:

 <link href="style/jquery.cluetip.css" rel="stylesheet" />
 <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>

     <script src="js/jquery.cluetip.js" type="text/javascript"></script>

3.内容部分：

 <span class="stutip1" title="<table class='tb_tip'><tr><td>日期</td><td>学历</td><td>学校</td><td>专业</td></tr></table>|<div class='div_ctip'>2007.9-2010.7</div><div class='div_ctip'> 高中</div><div class='div_ctip'>上海某某中学</div><div class='div_ctip'> 无 </div>" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(153, 0, 0); ">格式</span>

4.在js里添加方法：

jquery 提示简单效果插件 cluetip
 <script type="text/javascript">
        $(function () {
   $('.stutip').css({ borderBottom: '1px solid #900' }).cluetip({
                splitTitle: '|',
                arrows: true,
                dropShadow: false,
                width:520,
                cluetipClass: 'jtip'
            }
            );
   });
 </script>
jquery 提示简单效果插件 cluetip

5 自己写的css部分：

.div_ctip
{
float:left;

padding:0px 30px 0px 30px;
}
.div_ctip1
{
float:left;

padding:0px 30px 0px 3px;

}

.div_ctip2
{
float:left;

padding:0px 20px 0px 15px;

}

自此，大功告成！

接下来，我们在找下相关的资料，整理下，以后进一步学习和使用。

1. gitHub 地址以及下载地址： https://github.com/kswedberg/jquery-cluetip

也可以从我这边下载：文件下载！！

2.学习可以下载demo自己看下。

3.学习，学会使用百度。关键词：jquery cluetip

一下是我找到的比较好的文章内容截取：

clueTip有以下特性：

使用非常简单；

可定制，提供大量参数可配置；

提示窗口根据页面大小可以自动调整位置；

可以ajax加载页面内容

跨浏览器兼容，兼容IE6+,Firefox,Safria,Opera等主流浏览器。

XHTML

clueTip有两种展示提示窗口的方法，分为通过“rel”属性ajax加载远程页面内容和通过“title”属性（默认设置）加载页面内容。

1、通过title属性加载内容

 <a class="title" href="#" title="提示窗口标题|内容.|内容分行。。。">鼠标滑向看看效果</a> 

2、通过rel属性加载远程页面内容

 <a class="basic" href="ajax.php" rel="ajax.php" title="加载AJAX页面">Ajax加载PHP页面</a> 

Javascript和样式

在<head>之间加入jquery和clueTip插件以及样式clueTip.css。

 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cluetip.js"></script> <script type="text/javascript"> $(function(){     $('a.title').cluetip({splitTitle: '|'});     $('a.basic').cluetip(); }); </script> <link rel="stylesheet" type="text/css" href="cluetip.css" /> 

clueTip插件常用参数一览表

参数 描述 默认值
width 提示窗口的宽度 275
height 提示窗口的高度 'auto'
positionBy 设置提示窗口的位置：'auto', 'mouse','bottomTop', 'fixed' 'auto'
topOffset 窗口相对（上）位移量 15
leftOffset 窗口相对（左）位移量 15
local 是否使用同一页面的内容，可以是页面中的一个DIV，这时应该设置rel="#ID" false
attribute 用来承接窗口内容的属性 rel
titleAttribute 窗口标题属性 title
splitTitle 设置内容分隔符 ''
showTitle 是否显示标题 true
cluetipClass 窗口的样式，样式的名称格式为.cluetip-cluetipClass default
waitImage 是否显示内容载入前的等待loading图片。 true
sticky 是否当手工单击关闭时才关闭窗口 false
closePosition 设置关闭按钮的位置：'top' or 'bottom' or 'title' 'top
closeText 关闭按钮显示的内容，可以是文本，也可以是html图片 'Close'

更多参数设置请到官方网站查看：http://plugins.learningjquery.com/cluetip/

cluptip在用户点击了链接后，页面不会转向href地址，而是一点反应都没有，那怎么解决点了链接后直接转向该链接的页面呢？解决办法有：绑定a标签的click事件,代码如下：

 $('a.basic).bind('click',function(){     window.location.href=$(this).attr('href');; }); 

作者：沐雪

转自：http://www.cnblogs.com/puzi0315/archive/2013/02/19/2917577.html

相关文章