jquery信息提示框中如何进行clueTip的应用-创新互联

本篇文章为大家展示了jquery信息提示框中如何进行clueTip的应用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

成都创新互联公司长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为西陵企业提供专业的成都网站制作、成都网站设计、外贸营销网站建设，西陵网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

clueTip是一款非常不错的，基于jQuery的信息提示插件。当鼠标滑向链接或者页面中的元素，会出现一个漂亮的提示框。提示框里的内容可以是本页面上的，也可以是通过ajax加载的的页面，clueTip还提供了许多可配置的参数，用户可以根据实际情况定制不同的效果和样式。

clueTip有以下特性：

使用非常简单；

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

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

可以ajax加载页面内容

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

XHTML

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

1、通过title属性加载内容

鼠标滑向看看效果

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

Ajax加载PHP页面

Javascript和样式

在之间加入jquery和clueTip插件以及样式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');; });

上述内容就是jquery信息提示框中如何进行clueTip的应用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

本文名称：jquery信息提示框中如何进行clueTip的应用-创新互联
转载注明：http://mswzjz.cn/article/cedogs.html