jquery插件tooltipv顶部淡入淡出效果使用示例


Posted in Javascript onDecember 05, 2013

 
内部使用
<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);
Javascript 相关文章推荐
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
May 14 Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
浅谈JavaScript函数参数的可修改性问题
Dec 05 #Javascript
浅析JavaScript中的隐式类型转换
Dec 05 #Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 #Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 #Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 #Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 #Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 #Javascript
You might like
PHP 的 __FILE__ 常量
2007/01/15 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
10个实用的PHP代码片段
2011/09/02 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
PHP输出日历表代码实例
2015/03/27 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
javascript 写类方式之四
2009/07/05 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
使用JS获取页面上的所有标签
2018/10/18 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
js实现select下拉框选择
2020/01/11 Javascript
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
python验证码图片处理(二值化)
2019/11/01 Python
python保留小数位的三种实现方法
2020/01/07 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
详解Python流程控制语句
2020/10/28 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
python中entry用法讲解
2020/12/04 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
2014最新毕业证代领委托书
2014/09/26 职场文书
教师个人考察材料
2014/12/16 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
母亲节感言
2015/08/03 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书