介绍一个不错的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部分:

.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

jquery 提示简单效果插件 cluetip的更多相关文章

  1. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  2. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  3. 【treeview】 基于jQuery的简单树形插件

    [treeview] 效果图: 前几天想把后台的目录结构通过树形插件的方法反映到前端来,在网上搜了半天只找到了这个treeview,虽然不是很好看,不过还是够用的..用treeview的前提是要有jq ...

  4. 15 个最佳 jQuery 翻书效果插件

    本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1.  BookBlock BookBlock可以将任何内容(如图像.文本)创建 ...

  5. jQuery Lightbox效果插件Boxer

    演示:http://www.jq22.com/yanshi1139 下载:链接: https://pan.baidu.com/s/1o8zaV2q 密码: 2ccy Boxer 是一款基于 jQuer ...

  6. 推荐12款实用的 JavaScript 书页翻转效果插件

    Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一.他们可以用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内 ...

  7. jquery 提示插件 cluetip

    jquery的 插件cluetip, 地址下载是:plugins.learningjquery.com/cluetip/demo/ 下面简单讲解下用法: 1 首先当然要放JQUERY的基本JS,和这个 ...

  8. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  9. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

随机推荐

  1. sql批量修改插入数据

    1.批量修改 select 'update 读者库 set 单位代码='''+新单位代码+''' where 单位代码='''+单位代码+'''' from 读者单位 ,)<'L' and is ...

  2. Winform菜单之ContextMenuStrip

    ContextMenuStrip实际就是上下文菜单,就是右键单击某个窗体或者控件后出来的菜单. 从工具栏里拖一个出来放在窗口上就行 然后进行一系列的设置,设置方法跟前面的MenuStrip基本是一样的 ...

  3. 【代码】ini 文件读取工具类

    using System; using System.Runtime.InteropServices; using System.Text; namespace hrattendance.Common ...

  4. SQLServer2005中查询语句的执行顺序

    SQLServer2005中查询语句的执行顺序   --1.from--2.on--3.outer(join)--4.where--5.group by--6.cube|rollup--7.havin ...

  5. 浅谈Objective-C编译器指令

    ------<a href="http://www.itheima.com" target="blank">Java培训.Android培训.iOS ...

  6. 算法系列4《Luhn》

    Luhn算法由IBM的Hans Peter Luhn发明,又称为"模10"算法,是一种简单的校验和算法,用来验证识别号,一般会被用于身份证号码,信用卡号.IMEI号.社会保险号的验 ...

  7. quartz集群调度机制调研及源码分析---转载

    quartz2.2.1集群调度机制调研及源码分析引言quartz集群架构调度器实例化调度过程触发器的获取触发trigger:Job执行过程:总结:附: 引言 quratz是目前最为成熟,使用最广泛的j ...

  8. sychronized面试问题浅析

    先说下面试吧,整体来说基础准备好点,简历别太假,然后回答起来实事求是,表现自然的点基本上都没问题吧(针对初级职位,记得有个hr说过对于新人基础扎实和为人真诚是最关键的),两天时间跑起来挺累,反而觉得面 ...

  9. linux php安装zookeeper扩展

    linux php安装zookeeper扩展 tags:php zookeeper linux ext 前言: zookeeper提供很犀利的命名服务,并且集群操作具有原子性,所以在我的多个项目中被采 ...

  10. require.js的用法

    我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文 ...