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 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
用Juery网页选项卡实现代码
Jun 13 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 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中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
php判断访问IP的方法
2015/06/19 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
Vue表单实例代码
2016/09/05 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
学习python类方法与对象方法
2016/03/15 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
财务人员的自我评价范文
2014/03/03 职场文书
优秀教师个人材料
2014/12/15 职场文书
小学端午节活动总结
2015/02/11 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
MySQL系列之四 SQL语法
2021/07/02 MySQL
Ajax异步刷新功能及简单案例
2021/11/20 Javascript