内部使用
复制代码 代码如下:
<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="/UploadFiles/2021-04-02/less-1.4.2.min.js"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> <script src="/UploadFiles/2021-04-02/jquery.tooltip.js"></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);
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】
- 李恕权.2003-回·20年全精选2CD【SONY】【WAV+CUE】