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="http://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);
相關文章
很多網站的首頁都有廣告輪播，今天閑來看了一網站的首頁廣告輪播方式，是通過 jQuery的blockSlide插件實現的，然后自己測試了一下，很好。2010-11-11
本文主要介紹了jquery實現焦點輪播效果的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JQuery中的常用事件、對象屬性與使用方法,結合實例形式分析了jquery事件、對象屬性、方法相關使用技巧,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了jQuery簡單實現隱藏以及顯示特效,需要的朋友可以參考下2015-02-02
這篇文章主要給大家介紹了關于jquery實現html頁面先加載內容過幾秒后顯示數據的相關資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
Handsontable 是一個相當給力的 jQuery 插件，它實現了 HTML 頁面中的表格編輯功能，并且是仿 Excel 的編輯效果。2013-05-05
這篇文章主要介紹了jQuery點擊按鈕彈出遮罩層且內容居中特效，需要的朋友可以參考下2015-12-12
表單驗證一直很繁瑣，特別是大點的表單，如果每個input都去單獨寫驗證簡直要寫死人，最近寫了一小段js統一的驗證表單內容是否正確。需要的朋友可以參考下2015-09-09
使用jquery提交form表單并自定義action的實現代碼
下面小編就為大家?guī)硪黄褂胘query提交form表單并自定義action的實現代碼。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jQuery是繼prototype之后的又一個優(yōu)秀的Javascript框架。它是由 John Resig 于 2006 年初創(chuàng)建的，它有助于簡化 JavaScript™ 以及Ajax 編程。2010-05-05