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 Cookie的读取和写入函数
Dec 08 Javascript
javascrip关于继承的小例子
May 10 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
JS简单随机数生成方法
Sep 05 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
BootStrap 导航条实例代码
May 18 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 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
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python函数式编程
2017/07/20 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
SQL面试题
2013/12/09 面试题
小学生评语大全
2014/04/18 职场文书
党员批评与自我批评
2014/10/15 职场文书
社区党务工作总结2015
2015/05/19 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python