开发者社区> 冰点沐雪> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery 提示简单效果插件 cluetip

简介: 介绍一个不错的jquery插件-cluetip 我们在做web项目的时候,经常会使用到提示效果。html自带的提示效果是label标签的title,但是这个效果过于简单和难看,并且不方便调整样式。 今天我偶然发现个jQuery的插件,可以很方便的做出漂亮的提示效果。
+关注继续查看

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

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

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

来分享下吧!先看效果

接下来我们开始写代码:

   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里添加方法:

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

5 自己写的css部分:

View Code
.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');; 
}); 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1094 0
8款效果精美的 jQuery 加载动画和进度条插件
  加载动画和进度条在网站和 Web 应用中的使用非常流行。虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高。在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式。
1035 0
jquery插件 --- 展示信息
效果图如下: 要求:成功时加载商品信息,失败时提示重新加载。其中,总个数,当前页,上一页和下一页是前台页面模拟的。只在页面加载时请求一次。   代码: ;(function($){ $.
610 0
jquery插件图片浏览改进版
在关于《jquery插件图片浏览》中遗留一个问题,“有点小问题:当图片第一次加载没完成的时候,这时图片没有显示,会自动执行到下一张图片” 改进版代码如下: (function($){ $.
729 0
一个非常棒的jQuery 评分插件--好东西要分享
  现在做网页已经不仅限于实现功能了,更多的是要实现功能的同时追求更加美观的实现。比如页面上让用户评分的功能,你完全可以放5个RdioButton让用户选择分数,也可以用DropDownList来实现,但那样不如用五个星星来得炫来得直观。
976 0
分享一个jquery插件-主要用于显示微博人的图像和鼠标提示等poshytip
大家国庆快乐! 这种效果常常有两个需求   1 鼠标移动到人图像上时,显示这个人的信息,鼠标离开人图像时隐藏这个人的相关信息 2当鼠标移动到到人的信息块时,信息依然显示,当鼠标离开人的信息块时,信息隐藏 3 必须是自动关闭而不是手动关闭 例如: 通常第一个比较容易满足,但是第一个在...
730 0
jquery插件图片浏览
jquery插件图片浏览 jquery代码部分 (function($){ $.fn.mPicsList = function(options){ var picsImgs = $(this).
670 0
200个 jquery插件
引用:http://paranimage.com/jquery-plugin-list/ jquery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架。
1467 0
推荐六款帮助你实现惊艳视差滚动效果的 jQuery 插件
  视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变"。在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果。
1044 0
+关注
冰点沐雪
专业从事软件开发(asp.net)近10年。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载