[js插件]分享一个文章内容信息提示插件Colortip
引用
项目中需要一个信息提示的功能，就上网找了一个插件，发现colortip实现比较简单，就定了这个插件。
实现过程
官网：http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/
最终要实现的效果：
colortip是将标签中的title属性的值弹出显示的，默认情况是黄色的：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--css文件-->
<link href="Colortip/styles.css" rel="stylesheet" />
<link href="Colortip/colortip-1.0/colortip-1.0-jquery.css" rel="stylesheet" />
</head>
<body>
<div style="text-align:center;margin-top:200px;"><a href="#" title="这是个大美女">美女</a></div>
<div style="text-align:center;margin-top:250px;"><a href="#" title="这是个大美女" class="black">美女</a></div>
</body>
</html>
<!--引入需要的js-->
<script type="text/javascript" src="Script/jquery-1.11.0.js"></script>
<script type="text/javascript" src="Colortip/colortip-1.0/colortip-1.0-jquery.js"></script>
<script type="text/javascript" src="Colortip/script.js"></script>
效果：
通过查看这些设置，是在colortip-1.0-jquery.js文件中进行配置的：
(function($){
$.fn.colorTip = function(settings){
var defaultSettings = {
color : 'yellow',//默认颜色
timeout : 500
}
var supportedColors = ['red','green','blue','white','yellow','black'];//总共有6种主题的颜色
/* Combining the default settings object with the supplied one */
settings = $.extend(defaultSettings,settings);
/*
* Looping through all the elements and returning them afterwards.
* This will add chainability to the plugin.
*/
return this.each(function(){
var elem = $(this);
// If the title attribute is empty, continue with the next element
if(!elem.attr('title')) return true;
// Creating new eventScheduler and Tip objects for this element.
// (See the class definition at the bottom).
var scheduleEvent = new eventScheduler();
var tip = new Tip(elem.attr('title'));
// Adding the tooltip markup to the element and
// applying a special class:
elem.append(tip.generate()).addClass('colorTipContainer');
// Checking to see whether a supported color has been
// set as a classname on the element.
var hasClass = false;
for(var i=0;i<supportedColors.length;i++)
{
if(elem.hasClass(supportedColors[i])){
hasClass = true;
break;
}
}
// If it has been set, it will override the default color
if(!hasClass){
elem.addClass(settings.color);
}
// On mouseenter, show the tip, on mouseleave set the
// tip to be hidden in half a second.
elem.hover(function(){
tip.show();
// If the user moves away and hovers over the tip again,
// clear the previously set event:
scheduleEvent.clear();
},function(){
// Schedule event actualy sets a timeout (as you can
// see from the class definition below).
scheduleEvent.set(function(){
tip.hide();
},settings.timeout);
});
// Removing the title attribute, so the regular OS titles are
// not shown along with the tooltips.
elem.removeAttr('title');
});
}
/*
/ Event Scheduler Class Definition
*/
function eventScheduler(){}
eventScheduler.prototype = {
set : function (func,timeout){
// The set method takes a function and a time period (ms) as
// parameters, and sets a timeout
this.timer = setTimeout(func,timeout);
},
clear: function(){
// The clear method clears the timeout
clearTimeout(this.timer);
}
}
/*
/ Tip Class Definition
*/
function Tip(txt){
this.content = txt;
this.shown = false;
}
Tip.prototype = {
generate: function(){
// The generate method returns either a previously generated element
// stored in the tip variable, or generates it and saves it in tip for
// later use, after which returns it.
return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
'<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));//显示的消息提示框是一个span标签
},
show: function(){
if(this.shown) return;
// Center the tip and start a fadeIn animation
this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
this.shown = true;
},
hide: function(){
this.tip.fadeOut();
this.shown = false;
}
}
})(jQuery);
通过该js文件，可见该插件主要是在title属性中设置显示信息的。
总结
colortip用起来还是非常简单的，在想要提示信息的地方加个带title属性的a标签就可以了，不过有点差强人意的地方，如果其他的标签例如按钮，加一个title，就会提示错误。
[js插件]分享一个文章内容信息提示插件Colortip的更多相关文章
- 仿网易邮箱5.0(四)：信息提示插件(tips.js)
信息提示插件,在平常的开发中也是经常乃至的一个插件,像是一些辅助信息的提示,如:加载成功.提交信息成功或失败等等.这个插件在163邮箱中用在切换标签时提示加载状态. 下面我们先来分析一下这个小插件需要 ...
- 分享一个JQuery弹出层插件
JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...
- 自己写的一个简单的jQuery提示插件
代码: /** * 2014年11月13日 * 提示插件 */ (function ($) { $.fn.tips = function (text) { var divtipsstyle = &qu ...
- JS~Boxy和JS模版实现一个标准的消息提示框
面向对象的封装 面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...
- windows下使用python的scrapy爬虫框架，爬取个人博客文章内容信息
scrapy作为流行的python爬虫框架,简单易用,这里简单介绍如何使用该爬虫框架爬取个人博客信息.关于python的安装和scrapy的安装配置请读者自行查阅相关资料,或者也可以关注我后续的内容. ...
- 分享一个Visual Studio的背景插件，让堆码更富情趣
忘记一件重要的事情,我使用的是VS 2012版,其他更高版本应该是可以找到的,以下版本就不清楚了.有可能找不到,见谅,也不是我开发的,只是偶尔碰到,拿出来让大家知道. 上周某日,新生命群里面还是一如既 ...
- 分享一个jQuery动态网格布局插件：Masonry(转)
在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排 ...
- 分享一个废弃已久的插件架构 (.Net)
框架介绍 1:将插件暴露的页面数据接口复用到任何 WebForm和Mvc 架构的系统. 2:插件可在线卸载,发布,更新. 3:插件可分布式 独立 部署. 4:插件之间完全解耦,通过Url跳转 相互不需 ...
- 今天再分享一个TextView内容风格化的类
/* * Copyright (C) 2014 Jason Fang ( ijasonfang@gmail.com ) * * Licensed under the Apache License, V ...
随机推荐
- u-boot启动第一阶段
目标板:2440开发板 u-boot启动的第一阶段是在文件start.S中完成的,这个过程对不同硬件平台的设置是不同的.下面进入start.S _start: b reset //跳转到reset / ...
- IP地址及子网--四种IP广播地址
国际规定:把所有的IP地址划分为 A,B,C,D,E. 类默认子网掩码:A类为 255.0.0.0; B类为 255.255.0.0; C类为 255.255.255.0.子网掩码是一个32位地址,用 ...
- P1084 疫情控制
Solution 二分答案, 尽量往上跳, 不能跳到根节点. 仍然能跳的拿出来.看剩下的点没有覆盖哪个? 贪心的分配一下. Code 70 #include<iostream> #incl ...
- 解决IDEA导入Myclipse项目的时候没有识别为Web项目的问题
IDEA在导入一个MyEclipse新建的Web项目的时候,一般会正确检测这个项目是什么项目.不过有时候会出现各种问题. 1. 出现一些Jar包不存在的问题,一般是servlet-api这样的包不存在 ...
- ASP连接读写ACCESS数据库实例（转）
(一) 数据库的选择:有许多的数据库你可以选择,SQL SERVER.ACCESS(*.mdb).EXCEL(*.xls).FOXPRO(*.dbf)甚至普通的文本文件(*.txt)都可以达到存储 ...
- jmeter-----查看结果树
在编写接口测试脚本的时候,需要进行调试和查看结果是否正常的情况,这个时候可以使用查看结果树组件进行. 查看结果树中展示了每一个取样器的结果.请求信息和响应信息,可以查看这些内容去分析脚本是否存在问题. ...
- Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:
使用自己的jdk
- ubuntu16.04 内核源码编译
1)下载 首先看一下自己的内核版本 apt-cache search linux-source下载内核代码:sudo apt-get install linux-source-4.10.0 2)解压: ...
- Java 8 对 List<List<String>> 排序
Java 8 对 List<List> 排序 import java.util.ArrayList; import java.util.List; import java.util.str ...
- qrcode 生成二维码
qrcode 生成二维码 Demo: https://www.hgnulb.cn/freedom/qrcode/qrcode.html qrcodeGithub 地址: https://github. ...