首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → 我来发一个改进版的jquery.msgbox!

我来发一个改进版的jquery.msgbox!

时间：2009-12-23

来源：互联网

不好意思，我的这个msgbox本来就是经awenaicn的msgbox修改而来。但是我对它作了很多的改动，使它能在IE6、IE7、IE8、firefox、chrome、saferi、Opera这七款主流浏览器中都能正常使用，可以任意拖动。而且当网页长度超过一屏的时候依然正常。
不说什么，先上代码：
复制代码
  1. (function($){
  2. $.msgbox=function(o)
  3.     {
  4.     if(typeof(o)=='string')
  5.         {
  6.         o={content:o};
  7.         }
  8.     var options=o||{};
  9.         options.width=o.width||360;
  10.         options.height=o.height||200;
  11.         options.closeAfter=o.closeAfter||0;
  12.         options.title=o.title||'attention';
  13.         options.wrapperClass='msg_wrapper';
  14.         options.titleClass='msg_title';
  15.         options.outClickClose=o.outClickClose=='yes'?true:false;
  16.         options.titleWrapperClass='msg_title_wrapper';
  17.         options.mainClass='msg_main';
  18.         options.bgClass='msg_bg';
  19.         options.type=o.type||'text';
  20.         options.content=o.content||'Hello,world!';
  21.         options.closeEvent=o.closeEvent||function(){};    
  22.         options.closeImg='images/close.gif';
  23.         options.bgOpacity=o.bgOpacity||0.4;
  24.         options.afterAjaxEvent=o.afterAjaxEvent||function(){};    
  25.         options.couldClose=o.couldClose||'yes';
  26.         options.oneBoxMode=typeof(o.oneBoxMode)=='undefined'?true:o.oneBoxMode;    
  27.     var dragFlag=false;
  28.     var startX=0;
  29.     var startY=0;
  30.     var $background=$(document.createElement("div")).addClass(options.bgClass).css({"opacity":0.0}).appendTo('body').animate({opacity:options.bgOpacity}).mouseup(dragEnd);
  31.     if (options.outClickClose)
  32.         $background.click(closeMe);
  33.     else
  34.         {
  35.         $background.dblclick(closeMe).click(function()
  36.             {
  37.             flashTitle(0.5,4,80);
  38.             })
  39.         };
  40.     try{$background.bgiframe();}catch(e){};
  41.     var $wrapper=$(document.createElement("div")).css({'width':options.width+'px','height':options.height+'px','position':'absolute','z-index':'100'}).addClass(options.wrapperClass).appendTo('body').mouseup(dragEnd);
  42.     var $titleWrapper=$(document.createElement("div")).addClass(options.titleWrapperClass).appendTo($wrapper).select(function(e)
  43.         {
  44.         if(e.preventDefault)e.preventDefault();
  45.         if(e.stopPropagation())e.stopPropagation();
  46.         return false;
  47.         }).mousedown(function(e)
  48.         {
  49.         dragStart(e);
  50.         }).mousemove(function(e)
  51.         {
  52.         if(dragFlag)dragTo(startX,startY,e);
  53.         }).mouseout(function(e)
  54.         {
  55.         if(dragFlag)dragTo(startX, startY, e);
  56.         }).mouseup(dragEnd);
  57.     var $title=$(document.createElement("span")).html(options.title).appendTo($titleWrapper).addClass(options.titleClass).select(function(e)
  58.         {
  59.         if(e.preventDefault)e.preventDefault();
  60.         if(e.stopPropagation())e.stopPropagation();
  61.         return false;
  62.         }).mouseup(dragEnd);
  63.     var $close=$(document.createElement("img")).attr({'src':options.closeImg,'className':'right'}).prependTo($titleWrapper).mousedown(closeMe);
  64.     var $main=$(document.createElement("div")).addClass(options.mainClass).appendTo($wrapper).height(options.height-51).mouseup(dragEnd);
  65.     function closeMe()
  66.         {
  67.         if(options.couldClose=='yes'){
  68.         $background.fadeOut();
  69.         $wrapper.slideUp("slow");
  70.         }
  71.         else flashTitle(0.5,4,80);
  72.         }
  73.     function isVisible()
  74.         {
  75.         return $background.is(":visible")&&$wrapper.is(":visible");
  76.         }
  77.     function autoCloseMe(closeAfter)
  78.         {
  79.         if(closeAfter>0&&isVisible())
  80.             {
  81.             autoCloseStr=" ("+closeAfter+')';
  82.             $title.html(options.title+"   "+autoCloseStr);
  83.             closeAfter--;
  84.             if(closeAfter==0)closeMe();
  85.             setTimeout(function()
  86.                 {
  87.                 autoCloseMe(closeAfter)
  88.                 },1000);
  89.             }
  90.         }
  91.     function dragStart(e)
  92.         {
  93.         if(e.preventDefault)e.preventDefault();
  94.         if(e.stopPropagation())e.stopPropagation();
  95.         dragFlag=true;
  96.         var offset=$wrapper.offset();
  97.         startX=e.pageX-offset.left;
  98.         startY=e.pageY-offset.top;
  99.         }
  100.     function dragTo(x,y,e)
  101.         {
  102.         if(e.preventDefault)e.preventDefault();
  103.         if(e.stopPropagation())e.stopPropagation();
  104.         ensureMoveInScreen(e.pageX-x,e.pageY-y);
  105.         }
  106.     function ensureMoveInScreen(x,y)
  107.         {
  108.         var page=$.getPageSize();
  109.         var offset=$wrapper.offset();
  110.         if(x<0)boxMoveTo(0,y);
  111.         if(y<0)boxMoveTo(x,0);
  112.         if(offset.left>page.PageW-options.width)boxMoveTo(page.PageW-options.width,y);
  113.         if(offset.top>page.PageH-options.height)boxMoveTo(x,page.PageH-options.height);
  114.         if(x>=0&&x<=page.PageW-options.width&&y>=0&&y<=page.PageH-options.height)boxMoveTo(x,y);
  115.         }
  116.     function boxMoveTo(x,y)
  117.         {
  118.         var scroll=$.getPageScroll;
  119.         $wrapper.css({'top':y,'left':x});
  120.         }
  121.     function dragEnd()
  122.         {
  123.         var offset=$wrapper.offset();
  124.         ensureMoveInScreen(offset.left,offset.top);
  125.         dragFlag=false;
  126.         }
  127.     function resetPosition()
  128.         {
  129.         var page=$.getPageSize();
  130.         $background.css({'width':page.PageW+'px','height':page.PageH+'px'});
  131.         var scroll=$.getPageScroll();
  132.         $wrapper.css({'top':((600-options.height)/2+scroll.Y)+'px','left':($(window).width()-options.width)/2+'px'});
  133.         }
  134.     function flashTitle(opacity,times,interval,flag)
  135.         {
  136.         if(times>0)
  137.             {
  138.             flag=!flag;
  139.             op=flag?opacity:1;
  140.             $titleWrapper.css('opacity',op);
  141.             setTimeout(function()
  142.                 {
  143.                 flashTitle(opacity,times-1,interval,flag)
  144.                 },interval);
  145.             }
  146.         }
  147.     var timeOut;
  148.     function bindIframeMouseup(index)
  149.         {
  150.         try{window.frames[index].document.onmouseup=dragEnd;}catch(e){};
  151.         timeOut=setTimeout(function(){    bindIframeMouseup(index)},200);
  152.         }
  153.     function msgbox()
  154.         {
  155.         switch(options.type)
  156.             {
  157.             case 'text':
  158.                 $main.html(options.content);
  159.                 $(".closeMe",$main).click(function(){closeMe();});
  160.                 options.afterAjaxEvent();
  161.                 if(self!=top&&options.oneBoxMode)
  162.                     {
  163.                     $background.remove();
  164.                     $wrapper.remove();
  165.                     $('body').replaceWith($main);
  166.                     }
  167.                 break;
  168.             case 'confirm':
  169.                 $main.html('<img src="images/confirm.gif" style="float:left;" width="60" height="50"/>  '+options.content);
  170.                 var $p=$("<p class=\"pp\"></p>").appendTo($main);
  171.                 var $yes=$("<button>\u786E\u5B9A</button>").appendTo($p).click(function()
  172.                     {
  173.                     closeMe();
  174.                     options.closeEvent();
  175.                     });
  176.                 var $no=$("<button>\u53D6\u6D88</button>").appendTo($p).click(function()
  177.                     {
  178.                     closeMe();
  179.                     });
  180.                 break;
  181.             case 'alert':
  182.                 $main.html('<img src="images/alert.gif" style="float:left;" width="60" height="50"/>  '+options.content);
  183.                 var $p=$("<span></span>").appendTo($main);
  184.                 var $yes=$("<button>\u786E\u5B9A</button>").appendTo($p).click(function()
  185.                     {
  186.                     closeMe();
  187.                     options.closeEvent();
  188.                     });
  189.                 break;
  190.             case 'get':
  191.             case 'ajax':
  192.             case 'url':
  193.                 $main.html("<img src=\"images/loading.gif\" /> Loading ...").load(options.content,'',function(data)
  194.                     {
  195.                     $.msgform($main);
  196.                     $(".closeMe",$main).click(function(){closeMe();});
  197.                     (options.afterAjaxEvent)(data);
  198.                     });
  199.                 break;
  200.             case 'iframe':
  201.                 if(self!=top&&options.oneBoxMode)
  202.                     {
  203.                     $background.remove();
  204.                     $wrapper.remove();
  205.                     setTimeout(function(){window.location.href=options.content;},1);
  206.                     }
  207.                 else
  208.                     {
  209.                     $main.css({"padding":0,"height":options.height-27});
  210.                     var $iframe=$('<iframe frameborder="0" marginheight="0" marginwidth="0"></iframe>').appendTo($main).attr({'width':'100%','height':'100%','scrolling':'auto','src':options.content});
  211.                     $iframe.find(document).ready(function()
  212.                         {
  213.                         var index=$("iframe").index($iframe);
  214.                         bindIframeMouseup(index);
  215.                         clearTimeout(setTimeout(function(){bindIframeMouseup(0)},200));
  216.                         });
  217.                     bindIframeMouseup($iframe);
  218.                     clearTimeout(timeOut);
  219.                     }
  220.                 break;
  221.             }
  222.         }
  223.     resetPosition();
  224.     $(window).load(resetPosition).resize(resetPosition).mouseup(dragEnd);
  225.     if(options.closeAfter>0)autoCloseMe(options.closeAfter);msgbox();
  226. }
  227. })


使用的时候请把下面这段css也加到网页里：
复制代码
  1. .msg_wrapper{overflow:hidden;position:absolute;z-index:100;background:url(images/title.gif) 0 -57px repeat-x #fff;}
  2. .msg_title_wrapper{background:url(images/title.gif) right top no-repeat;height:26px;vertical-align:middle;}
  3. .msg_title_wrapper img{cursor:pointer;margin-right:8px;margin-top:5px;}
  4. .msg_title{line-height:26px; padding-left:12px; color:#fff; font-size:12px; font-weight:bold;height:26px;display:block; vertical-align:middle; cursor:move;font-family:courier new;background:url(images/title.gif) left -28px no-repeat;}
  5. .msg_main{text-align:left;padding:12px;border:1px solid #666666;border-top:none;overflow:hidden;background:#f5f6f7;overflow-y:auto;overflow-x:hidden;position:relative;}
  6. .msg_main .pp button{border:none;background:url(images/button.gif);margin:4px 16px 4px 0;width:55px;text-align:center;height:20px;padding:1px;}
  7. .msg_bg{background-color:#000;position:absolute;top:0;left:0;z-index:99;}


效果图：

标题栏的背景图片下载：
  
两个图片二者选一即可，请把文件名保存为title.gif。
样式预览请看我的小站http://www.asprain.com
[ 此帖被fanxiaojie在2009-12-23 11:52重新编辑 ]

作者: fanxiaojie   发布时间: 2009-12-23

调用方法跟http://bbs.jquery.org.cn/read.php?tid-7084.html这个调用方法是一样的。我只是修正了它的bug而已。哦，应该说，我还加了一个参数couldClose，就是说：这个框是否允许关掉，如果couldClose设为false的话，点右上角的叉叉只不过会让框闪一下的。
其实还可以进一步扩展这个框的的功能的。
复制代码
  1. (function($){
  2. $.confirm=function(content,callback)
  3.     {
  4.     $.msgbox({'title':"\u786E\u8BA4\u6846","height":110,"width":300,'content':content,"type":"confirm","closeEvent":callback});return false;
  5.     }
  6. $.alert=function(content,callback)
  7.     {
  8.     $.msgbox({'title':"\u8B66\u544A\u6846","height":110,"width":300,'content':content,"type":"alert","closeAfter":3,"closeEvent":callback});return false;
  9.     }
  10. })

可以把它变成confirm框、alert框。
不过又得加入一张图片了：

是按钮背景。

作者: fanxiaojie   发布时间: 2009-12-23

而且如果有人仔细看我那个asprain里的msbox框，就会发现这个msgbox框还可以轻松松地提交表单、跳转链接、点开新的msgbox框等等，而且这些操作过程中，外部的网页丝毫没有变化，仿佛这个msgbox框不是模拟框，而是一个真正的无模式框似的。我怎么实现它的，哈，这可是个秘密，我拒绝透露。

作者: fanxiaojie   发布时间: 2009-12-23

光引用jq和你这个方法，应该不能运行吧！至少$.getPageScroll()方法和$.getPageSize()方法都不在这里定义的，是不是要把这两个方法也贴出来啊 ！

作者: kittoy314   发布时间: 2009-12-23

啊，是的，我粗心忘了把这两个东东贴出来了。现在补上：
复制代码
  1. $.getPageScroll=function()
  2.     {
  3.     var x,y;
  4.     if(window.pageYOffset)
  5.         {
  6.         y=window.pageYOffset;
  7.         x=window.pageXOffset;
  8.         }
  9.     else if(document.documentElement&&document.documentElement.scrollTop)
  10.         {
  11.         y=document.documentElement.scrollTop;
  12.         x=document.documentElement.scrollLeft;
  13.         }
  14.     else if(document.body)
  15.         {
  16.         y=document.body.scrollTop;
  17.         x=document.body.scrollLeft;
  18.         }
  19.     return{X:x,Y:y};
  20.     }
  21. $.getPageSize=function()
  22.     {
  23.     var scrW,scrH;
  24.     if(window.innerHeight&&window.scrollMaxY)
  25.         {
  26.         scrW=window.innerWidth+window.scrollMaxX;
  27.         scrH=window.innerHeight+window.scrollMaxY;
  28.         }
  29.     else if(document.body.scrollHeight>document.body.offsetHeight)
  30.         {
  31.         scrW=document.body.scrollWidth;
  32.         scrH=document.body.scrollHeight;
  33.         }
  34.     else if(document.body)
  35.         {
  36.         scrW=document.body.offsetWidth;
  37.         scrH=document.body.offsetHeight;
  38.         }
  39.     var winW,winH;
  40.     if(window.innerHeight)
  41.         {
  42.         winW=window.innerWidth;
  43.         winH=window.innerHeight;
  44.         }
  45.     else if(document.documentElement&&document.documentElement.clientHeight)
  46.         {
  47.         winW=document.documentElement.clientWidth;
  48.         winH=document.documentElement.clientHeight;
  49.         }
  50.     else if(document.body)
  51.         {
  52.         winW=document.body.clientWidth;
  53.         winH=document.body.clientHeight;
  54.         }
  55.     var pageW=(scrW<winW)?winW:scrW;
  56.     var pageH=(scrH<winH)?winH:scrH;
  57.     return{PageW:pageW,PageH:pageH,WinW:winW,WinH:winH};
  58.     }

作者: fanxiaojie   发布时间: 2009-12-23

收藏 作者辛苦

作者: tonytbl   发布时间: 2009-12-23

楼主的代码一句注释都没有，真闹心～～～～～
我们经理常常告诫我们，代码的注释量要达到30%才算合格！～

作者: kittoy314   发布时间: 2009-12-24

提示：$.msgbox
对象不支持此属性或方法？？？？？？？
该怎么么，用不起这个$.msgbox

作者: meteor01   发布时间: 2009-12-24

引用
引用第7楼meteor01于2009-12-24 16:48发表的  :
提示：$.msgbox
对象不支持此属性或方法？？？？？？？
该怎么么，用不起这个$.msgbox

调用方法请参见:http://bbs.jquery.org.cn/read.php?tid-7084.html
我只不过是改进了它而已,让它在多种浏览器下都能正常使用,调用方法并没有作什么修改.

作者: fanxiaojie   发布时间: 2009-12-24

你这个不支持中文，中文显示为乱码

作者: 414429969   发布时间: 2010-01-21

怎么可能不支持中文呢?
你只要在load的内容中写明response.charset = "gb2312"就不会出现乱码了.
另一个办法是,把load的内容escape一下!

作者: fanxiaojie   发布时间: 2010-01-21

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net