使用jquyer擴展方法定義屬於自己的氣泡提示

jquery很強,這一點毋庸置疑(如果你從事web開發工作,卻沒聽過jquery,那麼我建議你可以轉行了),除了其內置的方法我們還可以安裝插件,但我更喜歡自己寫的東西.

如果不知道啥是氣泡,你可以看一下下邊的圖片:

    //擴展:气泡提示
    //onfocus="$.pop(this,true,'請正確填寫項目名稱!',3,1000);"
    //$.pop($(this),true,'內容',3);
    //$.pop();
    //参数(显示或隐藏,原是對象,显示的内容,箭头位置(上:1;右:2;下:3;左:4),延遲一定的時間關閉毫秒)

//如果要轉載本文請注明出處,免的出現版權紛爭,我不喜歡看到那種轉載了我的作品卻不注明出處的人 Seven{See7di#Gmail.com}
    $.pop=function(_this,_type,_mess,_P,_tim){
        $("#p_o").remove();
        if(_type){
            var Loc;_P=(!_P)?1:_P;
            if(!_this){return;}

            try{
                Loc=$(_this).offset();
                oW=$(_this).css("width");
                if(!Loc){
                    Loc=_this.offset();
                    oW=_this.css("width");
                }
            }catch(e){}
            _T=Loc.top;


            popcss='<style type="text/css">';
            popcss+='#p_o{auto;left:'+Loc.left+'px;background-color:white;border:1px solid #B39F82;padding:1px;position:absolute;display:block;z-index:9999;filter:Alpha(opacity=90);-moz-opacity:.9;opacity:0.9;}';
            popcss+='#p_o div{background-color:#F5F5D7;padding:2px;}';
            popcss+='#p_o .i{background:url("/img/pop.gif") no-repeat scroll 0 0 transparent;}';
            popcss+='#p_o .l{background-position:1px -30px;float:left;height:20px;20px;margin:6px 0 0 2px;}';
            popcss+='#p_o .r{word-wrap:break-word;padding:5px;margin:0 0 0 22px;line-height:20px;color:#AF7132;}';
            switch(_P){
            case 1:
                popcss+='#p_o .p{background-position:0 0;top:-7px;left:15px;13px;height:8px;position:absolute;}';
                break;
            case 2:
                popcss+='#p_o .p{background-position:-7px -16px;top:5px;right:-7px;8px;height:13px;position:absolute;}';
                break;
            case 3:
                popcss+='#p_o .p{background-position:0 -7px;bottom:-7px;left:15px;13px;height:8px;position:absolute;}';
                break;
            case 4:
                popcss+='#p_o .p{background-position:0 -16px;top:5px;left:-7px;8px;height:13px;position:absolute;}';
                break;
            }
            popcss+='</style>';

            $("body").prepend('<div id="p_o">'+popcss+'<div><span class="i l"></span><p class="r">'+_mess+'</p></div><span class="i p"></span></div>');

            //为了取得正确的高度值
            switch(_P){
            case 1:
                _T=_T-parseInt($("#p_o").css("height"))-10;
                break;
            case 2:
                _T=_T-parseInt($("#p_o").css("height"))-10;
                break;
            case 3:
                _T=_T-parseInt($("#p_o").css("height"))-10;
                break;
            case 4:
                _T=_T-6;
                $("#p_o").css("left",(parseInt($("#p_o").css("left"))+parseInt(oW)+8));
                break;
            }
            $("#p_o").css("top",_T);//.css("width",w);
            if(_tim){window.setTimeout('$("#p_o").remove();',_tim);}
        }else{
            $("#p_o").remove();
        }
    }

程序中氣泡所使用的背景圖片:

該插件的高級應用範例:

ajax读取数据库的內容並显示到每一天的栏位里,使用{jQuery插件-通用input或textarea靜態ajax修改功能插件}静态免刷新修改每天的房价,修改完成之后使用{使用jquyer擴展方法定義屬於自己的氣泡提示}打开操作成功的气泡提示,并延时自动关闭气泡.