这是个加了点淡入淡出效果的顶部tooltip控件,会自动消失

用法:

<head>
<title></title>
<link href="base.css" rel="stylesheet" type="text/css" />
<link href="jquery.tooltip.less" rel="stylesheet/less" type="text/css"> <script src="less-1.4.2.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.tooltip.js" type="text/javascript"></script>
</head>
<body>
<div id="tooltipContainer" style="display:none;"></div>
<button onclick="javascript:tg1();">info</button>
<button onclick="javascript:tg2();">alert</button>
<button onclick="javascript:tg3();">hide</button>
<script language="javascript">
$("#tooltipContainer").tooltip(); //初始化
function tg1() {
$("#tooltipContainer").tooltip("info", "据你的使用和需求的不同...");
}
function tg2() {
$("#tooltipContainer").tooltip("alert", "据你的使用和需求的不同...");
}
function tg3() {
$("#tooltipContainer").tooltip("hide");
}
</script>
</body>

css

.tooltip_info
{
background:green;
font-size:20px;
border-radius: 10px;
}
.tooltip_alert
{
background:yellow;
font-size:20px;
border-radius: 10px;
}

jquery.tooltip插件js代码

(function ($) {
var methods = {
init: function (options) {
return this.each(function () { var $this = $(this);
var settings = $this.data('tooltip');
if (typeof (settings) == 'undefined') {
var defaults = {
infoCss: 'tooltip_info',
alertCss: 'tooltip_alert',
disappearTime: 1000
}
settings = $.extend({}, defaults, options);
$this.data('tooltip', settings);
} else {
settings = $.extend({}, settings, options);
$this.data('tooltip', settings);
}
$tooltip = $("#tooltip");
$tooltip.hide();
if ($tooltip.length == 0) {
$tooltip = $("<div></div>");
$('body').prepend($tooltip);
$tooltip.hide();
}
})
},
info: function (options) {
return this.each(function () {
var $this = $(this);
var setting = $this.data('tooltip'); clearTimeout($this.data("autoDisappearHandle"));
$tooltip.html(options);
$tooltip.removeClass(setting.alertCss).addClass(setting.infoCss);
$tooltip.fadeIn();
var hideTooltip = function () {
$tooltip.fadeOut();
}
$this.data("autoDisappearHandle", setTimeout(hideTooltip, setting.disappearTime));
})
},
alert: function (options) {
return this.each(function () {
var $this = $(this);
var setting = $this.data('tooltip'); clearTimeout($this.data("autoDisappearHandle"));
$tooltip.html(options);
$tooltip.removeClass(setting.infoCss).addClass(setting.alertCss);
$tooltip.fadeIn();
var hideTooltip = function () {
$tooltip.fadeOut();
}
$this.data("autoDisappearHandle", setTimeout(hideTooltip, setting.disappearTime));
})
},
hide: function () {
return this.each(function () {
var $this = $(this);
clearTimeout($this.data("autoDisappearHandle"));
$tooltip.fadeOut();
})
}
}; $.fn.tooltip = function () {
var method = arguments[0];
if (methods[method]) {
method = methods[method];
arguments = Array.prototype.slice.call(arguments, 1);
} else if (typeof (method) == 'object' || !method) {
method = methods.init;
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
return this;
} return method.apply(this, arguments); } })(jQuery);

不知猴年马月才能学成前端。

jquery tooltip的更多相关文章

  1. 30个非常流行的提示信息插件(jQuery Tooltip Plugin)

    在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...

  2. jquery tooltip插件

    qtip2:http://qtip2.com/ bower install qtip2 // lowercase! 引入一个css和插件即可. <script type="text/j ...

  3. jquery tooltip.js

    1.引用关联的js脚本 <script type="text/javascript" src="script/jquery-1.3.2.min.js"&g ...

  4. jquery插件colortip(tooltip类型)

    效果预览:http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortips.html 源代码下载:http: ...

  5. 经验分享:10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  6. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

  7. 240个jquery插件(转)

    http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/File upload Ajax File U ...

  8. jQuery插件开发--(转)

    1,开始 可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字: jQuery.fn.myPlugin = function(){ //开始写你的代码吧! ...

  9. jQuery插件开发详细教程

    这篇文章主要介绍了jQuery插件开发详细教程,将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱,需要的朋友可以参考下 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间. ...

随机推荐

  1. Markdown介绍及工具推荐

    什么是Markdown? Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.百度百科markdown 还没听说过Markdown?那赶 ...

  2. ERP项目应该由谁来主导?

    前段时间在朋友圈看到了别人分享的公众号,主要是谈ERP项目应该由谁来主导的问题.文章的观点认为应该由哪个部门主导ERP的判断标准如下: 1.应该由一个期望上进的部门主导ERP项目: 2.应该由一个有话 ...

  3. 移动Web前端,游客点击商品的收藏按钮,登录完成,回来之后,如何自动收藏

    我们都知道,移动Web端(M站环境下),很多时候,前端是无法判断用户的登录状态的,因为出于安全性考虑,与账号相关的cookie字段一般都是 http-only的. 如果前端想判断用户的登录状态,需要主 ...

  4. centos7安装jdk环境

    有时候安装一些软件或者服务都需要jdk环境,今天就在centos上安装最新的jdk环境. 检测历时安装 1.查看Linux自带的JDK是否已安装 # java -version 2.查看JDK信息 # ...

  5. Cas 服务器 使用HTTP协议对外服务

    在上篇博文<Cas 服务器 下载.编译及部署>Cas启动后默认支持HTTPS连接,如果要使用使用HTTP连接访问,则会收到以下信息: 注:本文是将Cas服务器运行在Http协议模式下,非设 ...

  6. C#计算时间差 TimeSpan

    TimeSpan的相关属性 Add:与另一个TimeSpan值相加. Days:返回用天数计算的TimeSpan值. Duration:获取TimeSpan的绝对值. Hours:返回用小时计算的Ti ...

  7. Jenkins+Ansible+Gitlab自动化部署三剑客-Jenkins本地搭建

    后面需要shell基础,目前没有,等有了,再更

  8. SQL TOP 子句

    TOP 子句 TOP 子句用于规定要返回的记录的数目. 对于拥有数千条记录的大型表来说,TOP 子句是非常有用的. 注释:并非所有的数据库系统都支持 TOP 子句. SQL Server 的语法: S ...

  9. 安装站点时出现“连接数据库出现数据库server或登录password无效,无法连接数据库,请又一次设定”解决方法

    在安装站点时出现  "连接数据库出现数据库server或登录password无效,无法连接数据库,请又一次设定"  可是数据库username和password是正确的,在serv ...

  10. centos7下升级SSH

    Linux 发行版中集成的 SSH 软件版本都比较老,存在着一些漏洞和安全隐患,需要升级 SSH 服务软件修补漏洞提升系统安全. SSH:SSH 有许多标准,通常 Linux 中 ( Redhat, ...