dialog插件demo

基本操作

默认窗体
[html]view plaincopyprint?
    1. new Dialog('这是一个默认对话框').show();

 

非模态对话框
[html]view plaincopyprint?
 
  1. new Dialog('非模态对话框，可以打开多个！',{modal:false}).show();  
自动关闭
[html]view plaincopyprint?
 
  1. new Dialog('5秒后自动关闭',{time:5000}).show();  
非fixed模式
[html]view plaincopyprint?
 
  1. new Dialog('对话框不随滚动条移动',{fixed:false}).show();  
显示指定ID的内容
[html]view plaincopyprint?
 
  1. // 将显示本标签内的内容。  
  2. new Dialog({type:'id',value:'content-type-id'}).show();  
加载一张图片
[html]view plaincopyprint?
 
  1. new Dialog({type:'img',value:'http://www.caixw.com/public/uploads/demo/images/300x125.gif'}).show();  
加载一URL到iframe
[html]view plaincopyprint?
 
  1. new Dialog({type:'iframe',value:'http://www.caixw.com'}).show();  

加载一URL地址
[html]view plaincopyprint?
 
  1. new Dialog({type:'url',value:'http://www.caixw.com/public/uploads/demo/jquery/dialog/test.html'}).show();  


 

自定义CSS

自定义背景遮盖层
[html]view plaincopyprint?
 
  1. #dialog1-overlay  
  2. {  
  3.   background:blue;  
  4.   opacity:0.8;  
  5.   filter:alpha(opacity=80);  
  6. }  


自定义内容部分背景
[html]view plaincopyprint?
 
  1. #dialog2 .content  
  2. {  
  3.   width:250px;  
  4.   height:80px;  
  5.   background-image:url(http://www.caixw.com/public/uploads/demo/images/300x125.gif);  
  6. }  


回调函数

show()函数
[html]view plaincopyprint?
 
  1. new Dialog('show()回调函数'  
  2.     {beforeShow:function(){alert('before show'),return true},afterShow:function(){alert('after show');}})  
  3.     .show();  


hide()函数
[html]view plaincopyprint?
 
  1. dlg = new Dialog('hide()回调函数'  
  2.     {beforeHide:function(){alert('before hide'),return true},afterHide:function(){alert('after hide');}})  
  3.     .show();  
  4. dlg.hide();  

close()函数
[html]view plaincopyprint?
 
  1. new Dialog('close()回调函数'  
  2.     {beforeClose:function(){alert('before close'),return true},afterClose:function(){alert('after close');}})  
  3.     .show();  


js
[html]view plaincopyprint?
 
  1. /**  
  2.  * Dialog  
  3.  *  
  4.  * @author    caixw <http://www.caixw.com>  
  5.  * @copyright Copyright (C) 2010, http://www.caixw.com  
  6.  * @license   FreeBSD license  
  7.  */  
  8.   
  9.   
  10. /**  
  11.  * jQuery的Dialog插件。  
  12.  *  
  13.  * @param object content  
  14.  * @param object options 选项。  
  15.  * @return   
  16.  */  
  17. function Dialog(content, options)  
  18. {  
  19.     var defaults = { // 默认值。   
  20.         title:'标题',       // 标题文本，若不想显示title请通过CSS设置其display为none   
  21.         showTitle:true,     // 是否显示标题栏。  
  22.         closeText:'[关闭]', // 关闭按钮文字，若不想显示关闭按钮请通过CSS设置其display为none   
  23.         draggable:true,     // 是否移动   
  24.         modal:true,         // 是否是模态对话框   
  25.         center:true,        // 是否居中。   
  26.         fixed:true,         // 是否跟随页面滚动。  
  27.         time:0,             // 自动关闭时间，为0表示不会自动关闭。   
  28.         id:false            // 对话框的id，若为false，则由系统自动产生一个唯一id。   
  29.     };  
  30.     var options = $.extend(defaults, options);  
  31.     options.id = options.id ? options.id : 'dialog-' + Dialog.__count; // 唯一ID  
  32.     var overlayId = options.id + '-overlay'; // 遮罩层ID  
  33.     var timeId = null;  // 自动关闭计时器   
  34.     var isShow = false;  
  35.     var isIe = $.browser.msie;  
  36.     var isIe6 = $.browser.msie && ('6.0' == $.browser.version);  
  37.   
  38.     /* 对话框的布局及标题内容。*/  
  39.     var barHtml = !options.showTitle ? '' :  
  40.         '<div class="bar"><span class="title">' + options.title + '</span><a class="close">' + options.closeText + '</a></div>';  
  41.     var dialog = $('<div id="' + options.id + '" class="dialog">'+barHtml+'<div class="content"></div></div>').hide();  
  42.     $('body').append(dialog);  
  43.   
  44.   
  45.     /**  
  46.      * 重置对话框的位置。  
  47.      *  
  48.      * 主要是在需要居中的时候，每次加载完内容，都要重新定位  
  49.      *  
  50.      * @return void  
  51.      */  
  52.     var resetPos = function()  
  53.     {  
  54.         /* 是否需要居中定位，必需在已经知道了dialog元素大小的情况下，才能正确居中，也就是要先设置dialog的内容。 */  
  55.         if(options.center)  
  56.         {  
  57.             var left = ($(window).width() - dialog.width()) / 2;  
  58.             var top = ($(window).height() - dialog.height()) / 2;  
  59.             if(!isIe6 && options.fixed)  
  60.             {   dialog.css({top:top,left:left});   }  
  61.             else  
  62.             {   dialog.css({top:top+$(document).scrollTop(),left:left+$(document).scrollLeft()});   }  
  63.         }  
  64.     }  
  65.   
  66.     /**  
  67.      * 初始化位置及一些事件函数。  
  68.      *  
  69.      * 其中的this表示Dialog对象而不是init函数。  
  70.      */  
  71.     var init = function()  
  72.     {  
  73.         /* 是否需要初始化背景遮罩层 */  
  74.         if(options.modal)  
  75.         {  
  76.             $('body').append('<div id="' + overlayId + '" class="dialog-overlay"></div>');  
  77.             $('#' + overlayId).css({'left':0, 'top':0,  
  78.                     /*'width':$(document).width(),*/  
  79.                     'width':'100%',  
  80.                     /*'height':'100%',*/  
  81.                     'height':$(document).height(),  
  82.                     'z-index':++Dialog.__zindex,  
  83.                     'position':'absolute'})  
  84.                 .hide();  
  85.         }  
  86.   
  87.         dialog.css({'z-index':++Dialog.__zindex, 'position':options.fixed ? 'fixed' : 'absolute'});  
  88.   
  89.         /*  IE6 兼容fixed代码 */  
  90.         if(isIe6 && options.fixed)  
  91.         {  
  92.             dialog.css('position','absolute');  
  93.             resetPos();  
  94.             var top = parseInt(dialog.css('top')) - $(document).scrollTop();  
  95.             var left = parseInt(dialog.css('left')) - $(document).scrollLeft();  
  96.             $(window).scroll(function(){  
  97.                 dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left});  
  98.             });  
  99.         }  
  100.   
  101.         /* 以下代码处理框体是否可以移动 */  
  102.         var mouse={x:0,y:0};  
  103.         function moveDialog(event)  
  104.         {  
  105.             var e = window.event || event;  
  106.             var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);  
  107.             var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);  
  108.             dialog.css({top:top,left:left});  
  109.             mouse.x = e.clientX;  
  110.             mouse.y = e.clientY;  
  111.         };  
  112.         dialog.find('.bar').mousedown(function(event){  
  113.             if(!options.draggable){  return; }  
  114.   
  115.             var e = window.event || event;  
  116.             mouse.x = e.clientX;  
  117.             mouse.y = e.clientY;  
  118.             $(document).bind('mousemove',moveDialog);  
  119.         });  
  120.         $(document).mouseup(function(event){  
  121.             $(document).unbind('mousemove', moveDialog);  
  122.         });  
  123.   
  124.         /* 绑定一些相关事件。 */  
  125.         dialog.find('.close').bind('click', this.close);  
  126.         dialog.bind('mousedown', function(){  dialog.css('z-index', ++Dialog.__zindex); });  
  127.   
  128.         // 自动关闭   
  129.         if(0 != options.time){  timeId = setTimeout(this.close, options.time);    }  
  130.     }  
  131.   
  132.   
  133.     /**  
  134.      * 设置对话框的内容。   
  135.      *  
  136.      * @param string c 可以是HTML文本。  
  137.      * @return void  
  138.      */  
  139.     this.setContent = function(c)  
  140.     {  
  141.         var div = dialog.find('.content');  
  142.         if('object' == typeof(c))  
  143.         {  
  144.             switch(c.type.toLowerCase())  
  145.             {  
  146.             case 'id': // 将ID的内容复制过来，原来的还在。  
  147.                 div.html($('#' + c.value).html());  
  148.                 break;  
  149.             case 'img':  
  150.                 div.html('加载中...');  
  151.                 $('<img alt="" />').load(function(){div.empty().append($(this));resetPos();})  
  152.                     .attr('src',c.value);  
  153.                 break;  
  154.             case 'url':  
  155.                 div.html('加载中...');  
  156.                 $.ajax({url:c.value,  
  157.                         success:function(html){div.html(html);resetPos();},  
  158.                         error:function(xml,textStatus,error){div.html('出错啦')}  
  159.                 });  
  160.                 break;  
  161.             case 'iframe':  
  162.                 div.append($('<iframe src="' + c.value + '" />'));  
  163.                 break;  
  164.             case 'text':  
  165.             default:  
  166.                 div.html(c.value);  
  167.                 break;  
  168.             }  
  169.         }  
  170.         else  
  171.         {   div.html(c); }  
  172.     }  
  173.   
  174.     /**  
  175.      * 显示对话框  
  176.      */  
  177.     this.show = function()  
  178.     {  
  179.         if(undefined != options.beforeShow && !options.beforeShow())  
  180.         {   return;  }  
  181.   
  182.         /**  
  183.          * 获得某一元素的透明度。IE从滤境中获得。  
  184.          *  
  185.          * @return float  
  186.          */  
  187.         var getOpacity = function(id)  
  188.         {  
  189.             if(!isIe)  
  190.             {   return $('#' + id).css('opacity');    }  
  191.   
  192.             var el = document.getElementById(id);  
  193.             return (undefined != el  
  194.                     && undefined != el.filters  
  195.                     && undefined != el.filters.alpha  
  196.                     && undefined != el.filters.alpha.opacity)  
  197.                 ? el.filters.alpha.opacity / 100 : 1;  
  198.         }  
  199.         /* 是否显示背景遮罩层 */  
  200.         if(options.modal)  
  201.         {   $('#' + overlayId).fadeTo('slow', getOpacity(overlayId));   }  
  202.         dialog.fadeTo('slow', getOpacity(options.id), function(){  
  203.             if(undefined != options.afterShow){   options.afterShow(); }  
  204.             isShow = true;  
  205.         });  
  206.         // 自动关闭   
  207.         if(0 != options.time){  timeId = setTimeout(this.close, options.time);    }  
  208.   
  209.         resetPos();  
  210.     }  
  211.   
  212.   
  213.     /**  
  214.      * 隐藏对话框。但并不取消窗口内容。  
  215.      */  
  216.     this.hide = function()  
  217.     {  
  218.         if(!isShow){ return; }  
  219.   
  220.         if(undefined != options.beforeHide && !options.beforeHide())  
  221.         {   return;  }  
  222.   
  223.         dialog.fadeOut('slow',function(){  
  224.             if(undefined != options.afterHide){   options.afterHide(); }  
  225.         });  
  226.         if(options.modal)  
  227.         {   $('#' + overlayId).fadeOut('slow');   }  
  228.   
  229.         isShow = false;  
  230.     }  
  231.   
  232.     /**  
  233.      * 关闭对话框   
  234.      *  
  235.      * @return void  
  236.      */  
  237.     this.close = function()  
  238.     {  
  239.         if(undefined != options.beforeClose && !options.beforeClose())  
  240.         {   return;  }  
  241.   
  242.         dialog.fadeOut('slow', function(){  
  243.             $(this).remove();  
  244.             isShow = false;  
  245.             if(undefined != options.afterClose){   options.afterClose(); }  
  246.         });  
  247.         if(options.modal)  
  248.         {   $('#'+overlayId).fadeOut('slow', function(){$(this).remove();}); }  
  249.         clearTimeout(timeId);  
  250.     }  
  251.   
  252.       
  253.   
  254.     init.call(this);  
  255.     this.setContent(content);  
  256.       
  257.     Dialog.__count++;  
  258.     Dialog.__zindex++;  
  259. }  
  260. Dialog.__zindex = 500;  
  261. Dialog.__count = 1;  
  262. Dialog.version = '1.0 beta';  
  263.   
  264. function dialog(content, options)  
  265. {  
  266.     var dlg = new Dialog(content, options);  
  267.     dlg.show();  
  268.     return dlg;  
  269. }  


css
[html]view plaincopyprint?
 
  1. @charset "utf-8";  
  2.   
  3. .dialog-overlay  
  4. {  
  5.     opacity:0.5;  
  6.     filter:alpha(opacity:50);  
  7.     background:gray;  
  8. }  
  9.   
  10. .dialog  
  11. {  
  12.     /*border:5px solid rgba(200,200,200,0.9);*/  
  13.     background:gray;  
  14.     padding:10px;  
  15.     opacity:0.9;  
  16.     filter:alpha(opacity:70);  
  17.     border-radius:3px;  
  18.     -moz-border-radius:3px;  
  19.     -webkit-border-radius:3px;  
  20.     _width:expression('200px'); /* IE6下不指定此值，会一直粘在右侧 */  
  21. }  
  22.   
  23.   
  24.   
  25. .dialog .bar  
  26. {  
  27.     cursor:move;  
  28.     color:#fff;  
  29.     background:#000;  
  30.     padding:6px;  
  31.     min-height:15px; /* 不指定此值，在title和closeText都为空的情况下，可能移动条会消失不见 */  
  32.     _height:expression('20px'); /* ie6下不指定高度，标题栏会变得很小 */  
  33. }  
  34.   
  35. .dialog .bar .title  
  36. {  
  37.     float:left;  
  38.     margin-right:10px;  
  39. }  
  40.   
  41. .dialog .bar .close  
  42. {  
  43.     float:right;  
  44.     cursor:pointer;  
  45.     text-decoration:underline;  
  46. }  
  47.   
  48. .dialog .content  
  49. {  
  50.     background:#fff;  
  51.     padding:10px;  
  52. }  
  53.   
  54. .dialog iframe  
  55. {  
  56.     height:100%;  
  57.     width:100%;  
  58. }  
  59.   
  60.   
  61.   
  62. /* 指定图像最大尺寸，不需要可以删除。 */  
  63. .content img  
  64. {  
  65.     overflow:auto;  
  66.     max-width:700px;  
  67.     max-height:500px;  
  68.     /* IE6版的max-width和max-height，但是也会有点BUG在图片太小时，也会显示最大值，需要同时指定width和height */  
  69.     _width:expression((document.body.clientWidth > 700) ? '700px' : 'auto');  
  70.     _height:expression((document.body.clientHeight > 500) ? '500px' : 'auto');  
  71. }  
posted @ 2014-09-03 18:25  zhangsai  阅读(584)  评论(0)  编辑  收藏  举报