jQuery关键词说明插件cluetip使用指南


Posted in Javascript onApril 21, 2015

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

1.     cluetip插件功能

jQuery关键词说明插件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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
java必学必会之static关键字
Dec 03 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
vue中activated的用法
Jan 03 Vue.js
纯js实现重发验证码按钮倒数功能
Apr 21 #Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 #Javascript
jQuery验证插件validation使用指南
Apr 21 #Javascript
jQuery拖拽插件gridster使用指南
Apr 21 #Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 #Javascript
jQuery提示插件alertify使用指南
Apr 21 #Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 #Javascript
You might like
smarty实例教程
2006/11/19 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
PHP中使用BigMap实例
2015/03/30 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
浅谈js闭包理解
2019/04/01 Javascript
Python实现两款计算器功能示例
2017/12/19 Python
python3中的md5加密实例
2018/05/29 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
详解Django 时间与时区设置问题
2019/07/23 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
医学护理毕业生自荐信
2013/11/07 职场文书
岗位竞聘演讲稿
2014/01/10 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
销售简历自我评价
2014/01/24 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
检讨书1000字
2014/10/11 职场文书
小学教师年度个人总结
2015/02/05 职场文书
小学英语教师研修感悟
2015/11/18 职场文书