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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
vue路由插件之vue-route
Jun 13 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 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
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
Python中的并发编程实例
2014/07/07 Python
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
python爬虫请求头的使用
2020/12/01 Python
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
行政助理岗位职责
2013/11/10 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL
python中validators库的使用方法详解
2022/09/23 Python