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 相关文章推荐
Jquery插件 easyUI属性汇总
Jan 19 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 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调用Twitter的RSS的实现代码
2010/03/10 PHP
php之readdir函数用法实例
2014/11/13 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
python中提高pip install速度
2020/02/14 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
如何用python处理excel表格
2020/06/09 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
医药代表个人求职信范本
2013/12/19 职场文书
运动会方阵解说词
2014/02/12 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
平安校园建设方案
2014/05/02 职场文书
社团活动总结报告
2014/06/27 职场文书
学校周年庆活动方案
2014/08/22 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书