网站开发常用jQuery插件总结(六)关键词说明插件cluetip
我们开发的网站,总有它一定的用途。如企业站用来宣传企业或展示产品,技术站用来分享自己的思路和经验。既然网站有了它的用途,那么就拥有了它本身的关键词(关键词说明网站的主要内容)。例如企业站的关键词大部分是企业名称或产品名称,技术站的关键词大部分是技术术语。不论是企业宣传产品或分享思路经验,我们都想给某些术语加上说明或链接(跳转到术语页面),这时我们就可以使用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的更多相关文章
- 网站开发常用jQuery插件总结(八)标签编辑插件Tagit
一.Tagit插件功能 提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关 ...
- 网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...
- 网站开发常用jQuery插件总结(二)弹出层插件Lightbox
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...
- 网站开发常用jQuery插件总结(12)固定元素插件scrolltofixed
这个插件在前段时间用过一次,当时是改一个网站.要求顶部的菜单栏随着滚动条的滚动而固定.也大体写了一下,不过在文章中也只是提了一下,文章地址:jQuery插件固定元素位置. 在这篇文章中,再进行总结一下 ...
- 网站开发常用jQuery插件总结(11)折叠插件Akordeon
实现折叠菜单,可以完全不使用插件.如果使用jquery的话,实现起来也比较简单,我们只需要定义折叠菜单的样式,然后使用jquery中的渐隐渐现就可以了.如果我们自己写折叠菜单,可以方便的使用我们自己的 ...
- 网站开发常用jQuery插件总结(十)菜单插件superfish
网站对于菜单的依赖其实并不是很大,我们完全可以不使用菜单来设计网站,显示网站内容.但是如果网站的分类太多,“也许”使用菜单作为网站导航可以使 用户 更方便的寻找内容.superfish插件就是用于实现 ...
- 网站开发常用jQuery插件总结(七)背景插件backstretch
一.backstretch插件功能 优化网站外观.主要用于设置页面背景图片,也可以设置html元素的背景图片.背景图片可以设置多张,在间隔时间内循环显示. 注 但是在设置背景图片时,如果图片过大,网站 ...
- 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller
网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条 ...
- 网站开发常用jQuery插件总结(15)上传插件blueimp
在介绍这个插件之前,先吐槽一下.这个插件功能很强大.带有的功能有:上传(单个文件或批量文件),自动上传或点击按钮上传,上传前缩略图显示,判断文件格式,上传前的文件操作,上传时进度条显示等功能.如果你用 ...
随机推荐
- 利用ACE 自己实现的线程池
1: 线程池组件的配置文件: [log] ;DEBUG = 0 ;INFO = 1 ;WARN = 2 ;FAULT = 3 level=0 ;SCREENOUT = 0 ;FILEOUT = 1 ; ...
- 【推荐】JAVA基础◆浅谈3DES加密解密
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- cocos2d-x 绘制基本图元
转自:http://4137613.blog.51cto.com/4127613/754729 第一部分:基本图形绘制 cocos2dx封装了大量opengl函数,用于快速绘制基本图形,这些代码的 ...
- IOS 获取屏幕尺寸
CGRect frame = [[UIScreen mainScreen] bounds]; NSLog(@"frame :%@",frame); 这样输入是null NSL ...
- 免费安卓IOS测试API接口,后续会陆续增加接口
各位博友好!开发的安卓或者ios的朋友们,经常会遇到想测试但是没有公开的api接口进行进行测试.但自己又不会开发服务端或者没有服务器,这里我免费提供了一整套API接口.欢迎大家调用,目标是方便大家. ...
- TransactionScope 对该事务的状态无效 和一些注意事项
使用TransactionScope 的时候要操作同一种数据库操作方式,不能一个方法用ado.net ,另外一个方法用EF,那样会报 "该事务管理器已经禁止了它对远程/网络事务的支持&quo ...
- js 获取浏览器版本号
1.在web开发中,会常常让你推断当前使用的是那个浏览器及浏览器的那个版本号,依据浏览器版本号来调整CSS的样式, 使在web界面在各个浏览器展现达到最佳的效果,以下是获取当前浏览器的代码: getB ...
- NSMakeRange基础函数应用
NSRange NSMakeRange ( NSUInteger loc, NSUInteger len ); 这是官方得接口描述.loc 为location缩写,len 表示长度.作用:在loc指定 ...
- apache配置directoryindex
为了让程序自动执行目录下的某个文件,可以配置虚拟主机中的directoryindex 如: <VirtualHost *:80> DocumentRoot "D:/var/ ...
- 我们应该如何去了解JavaScript引擎的工作原理 系列
http://www.nowamagic.net/librarys/veda/detail/1579