/*
* @date: 2010-5-30 11:57:22
* @author: 胡灵伟
* Depends:
* jquery.js
*
* function:气泡提示效果
* use:$("selectors").bubble({fn:getdata, width:width, height:height});
* 对所有需要气泡提示效果的对象使用bubble方法，
* fn为气泡中显示内容获得方法,即fn中返回的数据会显示在气泡中
* 以样式指代div则有:
* width\height为contents的width\height属性
* 气泡总width为left.width + contents.width + right.width
* 气泡总height为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 = $('').append('').append('')
.append($('')).append('')
.append('').append('')
.append('')
.append($('')
.append($('')))
.append('').appendTo('body');
tpl.find('.left, .right, .contents').each(function(){$(this).height(h)})
tpl.find('.top, .bottom, .contents').each(function(){$(this).width(w)})
return tpl; .add = function(triggers, options){
//여기에 있는 옵션은 add 메소드가 호출될 때마다 전달되는 매개변수입니다. 예를 들어 데이터를 얻기 위한 fn 메소드 지정, 버블 너비 너비 및 높이
//console.debug("length:" Triggers.length);
var t = this.trigger.length;//거품 프롬프트 효과가 필요한 새로 추가된 개체를 트리거 배열에 넣습니다. for(var j =0;jthis.trigger.push(triggers[j])
//console.debug("trigger.length:" this.trigger.length );
var hout = this.handleout;
var hover = this.handleover;
var obj = this;//새로 추가된 객체에 대한 마우스 수신 이벤트 바인딩
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)
//버블 이벤트가 새로 트리거되고 원래 타이머가 종료되지 않은 경우 원래 타이머는
if (obj.hideDelayTimer[i])clearTimeout(obj.hideDelayTimer[i])
if (obj.beingShown[i] || obj.shown[i]) {
/ /if bubble 거품이 팝업 중이거나 이미 팝업된 경우 거품은 다시 팝업되지 않습니다.
return
} else {
var Trigger = $(obj.trigger[i]); >//마커 버블이 나타납니다
obj.beingShown[i] = true;
//버블 만들기
obj.popup[i] = obj.makebubble(options.width||obj.options. width, options.height||obj .options.height)
//마우스가 트리거 개체를 떠나 버블 위에 놓일 때 버블이 사라지지 않도록 버블에 대해 동일한 이벤트를 바인딩합니다.
obj .popup[i].mouseover(function(){ obj.handleover(i, obj)}).mouseout(function(){obj.handleout(i, obj)})
//fn 메소드를 호출하여 데이터를 얻어서 데이터를 표시합니다
obj.options.fn (obj.trigger[i], function(data){
obj.popup[i].find('.contents').text(data);
});
//거품 설정 거품의 위치 및 표시 속성은 기본적으로 트리거 객체 바로 위에 나타납니다.
obj.popup[i].css({
top: Trigger.offset ().top-obj.popup[i].height() ,
왼쪽: Trigger.offset().left Trigger.width()/2 - obj.popup[i].width()/2,
display: 'block'
}).animate(
//사악한 IE는 PNG 반투명성과 필터를 동시에 지원할 수 없으므로 IE에서는 필터가 사용되지 않습니다
$.browser.msie? {
top: '-=' obj.options.distance 'px'
}:{
top: '-=' obj.options.distance 'px',
불투명도: 1
}, obj.options.time, 'swing', function( ) {
obj.beingShown[i] = false;
obj.shown[i] =
}); }
return false;
};
this.handleout = function(i, obj, options){
//console.debug("hideDelayTimer[" i "]:" obj.hideDelayTimer[ i]);//일부 사고로 인한 처리 마우스 입력 이벤트가 발생하지 않고 마우스 떠나기 이벤트가 직접 다시 발생하는 동작입니다
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',
불투명도: 0//페이드 효과
} , obj.options.time, 'swing', function () {
obj.shown[i] =
obj.popup; [i].css('display', 'none');
obj.popup[i] = null
});}catch(e){}}, obj.options. hideDelay);
return false;
};
$.bubble = new Bubble();//단일 인스턴스
$.bubble.add(this, options); 🎜>};
})(jQuery);


사용 지침: (사용된 이미지 스타일은 img.zip입니다. 경로에 주의하세요. 사진이 없으면 보기에 좋지 않습니다.. .)




코드 복사


코드는 다음과 같습니다.

jQuery 버블 예제

aaaaaaaaaa

aaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaa aaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

서블릿은 只要返回一段字符串就可以了,就不贴了.