jquery插件tooltipv頂部淡入淡出效果使用示例
 |
| 內(nèi)部使用 |
<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", "據(jù)你的使用和需求的不同...");
}
function tg2() {
$("#tooltipContainer").tooltip("alert", "據(jù)你的使用和需求的不同...");
}
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 tools之tooltip
- jQuery Tools tooltip使用說明
- jQuery帶箭頭提示框tooltips插件集錦
- 使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
- 25個優(yōu)雅的jQuery Tooltip插件推薦
- 基于jquery的自定義鼠標(biāo)提示效果 jquery.toolTip
- qTip 基于JQuery的Tooltip插件[兼容性好]
- Jquery實現(xiàn)自定義tooltip示例代碼
- jQuery插件Tooltipster實現(xiàn)漂亮的工具提示
- jQuery自制提示框tooltip改進版
- jQuery實現(xiàn)ToolTip元素定位顯示功能示例
相關(guān)文章
html5以及jQuery實現(xiàn)本地圖片上傳前的預(yù)覽代碼實例講解
這篇文章主要介紹了html5以及jQuery實現(xiàn)本地圖片上傳前的預(yù)覽代碼實例講解，圖文代碼實例講解的很清晰，有感興趣的同學(xué)可以研究下2021-03-03
自動設(shè)置iframe的寬度在應(yīng)用中還是比較廣泛的，本文使用jquery實現(xiàn)一下，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了jQuery遍歷對象、數(shù)組、集合實例,本文直接給出實例代碼,在代碼中有詳細注釋來解釋代碼的作用,需要的朋友可以參考下2014-11-11
基于jQuery實現(xiàn)滾動條滾動到子元素位置以此來定位滾動條位置，下面是小編給大家?guī)淼膶崿F(xiàn)代碼，代碼比較簡單，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了jQuery使用ajaxSubmit()提交表單示例,使用延第三方插件jquery.form實現(xiàn),需要的朋友可以參考下2014-04-04
jQuery+slidereveal實現(xiàn)的面板滑動側(cè)邊展出效果
WEB開發(fā)中有時需要在頁面上設(shè)置一個控制面板，默認是不顯示的，當(dāng)用戶有需要時可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁面?zhèn)冗吇雒姘逍Ч?。本文將使用jQuery插件并結(jié)合實例給大家介紹一下面板滑動展示效果。2015-03-03
如果在iframe中使用則彈不出對話框，而有時候我們還必須得使用iframe而不能用jQuery的load方式，下面有個不錯的處理方法，希望對大家有所幫助2014-01-01
我們可以使用$(this)方法獲取事件處理函數(shù)內(nèi)部的當(dāng)前元素,也可以使用e.target方法在外部獲取當(dāng)前元素,此外,我們還介紹了parent()方法和find()方法獲取當(dāng)前元素的父元素或子元素,以及closest()方法獲取當(dāng)前元素最近的祖先元素2023-08-08
當(dāng)jquery ajax遇上401請求的解決方法
下面小編就為大家?guī)硪黄?dāng)jquery ajax遇上401請求的解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
本文主要對jQuery的基礎(chǔ)知識進行介紹，非常適合剛開始接觸JQuery學(xué)習(xí)的朋友們，下面就跟小編一起來看下吧2016-12-12