我们开发的网站,总有它一定的用途。如企业站用来宣传企业或展示产品,技术站用来分享自己的思路和经验。既然网站有了它的用途,那么就拥有了它本身的关键词(关键词说明网站的主要内容)。例如企业站的关键词大部分是企业名称或产品名称,技术站的关键词大部分是技术术语。不论是企业宣传产品或分享思路经验,我们都想给某些术语加上说明或链接(跳转到术语页面),这时我们就可以使用cluetip插件。

1.     cluetip插件功能

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

<a class="custom-width" href="ajax3.html" rel="ajax3.html">关键词</a>

会读取ajax3.html页面的内容

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

2.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字

3.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>

在线演示:关键词说明插件cluetip 测试

网站开发常用jQuery插件总结(六)关键词说明插件cluetip的更多相关文章

  1. 网站开发常用jQuery插件总结(八)标签编辑插件Tagit

    一.Tagit插件功能 提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关 ...

  2. 网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  3. 网站开发常用jQuery插件总结(二)弹出层插件Lightbox

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  4. 网站开发常用jQuery插件总结(12)固定元素插件scrolltofixed

    这个插件在前段时间用过一次,当时是改一个网站.要求顶部的菜单栏随着滚动条的滚动而固定.也大体写了一下,不过在文章中也只是提了一下,文章地址:jQuery插件固定元素位置. 在这篇文章中,再进行总结一下 ...

  5. 网站开发常用jQuery插件总结(11)折叠插件Akordeon

    实现折叠菜单,可以完全不使用插件.如果使用jquery的话,实现起来也比较简单,我们只需要定义折叠菜单的样式,然后使用jquery中的渐隐渐现就可以了.如果我们自己写折叠菜单,可以方便的使用我们自己的 ...

  6. 网站开发常用jQuery插件总结(十)菜单插件superfish

    网站对于菜单的依赖其实并不是很大,我们完全可以不使用菜单来设计网站,显示网站内容.但是如果网站的分类太多,“也许”使用菜单作为网站导航可以使 用户 更方便的寻找内容.superfish插件就是用于实现 ...

  7. 网站开发常用jQuery插件总结(七)背景插件backstretch

    一.backstretch插件功能 优化网站外观.主要用于设置页面背景图片,也可以设置html元素的背景图片.背景图片可以设置多张,在间隔时间内循环显示. 注 但是在设置背景图片时,如果图片过大,网站 ...

  8. 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller

    网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条 ...

  9. 网站开发常用jQuery插件总结(15)上传插件blueimp

    在介绍这个插件之前,先吐槽一下.这个插件功能很强大.带有的功能有:上传(单个文件或批量文件),自动上传或点击按钮上传,上传前缩略图显示,判断文件格式,上传前的文件操作,上传时进度条显示等功能.如果你用 ...

随机推荐

  1. 利用ACE 自己实现的线程池

    1: 线程池组件的配置文件: [log] ;DEBUG = 0 ;INFO = 1 ;WARN = 2 ;FAULT = 3 level=0 ;SCREENOUT = 0 ;FILEOUT = 1 ; ...

  2. 【推荐】JAVA基础◆浅谈3DES加密解密

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  3. cocos2d-x 绘制基本图元

    转自:http://4137613.blog.51cto.com/4127613/754729 第一部分:基本图形绘制   cocos2dx封装了大量opengl函数,用于快速绘制基本图形,这些代码的 ...

  4. IOS 获取屏幕尺寸

    CGRect frame = [[UIScreen mainScreen] bounds];    NSLog(@"frame :%@",frame); 这样输入是null NSL ...

  5. 免费安卓IOS测试API接口,后续会陆续增加接口

    各位博友好!开发的安卓或者ios的朋友们,经常会遇到想测试但是没有公开的api接口进行进行测试.但自己又不会开发服务端或者没有服务器,这里我免费提供了一整套API接口.欢迎大家调用,目标是方便大家. ...

  6. TransactionScope 对该事务的状态无效 和一些注意事项

    使用TransactionScope 的时候要操作同一种数据库操作方式,不能一个方法用ado.net ,另外一个方法用EF,那样会报 "该事务管理器已经禁止了它对远程/网络事务的支持&quo ...

  7. js 获取浏览器版本号

    1.在web开发中,会常常让你推断当前使用的是那个浏览器及浏览器的那个版本号,依据浏览器版本号来调整CSS的样式, 使在web界面在各个浏览器展现达到最佳的效果,以下是获取当前浏览器的代码: getB ...

  8. NSMakeRange基础函数应用

    NSRange NSMakeRange ( NSUInteger loc, NSUInteger len ); 这是官方得接口描述.loc 为location缩写,len 表示长度.作用:在loc指定 ...

  9. apache配置directoryindex

    为了让程序自动执行目录下的某个文件,可以配置虚拟主机中的directoryindex 如: <VirtualHost *:80>    DocumentRoot "D:/var/ ...

  10. 我们应该如何去了解JavaScript引擎的工作原理 系列

    http://www.nowamagic.net/librarys/veda/detail/1579