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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
采用call方式实现js继承
May 20 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
swiper插件自定义切换箭头按钮
Dec 28 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 Javascript
浅谈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操作MongoDB的技术总结
2013/06/02 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
PHP生成随机密码类分享
2014/06/25 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
AngularJS中的作用域实例分析
2018/05/16 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
Python的几种主动结束程序方式
2019/11/22 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
领导检查欢迎词
2014/01/14 职场文书
技校个人求职信范文
2014/01/25 职场文书
工伤赔偿协议书
2014/04/15 职场文书
差生评语大全
2014/05/04 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
2019年入党思想汇报
2019/03/25 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书