The code comment is as detailed as possible, and it's not much to say.
Preliminary test has not found a large bug, overall is not satisfied with the mouse move to remove the constant triggering bubbles will appear when XX is empty or not the object of the problem,
Although does not affect the effect, but looked at IE in the lower left corner yellow warning is not good, temporarily does not know how to improve. Add the Try/catch to solve ...
There is the bubble default appears in the trigger object directly above, when the trigger object on the edge, the bubble will appear in a part of the window outside ... Perhaps this kind of situation can let the bubble show on the left or the right, feel may have some trouble, did not go to get, more lazy ...
The more you use jquery, the more you like to use it ...
/*
* @date: 2010-5-30 11:57:22
* @author: Hu Lingwei
* Depends:
* Jquery.js
*
* Function: Bubble hint effect
* use:$ ("selectors"). Bubble ({fn:getdata, width:width, height:height});
* Use the Bubble method for all objects that need a bubble hint effect.
* fn method for displaying content in bubbles, that is, the data returned in FN is displayed in bubbles
* to the style refers to the DIV is:
* Width\height for Contents Width\height Properties
* The total width of the bubble is Left.width + contents.width + right.width
* The total height of the bubble is Top.height + contents.height + bottom.height
*/
(function ($) {
$.fn.bubble = function (options) {
Bubble = function () {
This.defaults = {
Distance:10,
TIME:250,
HIDEDELAY:500,
WIDTH:100,
height:100
};
This.options = $.extend (this.defaults, Options);
This.hidedelaytimer = new Array ();
This.shown = new Array ();
This.beingshown = new Array ();
This.popup = new Array ();
This.trigger = new Array ();
this.makebubble = function (W, h) {
var TPL = $ (' <div class= ' bubble-popup ' ></div> '). Append (' <div class= ' topleft ' ></div> '). Append (' <div class= ' top ' ></div> ')
. Append ($ (' <div class= ' topright ' ></div> ')). Append (' <div class= ' left ' ></div> ')
. Append (' <div class= ' contents ' ></div> '). Append (' <div class= ' right ' ></div> ')
. Append (' <div class= "Bottomleft" ></div> ")
. Append ($ (' <div class= "bottom" ></div> ")
. Append ($ (' <div class= ' Bottomtail "></div>)))
. Append (' <div class= ' bottomright ' ></div> '). Appendto (' body ');
Tpl.find ('. Left,. Right,. Contents '). each (function () {$ (this). Height (h)});
Tpl.find ('. Top,. Bottom,. Contents ')-each (function () {$ (this). Width (w)});
return TPL;
};
This.add = function (triggers, options) {
The options here are the parameters that are passed in each call to the Add method, such as specifying the method to fetch the data FN, bubble width height height
Console.debug ("Length:" +triggers.length);
var t = this.trigger.length;
Put the newly added object that needs the bubble hint effect into the trigger array
for (Var j =0;j<triggers.length;j++)
This.trigger.push (Triggers[j]);
Console.debug ("trigger.length:" + this.trigger.length);
var hout = this.handleout;
var hover = This.handleover;
var obj = this;
To bind a mouse listener event for a newly added object
Triggers.each (function (Ind) {
$ (this). Unbind (' MouseOver '). MouseOver (function () {
Hover (t + ind, obj, options);
}). Unbind (' Mouseout '). Mouseout (function () {
Hout (t + ind, obj, options);
});
});
};
This.handleover = function (i, obj, options) {
Console.debug ("hidedelaytimer.length:" + obj.hideDelayTimer.length);
The original timer is cleared when the original timer is not finished when the new triggering bubble event occurs
if (Obj.hidedelaytimer[i]) cleartimeout (Obj.hidedelaytimer[i]);
if (Obj.beingshown[i] | | | obj.shown[i]) {
If bubbles are taking off or are popping up, they don't repeat bubbles.
Return
} else {
var trigger = $ (obj.trigger[i]);
Mark is taking a bubble.
Obj.beingshown[i] = true;
Create Bubbles
Obj.popup[i] = obj.makebubble (options.width| | Obj.options.width, Options.height| | Obj.options.height);
Bubbles do not disappear when the bubble binds the same event so that the mouse leaves the trigger and puts it on the bubble.
Obj.popup[i].mouseover (function () {obj.handleover (i, obj)}). Mouseout (function () {obj.handleout (i, obj)});
Invoke the method fn to get the data to display the data
Obj.options.fn (Obj.trigger[i], function (data) {
Obj.popup[i].find ('. Contents '). Text (data);
});
Set the position of the bubble and display properties, the bubble default appears on the trigger object directly above
Obj.popup[i].css ({
Top:trigger.offset (). Top-obj.popup[i].height (),
Left:trigger.offset (). Left + trigger.width ()/2-obj.popup[i].width ()/2,
Display: ' Block '
}). Animate (
Because the evil IE cannot support PNG semitransparent and filter at the same time, so for IE do not use filters
$.browser.msie? {
Top: ' = ' + obj.options.distance + ' px '
}:{
Top: ' = ' + obj.options.distance + ' px ',
Opacity:1
}, Obj.options.time, ' Swing ', function () {
Obj.beingshown[i] = false;
Obj.shown[i] = true;
});
}
return false;
};
This.handleout = function (i, obj, options) {
Console.debug ("hidedelaytimer[" "+i+"]: "+obj.hidedelaytimer[i");
Handles the case when the mouse-leaving event is triggered without triggering a mouse entry event because of some unexpected action
if (Obj.hidedelaytimer[i]) cleartimeout (Obj.hidedelaytimer[i]);
Obj.hidedelaytimer[i] = settimeout (function () {
Obj.hidedelaytimer[i] = null;
try{
Obj.popup[i].animate (
$.browser.msie? {
Top: ' = ' + obj.options.distance + ' px '
}:{
Top: ' = ' + obj.options.distance + ' px ',
opacity:0//Fade Effect
}, Obj.options.time, ' Swing ', function () {
Obj.shown[i] = false;
Obj.popup[i].css (' Display ', ' none ');
Obj.popup[i] = null;
});} catch (e) {};
}, Obj.options.hideDelay);
return false;
};
};
$.bubble = new Bubble ()//Single Example
$.bubble.add (this, options);
};
}) (JQuery);
How to use: (Use the picture style img.zip, note the path, no picture is very difficult to see ...)
<style type= "text/css" media= "screen" >
<!--
* {
margin:0;
padding:0;
}
Body {
padding:10px;
}
H1 {
MARGIN:14PX 0;
font-family: ' Trebuchet MS ', Helvetica;
}
. bubbletrigger {
}
/* Bubble Pop-up * *
. bubble-popup {
Position:absolute;
Display:none;
z-index:50;
Border-collapse:collapse;
}
. bubble-popup. topleft {width:19px; Height:15px;float:left;background-image:url (. /images/bubble/bubble-1.png);}
. bubble-popup. Top {width:1px;height:15px;float:left;background-image:url (.. /images/bubble/bubble-2.png); }
. bubble-popup. topright {width:19px; Height:15px;float:left;background-image:url (. /images/bubble/bubble-3.png); }
. Bubble-popup. Left {clear:left;width:19px; Height:1px;float:left;background-image:url (.. /images/bubble/bubble-4.png); }
. bubble-popup. Contents {
White-space:normal;
Word-break:break-all;
Float:left;
font-size:12px;
Line-height:1.2em;
Background-color: #fff;
Color: #666;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Sans-serif;
}
. Bubble-popup. Right {width:19px; Height:1px;float:left;background-image:url (. /images/bubble/bubble-5.png); }
. bubble-popup. bottomleft {clear:left;width:19px; Height:15px;float:left;background-image:url (. /images/bubble/bubble-6.png); }
. bubble-popup. Bottom {Width:1px;height:15px;float:left;background-image:url (. /images/bubble/bubble-7.png); Text-align:center;}
. bubble-popup. bottomtail {width:30px; height:29px; display:block; margin:0 auto; Background-image:url (... /images/bubble/bubble-tail2.png);}
. bubble-popup. bottomright {width:19px; Height:15px;float:left;background-image:url (. /images/bubble/bubble-8.png); }
-->
</style>
<script src= ". /js/jquery-1.4.2.min.js "type=" Text/javascript "></script>
<script src= ". /js/bubble-1.0.js "type=" Text/javascript "></script>
<script type= "Text/javascript" ><!--
AA = function (obj, callback) {
$.ajax ({
Type: ' POST ',
Data: {word:$ (obj). attr (' Alt '), Rand:Math.random ()},
URL: ' Http://localhost/xun/ajax.svl?method=getdetailinfo ',
DataType: ' Text ',
timeout:1000,
Success:function (data) {
callback (data);
}
});
};
bb = function (obj, callback) {
$.ajax ({
Type: ' POST ',
Data: {word:$ (obj). attr (' Alt '), Rand:Math.random ()},
URL: ' Http://localhost/xun/ajax.svl?method=getdetailinfo ',
DataType: ' Text ',
timeout:1000,
Success:function (data) {
Callback (Data + "AAAA");
}
});
};
$ (function () {
$ ('. Bubbletrigger '). Bubble ({width:150, height:100, FN:AA});
$ (' #a '). Bubble ({fn:bb});
});
//
--></script>
<body id= "Page" >
<div>
<br/>aaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style= "padding-left:100px;" >
</div>
</body>
The servlet can just return a string of strings and it won't be posted.
