jquery插件tooltipv顶部淡入淡出效果使用示例
 |
| 内部使用 |
<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);
相关文章
html5以及jQuery实现本地图片上传前的预览代码实例讲解
这篇文章主要介绍了html5以及jQuery实现本地图片上传前的预览代码实例讲解，图文代码实例讲解的很清晰，有感兴趣的同学可以研究下2021-03-03
自动设置iframe的宽度在应用中还是比较广泛的，本文使用jquery实现一下，感兴趣的朋友可以参考下2013-09-09
这篇文章主要介绍了jQuery遍历对象、数组、集合实例,本文直接给出实例代码,在代码中有详细注释来解释代码的作用,需要的朋友可以参考下2014-11-11
基于jQuery实现滚动条滚动到子元素位置以此来定位滚动条位置，下面是小编给大家带来的实现代码，代码比较简单，需要的朋友可以参考下2016-08-08
这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下2014-04-04
jQuery+slidereveal实现的面板滑动侧边展出效果
WEB开发中有时需要在页面上设置一个控制面板，默认是不显示的，当用户有需要时可以通过按钮触发调用面板展示。常见的有页面侧边滑出面板效果。本文将使用jQuery插件并结合实例给大家介绍一下面板滑动展示效果。2015-03-03
如果在iframe中使用则弹不出对话框，而有时候我们还必须得使用iframe而不能用jQuery的load方式，下面有个不错的处理方法，希望对大家有所帮助2014-01-01
我们可以使用$(this)方法获取事件处理函数内部的当前元素,也可以使用e.target方法在外部获取当前元素,此外,我们还介绍了parent()方法和find()方法获取当前元素的父元素或子元素,以及closest()方法获取当前元素最近的祖先元素2023-08-08
下面小编就为大家带来一篇当jquery ajax遇上401请求的解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
本文主要对jQuery的基础知识进行介绍，非常适合刚开始接触JQuery学习的朋友们，下面就跟小编一起来看下吧2016-12-12
最新评论