|
|
|
|
@ -0,0 +1,220 @@
|
|
|
|
|
/*
|
|
|
|
|
jQuery 鼠标提示插件 v2.0
|
|
|
|
|
|
|
|
|
|
https://github.com/28269890/sTips
|
|
|
|
|
|
|
|
|
|
Demo：https://28269890.github.io/sTips
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
(function($){
|
|
|
|
|
$.fn.sTips = function(options) {
|
|
|
|
|
var o = $.extend({}, $.fn.sTips.defaults,options);
|
|
|
|
|
|
|
|
|
|
if($("#_sTips").length==0){
|
|
|
|
|
$("body").append("<div id='_sTips'></div>");
|
|
|
|
|
}
|
|
|
|
|
$("#_sTips").hide();
|
|
|
|
|
$("#_sTips").bind({
|
|
|
|
|
mouseenter:function(){
|
|
|
|
|
$("#_sTips").stop(true).fadeTo(o.inTime,o.phy);
|
|
|
|
|
},
|
|
|
|
|
mouseleave:function(){
|
|
|
|
|
$("#_sTips").fadeOut(o.outTime);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var sTipsPosition = function(e){
|
|
|
|
|
var s = $(e).offset();
|
|
|
|
|
var x = s.left;
|
|
|
|
|
var y = s.top - $("#_sTips").outerHeight();
|
|
|
|
|
if(o.position=="1"){
|
|
|
|
|
x = s.left - $("#_sTips").outerWidth();
|
|
|
|
|
y = s.top - $("#_sTips").outerHeight();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(o.position=="11"){
|
|
|
|
|
x = s.left;
|
|
|
|
|
y = s.top - $("#_sTips").outerHeight();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(o.position=="12"){
|
|
|
|
|
x = s.left - $("#_sTips").outerWidth();
|
|
|
|
|
y = s.top;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(o.position=="2"){
|
|
|
|
|
x = s.left + $(e).outerWidth();
|
|
|
|
|
y = s.top - $("#_sTips").outerHeight();
|
|
|
|
|
}
|
|
|
|
|
if(o.position=="21"){
|
|
|
|
|
x = s.left + $(e).outerWidth() - $("#_sTips").outerWidth();
|
|
|
|
|
y = s.top - $("#_sTips").outerHeight();
|
|
|
|
|
}
|
|
|
|
|
if(o.position=="22"){
|
|
|
|
|
x = s.left + $(e).outerWidth();
|
|
|
|
|
y = s.top;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(o.position=="3"){
|
|
|
|
|
x = s.left + $(e).outerWidth();
|
|
|
|
|
y = s.top + $(e).outerHeight();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(o.position=="31"){
|
|
|
|
|
x = s.left + $(e).outerWidth();
|
|
|
|
|
y = s.top + $(e).outerHeight() - $("#_sTips").outerHeight();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(o.position=="32"){
|
|
|
|
|
x = s.left + $(e).outerWidth() - $("#_sTips").outerWidth();
|
|
|
|
|
y = s.top + $(e).outerHeight();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(o.position=="4"){
|
|
|
|
|
x = s.left - $("#_sTips").outerWidth();
|
|
|
|
|
y = s.top + $(e).outerHeight();
|
|
|
|
|
}
|
|
|
|
|
if(o.position=="41"){
|
|
|
|
|
x = s.left - $("#_sTips").outerWidth();
|
|
|
|
|
y = s.top + $(e).outerHeight() - $("#_sTips").outerHeight();
|
|
|
|
|
}
|
|
|
|
|
if(o.position=="42"){
|
|
|
|
|
x = s.left ;
|
|
|
|
|
y = s.top + $(e).outerHeight();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$("#_sTips").css({
|
|
|
|
|
"left": x,
|
|
|
|
|
"top": y
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.each(function(){
|
|
|
|
|
var _this = this
|
|
|
|
|
if(this.alt){this.sTips=this.alt;$(this).removeAttr("alt")};
|
|
|
|
|
if(this.title){this.sTips=this.title;$(this).removeAttr("title")};
|
|
|
|
|
if(this.sTips==undefined){return};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var titlelength = this.sTips.indexOf("{||}")
|
|
|
|
|
if(titlelength > 0){
|
|
|
|
|
this.sTipsTop = this.sTips.substr(0,titlelength);
|
|
|
|
|
this.sTipsBody = this.sTips.substr(titlelength + 4,this.sTips.length);
|
|
|
|
|
}else{
|
|
|
|
|
this.sTipsBody = this.sTips;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$(this).on({
|
|
|
|
|
mousemove:function(e){
|
|
|
|
|
if (o.mouse==0){
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
var x = e.pageX;
|
|
|
|
|
var y = e.pageY;
|
|
|
|
|
if (o.mouse==1){
|
|
|
|
|
x -= (o.mousez + $("#_sTips").outerWidth());
|
|
|
|
|
y -= (o.mousez + $("#_sTips").outerHeight());
|
|
|
|
|
}else if (o.mouse==2){
|
|
|
|
|
x += o.mousez;
|
|
|
|
|
y -= (o.mousez + $("#_sTips").outerHeight());
|
|
|
|
|
}else if(o.mouse==3){
|
|
|
|
|
x += o.mousez;
|
|
|
|
|
y += o.mousez;
|
|
|
|
|
}else if(o.mouse==4){
|
|
|
|
|
x -= (o.mousez + $("#_sTips").outerWidth());
|
|
|
|
|
y += o.mousez;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(x + $("#_sTips").outerWidth() >= document.body.clientWidth){
|
|
|
|
|
x = document.body.clientWidth - $("#_sTips").outerWidth() ;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if(y + $("#_sTips").outerHeight() >= document.body.clientHeight){
|
|
|
|
|
y = document.body.clientHeight - $("#_sTips").outerHeight() ;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (x < 0){x=0}
|
|
|
|
|
if (y < 0){y=0}
|
|
|
|
|
|
|
|
|
|
$("#_sTips").css({
|
|
|
|
|
"left": x,
|
|
|
|
|
"top": y
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
mouseenter: function() {
|
|
|
|
|
$("#_sTips").hide();
|
|
|
|
|
$("#_sTips").stop();
|
|
|
|
|
$("#_sTips").html("");
|
|
|
|
|
if(this.sTipsTop){
|
|
|
|
|
$("#_sTips").prepend("<div id='_sTips_Top' class='"+o.topCss+"'>"+this.sTipsTop+"</div>");
|
|
|
|
|
$("#_sTips_Top").addClass(o.topCss);
|
|
|
|
|
}
|
|
|
|
|
$("#_sTips").append("<div id='_sTips_body' class='"+o.bodyCss+"'></div>");
|
|
|
|
|
$("#_sTips").addClass(o.sTipsCss);
|
|
|
|
|
|
|
|
|
|
$("#_sTips").css("z-index",99999999999);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (this.sTipsBody.substr(0, 5)=="ajax:"){
|
|
|
|
|
$("#_sTips_body").html(o.ajaxloading);
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: this.sTipsBody.substr(5,this.sTipsBody.length),
|
|
|
|
|
dataType: 'html',
|
|
|
|
|
global:false,
|
|
|
|
|
error: function(xhr,error){
|
|
|
|
|
if(error == 'error'){
|
|
|
|
|
if(o.ajaxerror != "off"){
|
|
|
|
|
$("#_sTips_body").html("AJAX错误：" + xhr.statusText + "");
|
|
|
|
|
sTipsPosition(_this)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
success: function(shtml){
|
|
|
|
|
$("#_sTips_body").html(shtml);
|
|
|
|
|
sTipsPosition(_this)
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}else if(this.sTipsBody.substr(0, 3)=="fn:"){
|
|
|
|
|
var html=eval(this.sTipsBody.substr(3,this.sTipsBody.length))
|
|
|
|
|
if(html){
|
|
|
|
|
$("#_sTips_body").html(html);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else{
|
|
|
|
|
$("#_sTips_body").html(this.sTipsBody);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
sTipsPosition(this)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$("#_sTips").fadeTo(o.inTime,o.phy);
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
mouseleave: function(){
|
|
|
|
|
$("#_sTips").fadeOut(o.outTime);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
//--这里的都是初始值，能够设定的内容也都在这里
|
|
|
|
|
$.fn.sTips.defaults = {
|
|
|
|
|
phy:1, //透明度 0-1
|
|
|
|
|
inTime:200,//淡入时间
|
|
|
|
|
outTime:200,//淡出时间
|
|
|
|
|
sTipsCss:"sTips",//给外框指定css样式
|
|
|
|
|
topCss:"sTip-Top",//给提示框头部指定css样式，值为css名称
|
|
|
|
|
bodyCss:"sTips-Body",//给主提示框指定css样式，值为css名称
|
|
|
|
|
ajaxError:"",//ajax错误提示开关，唯一值：off
|
|
|
|
|
ajaxLoading:"loading...",//ajax读取之前的信息，也可修改成图片例如：<img src="loading.gif">
|
|
|
|
|
position:2,//位置：角+排列 1：左上，2：右上，3：右下，4：左下,排列：1 2 从左到右，从上到下。
|
|
|
|
|
mousez:10,//提示框和鼠标之间的距离
|
|
|
|
|
mouse:0//鼠标跟随。1：左上，2：右上，3：左下，4：右下
|
|
|
|
|
};
|
|
|
|
|
})(jQuery);
|
