这是个加了点淡入淡出效果的顶部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. CentOS7中安装MySQL5.7

    安装必要的组件 yum install –y autoconf automake imake libxml2-devel expat-devel cmake gcc gcc-c++ libaio li ...

  2. c/c++ 标准容器 forward_list resize 操作

    c/c++ 标准容器 forward_list, resize, 重新定位迭代器 1,forward_list特有的方法: insert_after emplace_after erase_after ...

  3. python shell与反弹shell

    python shell与反弹shell 正常shell需要先在攻击端开机情况下开启程序,然后攻击端运行程序,才能连接 反弹shell,攻击端是服务端,被攻击端是客户端正常shell,攻击端是客户端, ...

  4. 数据挖掘---Numpy的学习

    什么是Numpy NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵(任意维度的数据处理),比Python自身的嵌套列表(nested list structure ...

  5. 通过一篇YAML来学习YAML

    yaml 兼容 json,至今已发展至 1.2版.支持N多种编程语言.官网:http://www.yaml.org/ 格式在线校验:http://nodeca.github.io/js-yaml/ 下 ...

  6. Qt的事件

    Qt的事件机制 事件过滤器: 可以让一个对象侦听拦截另外一个对象的事件. 实现原理: 在所有Qt对象的基类:QObject中有一个 类型为:QObjectList 名字为:eventFilters 的 ...

  7. LeetCode算法题-Remove Duplicates from Sorted List

    这是悦乐书的第160次更新,第162篇原创 01 前情回顾 昨晚的爬楼梯算法题,有位朋友提了个思路,使用动态规划算法.介于篇幅问题,这里不细说动态规划算法,以后会在数据机构和算法的理论知识里细说. 昨 ...

  8. swiper.js + jquery.magnific-popup.js 实现奇葩的轮播需要

    奇葩的轮播图 说轮播图很简单的,一定是没有遇到厉害的产品. 先说需求: 首先,一个mask会有三张图片,点击左右按钮会左右滑动一张图片的宽度. 点击展示的三张图片的任意一张,弹出遮罩,显示该图片的放大 ...

  9. 8.03-json_to_csv

    import json import csv # 需求 json 中的数据 转换 成 csv文件 # 1.分别 读 , 创建文件 json_fp = open('02new.json', 'r') c ...

  10. 2.01-request_header

    import urllib.request def load_baidu(): url= "https://www.baidu.com" header = { #浏览器的版本 &q ...