The code comment has been as detailed as possible, and I will not talk about it much.
No major bugs have been found in preliminary tests. In general, we are not satisfied with the fact that when you move the mouse to trigger bubbles, the problem that XX is empty or not an object will occur,
Although it does not affect the effect, it looks uncomfortable to see the yellow warning in the lower left corner of IE, and does not know how to improve it for the time being. try/catch is added to solve the problem...
In addition, bubbles appear on the top of the trigger object by default. When the trigger object is on the edge, some bubbles appear outside the window ...... in this case, the bubble may be displayed on the left or right side, and it may be a little troublesome, so it will not be done. It is relatively lazy ......
The more you use jquery, the more you like it...
Bubble. js:
Copy codeThe Code is as follows :/*
* @ Date: 11:57:22
* @ Author: Hu lingwei
* Depends:
* Jquery. js
*
* Function: Bubble tip Effect
* Use: $ ("selectors"). bubble ({fn: getdata, width: width, height: height });
* Use the bubble Method for all objects that require bubble prompting,
* Fn is the method for obtaining the content displayed in the bubble, that is, the data returned in fn is displayed in the bubble.
* When a style is used to represent a div, there are:
* Width \ height is the width \ height attribute of contents.
* The total width of the bubble is left. width + contents. width + right. width.
* The total bubble height 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 is the parameter passed in every call to the add method. For example, specify the method fn for getting data, and set the width and height of the bubble.
// Console. debug ("length:" + triggers. length );
Var t = this. trigger. length;
// Put the newly added object that requires a bubble prompt 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;
// Bind a mouse listener event to the 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 );
// When a new bubble trigger event is triggered, the original timer is cleared before it is finished.
If (obj. hideDelayTimer [I]) clearTimeout (obj. hideDelayTimer [I]);
If (obj. beingShown [I] | obj. shown [I]) {
// If the bubble is emerging or has already appeared, it will not be repeated.
Return;
} Else {
Var trigger = $ (obj. trigger [I]);
// Mark ongoing bubbles
Obj. beingShown [I] = true;
// Create a bubble
Obj. popup [I] = obj. makebubble (options. width | obj. options. width, options. height | obj. options. height );
// Bind the same event to the bubble so that the bubble does not disappear when the mouse leaves the trigger object and is placed on the bubble.
Obj. popup [I]. mouseover (function () {obj. handleover (I, obj )}). mouseout (function () {obj. handleout (I, obj )});
// Call the method fn for getting data to display data
Obj. options. fn (obj. trigger [I], function (data ){
Obj. popup [I]. find ('. CONTENTS'). text (data );
});
// Set the position and display attribute of the bubble. The bubble appears on the top of the trigger object by default.
Obj.popuppolici2.16.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 Internet Explorer cannot support PNG translucent and filter at the same time, no filter is used for Internet Explorer.
$. 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]);
// Handle the situation where, due to some unexpected operations, the mouse is not triggered to enter the event and the mouse is directly re-triggered to exit the event
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 // gradient effect
}, Obj. options. time, 'swing ', function (){
Obj. shown [I] = false;
Obj.popuppolici2.16.css ('display', 'None ');
Obj. popup [I] = null;
});} Catch (e ){};
}, Obj. options. hideDelay );
Return false;
};
};
$. Bubble = new Bubble (); // Singleton
$. Bubble. add (this, options );
};
}) (JQuery );
Usage: (the image format img.zip is used. Note the path. It is hard to see if there are no images ...)Copy codeThe Code is as follows: <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>
</Head>
<Body id = "page">
<H1> jQuery Bubble Example <Div>
<Br/> aaaaaaaaaa
<Br/> aaaaaaaaaaaaaaaaaaaa
<Br/> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<Br/> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<Br/> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<Br/> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</Div>
<Div style = "padding-left: 100px;">
</Div>
</Body>
As long as the servlet returns a string, it will not be pasted.
