十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本篇文章为大家展示了jquery信息提示框中如何进行clueTip的应用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
成都创新互联公司长期为数千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为西陵企业提供专业的成都网站制作、成都网站设计、外贸营销网站建设,西陵网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。clueTip是一款非常不错的,基于jQuery的信息提示插件。当鼠标滑向链接或者页面中的元素,会出现一个漂亮的提示框。提示框里的内容可以是本页面上的,也可以是通过ajax加载的的页面,clueTip还提供了许多可配置的参数,用户可以根据实际情况定制不同的效果和样式。
使用非常简单;
可定制,提供大量参数可配置;
提示窗口根据页面大小可以自动调整位置;
可以ajax加载页面内容
跨浏览器兼容,兼容IE6+,Firefox,Safria,Opera等主流浏览器。
clueTip有两种展示提示窗口的方法,分为通过“rel”属性ajax加载远程页面内容和通过“title”属性(默认设置)加载页面内容。
1、通过title属性加载内容
2、通过rel属性加载远程页面内容
在
之间加入jquery和clueTip插件以及样式clueTip.css。
参数 描述 默认值 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的应用,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。