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语句中的CDATA标签的意义
May 09 Javascript
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
jquery图形密码实现方法
Mar 11 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
纯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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
javascript 实现map集合
2015/04/03 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
python list转dict示例分享
2014/01/28 Python
python递归实现快速排序
2018/08/18 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
毕业生的自我评价范文
2013/12/31 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
新三好学生主要事迹
2014/01/23 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
美容院经理岗位职责
2014/04/03 职场文书
委托书格式
2014/08/01 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书