cluetip关键词链接插件用法简单介绍

快乐打工仔 分类:实例代码

很多网站都有这样的功能,那就是可以对特定的关键词添加链接功能,点击这个关键词可以进入相关的词条。比如百度百科和维基百科都有这样的功能,对于展示相关的产品信息或者广告有着良好的效果。

使用cluetip插件可以实现类似的功能,下面介绍一下它的使用方式。

一.cluetip插件功能:

功能图示如下:

前端教程

主要用于为某些关键词添加提示说明功能,也可以展示广告。cluetip插件可以读取另一个html文件中的内容,

如<a class="custom-width" href="ajax3.html" rel="ajax3.html">关键词</a>会读取ajax3.html页面的内容

官方地址demo中有使用说明。

二.cluetip官方地址:

https://github.com/kswedberg/jquery-cluetip。

在官方地址上有插件的详细使用说明。

最常用的属性:

splitTitle: '|' 标题和内容的分隔符。

sticky: true    是否开启强制关闭 true 为开启。必须点击关闭,才能关闭当前提示。

closeText: '图片或文字'  关闭的图片或文字展示,如<img src="cross.png" alt="" />。

closePosition: 'title' 关闭按钮的位置。

dropShadow: false  是否添加阴影 true为添加,false为不添加。

positionBy: 'mouse'  提示窗体是否按鼠标位置移动。

truncate: 60   截取长度,说明长度过长时,只取前60字。

三.cluetip使用方法:

(1).引用文件:

<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="jquery.cluetip.js"></script>

(2).定义样式:

以使用官方的样式,也可以自定义。

自定义时需修改jquery.cluetip.css文件。

如本例所示:

body{
  font-size:12px;
  font-family:微软雅黑;
}
p{
  width:500px;
}
.split-body a{
  color:blue;
}

(3).使用的js代码:

$(function(){
  $('a.javascript').cluetip({splitTitle: '|',width: '200px', showTitle: false});
  $('a.html').cluetip({
      splitTitle: '|',
      sticky: true,
      closeText: '<img src="cross.png" alt="" />',
      closePosition: 'title',
      dropShadow: false,
      positionBy: 'mouse'
      //truncate: 60
  });
});

(4).用到的html:

<a href='#' title='提示标题|提示内容' class='样式'>关键词</a>

回复

我来回复
  • 暂无回复内容