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

来源：互联网发布：软件测试基础知识编辑：程序博客网时间：2024/04/29 09:21

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{width: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;width: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;width:13px;height:8px;position:absolute;}';
               break;
           case 2:
               popcss+='#p_o .p{background-position:-7px -16px;top:5px;right:-7px;width:8px;height:13px;position:absolute;}';
               break;
           case 3:
               popcss+='#p_o .p{background-position:0 -7px;bottom:-7px;left:15px;width:13px;height:8px;position:absolute;}';
               break;
           case 4:
               popcss+='#p_o .p{background-position:0 -16px;top:5px;left:-7px;width: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擴展方法定義屬於自己的氣泡提示}打开操作成功的气泡提示,并延时自动关闭气泡.

0 0