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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
json原理分析及实例介绍
Nov 29 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jquery实现垂直手风琴菜单
Mar 04 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中的MVC模式运用技巧
2007/05/03 PHP
深入密码加salt原理的分析
2013/06/06 PHP
PHP小教程之实现链表
2014/06/09 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
vue实现购物车小案例
2019/09/27 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
python 反向输出字符串的方法
2018/07/16 Python
python requests.post带head和body的实例
2019/01/02 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
高级护理专业毕业生推荐信
2013/12/25 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
感谢信怎么写
2015/01/21 职场文书
技术员个人工作总结
2015/03/03 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
党小组评议意见
2015/06/02 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
vue router 动态路由清除方式
2022/05/25 Vue.js