jquery插件tooltipv顶部淡入淡出效果使用示例
<head>
<title></title>
<linkhref="base.css"rel="stylesheet"type="text/css"/>
<linkhref="jquery.tooltip.less"rel="stylesheet/less"type="text/css">
<scriptsrc="less-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"type="text/javascript"></script>
<scriptsrc="jquery.tooltip.js"type="text/javascript"></script>
</head>
<body>
<divid="tooltipContainer"style="display:none;"></div>
<buttononclick="javascript:tg1();">info</button>
<buttononclick="javascript:tg2();">alert</button>
<buttononclick="javascript:tg3();">hide</button>
<scriptlanguage="javascript">
$("#tooltipContainer").tooltip(); //初始化
functiontg1(){
$("#tooltipContainer").tooltip("info","据你的使用和需求的不同...");
}
functiontg2(){
$("#tooltipContainer").tooltip("alert","据你的使用和需求的不同...");
}
functiontg3(){
$("#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代码
var$this=$(this); clearTimeout($this.data("autoDisappearHandle")); clearTimeout($this.data("autoDisappearHandle")); $.fn.tooltip=function(){ returnmethod.apply(this,arguments); } })(jQuery);
(function($){
varmethods={
init:function(options){
returnthis.each(function(){
varsettings=$this.data("tooltip");
if(typeof(settings)=="undefined"){
vardefaults={
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){
returnthis.each(function(){
var$this=$(this);
varsetting=$this.data("tooltip");
$tooltip.html(options);
$tooltip.removeClass(setting.alertCss).addClass(setting.infoCss);
$tooltip.fadeIn();
varhideTooltip=function(){
$tooltip.fadeOut();
}
$this.data("autoDisappearHandle",setTimeout(hideTooltip,setting.disappearTime));
})
},
alert:function(options){
returnthis.each(function(){
var$this=$(this);
varsetting=$this.data("tooltip");
$tooltip.html(options);
$tooltip.removeClass(setting.infoCss).addClass(setting.alertCss);
$tooltip.fadeIn();
varhideTooltip=function(){
$tooltip.fadeOut();
}
$this.data("autoDisappearHandle",setTimeout(hideTooltip,setting.disappearTime));
})
},
hide:function(){
returnthis.each(function(){
var$this=$(this);
clearTimeout($this.data("autoDisappearHandle"));
$tooltip.fadeOut();
})
}
};
varmethod=arguments[0];
if(methods[method]){
method=methods[method];
arguments=Array.prototype.slice.call(arguments,1);
}elseif(typeof(method)=="object"||!method){
method=methods.init;
}else{
$.error("Method"+method+"doesnotexistonjQuery.tooltip");
returnthis;
}
相关文章