码迷,mamicode.com
首页 > Web开发 > 详细

jQuery Dialog弹出层对话框插件

时间:2014-11-24 20:38:47      阅读:324      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   ar   color   os   sp   

Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统!

dialog.js

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

jquery.min.js

dialog.css

测试页面测试结果

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
  2 <HTML>
  3 <HEAD lang=zh>
  4 <TITLE>jQuery Dialog弹出层对话框插件演示</TITLE>
  5 <META http-equiv=Content-Type content=text/html;charset=utf-8>
  6 <META content="jquery,dialog,plugins,jquery plugins,弹出层,对话框" name=keywords>
  7 <META content=jQuery插件dialog演示 name=description>
  8 <LINK href="dialog.css" type=text/css rel=stylesheet>
  9 <SCRIPT src="jquery.min.js" type=text/javascript></SCRIPT>
 10 <SCRIPT src="dialog.js" type=text/javascript></SCRIPT>
 11 <SCRIPT src="prettify.js" type=text/javascript></SCRIPT>
 12 
 13 
 14 
 15 <STYLE type=text/css>
 16 BODY {
 17     FONT-SIZE: 90%;
 18     BACKGROUND: #ddd;
 19     TEXT-ALIGN: center
 20 }
 21 
 22 A {
 23     CURSOR: pointer;
 24     TEXT-DECORATION: none
 25 }
 26 
 27 A:hover {
 28     TEXT-DECORATION: underline
 29 }
 30 
 31 .left {
 32     FLOAT: left
 33 }
 34 
 35 .right {
 36     FLOAT: right
 37 }
 38 
 39 .clear {
 40     CLEAR: both
 41 }
 42 
 43 .center {
 44     BORDER-RIGHT: gray 1px solid;
 45     BORDER-TOP: gray 1px solid;
 46     BACKGROUND: #fff;
 47     MARGIN-LEFT: auto;
 48     BORDER-LEFT: gray 1px solid;
 49     WIDTH: 70%;
 50     MARGIN-RIGHT: auto;
 51     BORDER-BOTTOM: gray 1px solid
 52 }
 53 
 54 .header {
 55     PADDING-RIGHT: 20px;
 56     PADDING-LEFT: 20px;
 57     BACKGROUND: #ddd;
 58     PADDING-BOTTOM: 20px;
 59     PADDING-TOP: 20px
 60 }
 61 
 62 .footer {
 63     PADDING-RIGHT: 20px;
 64     PADDING-LEFT: 20px;
 65     BACKGROUND: #ddd;
 66     PADDING-BOTTOM: 20px;
 67     PADDING-TOP: 20px
 68 }
 69 
 70 .ad-left {
 71     LEFT: 6px;
 72     POSITION: absolute;
 73     TOP: 100px
 74 }
 75 
 76 .ad-right {
 77     RIGHT: 6px;
 78     POSITION: absolute;
 79     TOP: 100px
 80 }
 81 
 82 .content {
 83     PADDING-RIGHT: 20px;
 84     PADDING-LEFT: 20px;
 85     PADDING-BOTTOM: 20px;
 86     PADDING-TOP: 20px;
 87     TEXT-ALIGN: left
 88 }
 89 
 90 .content .list {
 91     PADDING-BOTTOM: 20px;
 92     MARGIN: 20px;
 93     BORDER-BOTTOM: gray 1px dotted
 94 }
 95 
 96 H5 {
 97     MARGIN: 0px
 98 }
 99 
100 PRE {
101     PADDING-RIGHT: 2px ! important;
102     PADDING-LEFT: 2px ! important;
103     PADDING-BOTTOM: 2px ! important;
104     MARGIN: 5px 10px 10px;
105     PADDING-TOP: 2px ! important;
106     WORD-WRAP: break-word
107 }
108 
109 PRE {
110     CURSOR: pointer
111 }
112 
113 PRE:hover {
114     BACKGROUND: gray
115 }
116 
117 #dialog1-overlay {
118     BACKGROUND: blue;
119     FILTER: alpha(opacity =     80);
120     opacity: 0.8
121 }
122 
123 #dialog2 .content {
124     BACKGROUND-IMAGE:
125         url(http://www.cnblogs.com/visec479public/uploads/demo/images/300x125.gif);
126     WIDTH: 250px;
127     HEIGHT: 80px
128 }
129 </STYLE>
130 
131 <META content="MSHTML 6.00.6000.17063" name=GENERATOR>
132 </HEAD>
133 <BODY>
134     <DIV class=center>
135         <DIV class=header>
136             <H1>jQuery Dialog弹出层对话框插件演示</H1>
137             <SPAN class=left><A href="dialog.js">下载JS文件</A> | <A
138                 href="dialog.css">下载CSS文件</A> | <A
139                 href="http://www.cnblogs.com/visec479/p/3939645.html">返回相关文章</A> </SPAN><SPAN class=right>最后更新:<TIME>2014-8-28</TIME>
140             </SPAN>
141             <DIV class=clear></DIV>
142         </DIV>
143         <!-- end header -->
144         <DIV class=content>
145             <DIV class=list>
146                 <H3>基本操作</H3>
147                 <H5>默认的</H5>
148                 <PRE class="prettyprint lang-js"
149                     onclick="new Dialog(‘这是一个默认对话框‘).show();">new Dialog(‘这是一个默认对话框‘).show();
150                 </PRE>
151                 <H5>非模态对话框</H5>
152                 <PRE class="prettyprint lang-js"
153                     onclick="new Dialog(‘非模态对话框,可以打开多个!‘,{modal:false}).show();">new Dialog(‘非模态对话框,可以打开多个!‘,{modal:false}).show();
154                 </PRE>
155                 <H5>自动关闭</H5>
156                 <PRE class="prettyprint lang-js"
157                     onclick="new Dialog(‘5秒后自动关闭‘,{time:5000}).show();">new Dialog(‘5秒后自动关闭‘,{time:5000}).show();
158                 </PRE>
159                 <H5>非fixed模式</H5>
160                 <PRE class="prettyprint lang-js"
161                     onclick="new Dialog(‘对话框不随滚动条移动‘,{fixed:false}).show();">new Dialog(‘对话框不随滚动条移动‘,{fixed:false}).show();
162                 </PRE>
163                 <H5>显示指定ID的内容</H5>
164                 <PRE class="prettyprint lang-js" id=content-type-id
165                     onclick="new Dialog({type:‘id‘,value:‘content-type-id‘}).show();">// 将显示本标签内的内容。
166                     new Dialog({type:‘id‘,value:‘content-type-id‘}).show();
167                 </PRE>
168                 <H5>加载一张图片</H5>
169                 <PRE class="prettyprint lang-js"
170                     onclick="new Dialog({type:‘img‘,value:‘http://www.cnblogs.com/visec479public/uploads/demo/images/300x125.gif‘}).show();">new Dialog({type:‘img‘,value:‘http://www.cnblogs.com/visec479public/uploads/demo/images/300x125.gif‘}).show();
171                 </PRE>
172                 <H5>加载一URL地址</H5>
173                 <PRE class="prettyprint lang-js"
174                     onclick="new Dialog({type:‘url‘,value:‘http://www.cnblogs.com/visec479public/uploads/demo/jquery/dialog/test.html‘}).show();">new Dialog({type:‘url‘,value:‘http://www.cnblogs.com/visec479public/uploads/demo/jquery/dialog/test.html‘}).show();
175                 </PRE>
176                 <H5>加载一URL到iframe</H5>
177                 <PRE class="prettyprint lang-js"
178                     onclick="new Dialog({type:‘iframe‘,value:‘http://www.caixw.com‘}).show();">new Dialog({type:‘iframe‘,value:‘http://www.caixw.com‘}).show();
179                 </PRE>
180             </DIV>
181             <!-- end list -->
182             <DIV class=list>
183                 <H3>自定义CSS</H3>
184                 <H5>自定义背景遮盖层</H5>
185                 <PRE class="prettyprint lang-css">#dialog1-overlay
186                     {
187                       background:blue;
188                       opacity:0.8;
189                       filter:alpha(opacity=80);
190                     }
191                 </PRE>
192                 <PRE class="prettyprint lang-js"
193                     onclick="new Dialog(‘自定义背景遮盖层‘,{id:‘dialog1‘}).show();">new Dialog(‘自定义背景遮盖层‘,{id:‘dialog1‘}).show();
194                 </PRE>
195                 <H5>自定义内容部分背景</H5>
196                 <PRE class="prettyprint lang-css">#dialog2 .content
197                     {
198                       width:250px;
199                       height:80px;
200                       background-image:url(http://www.cnblogs.com/visec479public/uploads/demo/images/300x125.gif);
201                     }
202 </PRE>
203                 <PRE class="prettyprint lang-js"
204                     onclick="new Dialog(‘自定义内容部分背景‘,{id:‘dialog2‘}).show();">new Dialog(‘自定义内容部分背景‘,{id:‘dialog2‘}).show();
205 </PRE>
206                 <!--h3></h3>
207 <pre class="prettyprint lang-js">
208 </pre-->
209             </DIV>
210             <!-- end list -->
211             <DIV class=list>
212                 <H3>回调函数</H3>
213                 <H5>show()函数</H5>
214                 <PRE class="prettyprint lang-js"
215                     onclick="new Dialog(‘show()回调函数‘,{afterShow:function(){alert(‘after show‘);},beforeShow:function(){alert(‘before show‘);return true;}}).show();">new Dialog(‘show()回调函数‘
216     {beforeShow:function(){alert(‘before show‘),return true},afterShow:function(){alert(‘after show‘);}})
217     .show();
218 </PRE>
219                 <H5>hide()函数</H5>
220                 <PRE class="prettyprint lang-js">dlg = new Dialog(‘hide()回调函数‘
221     {beforeHide:function(){alert(‘before hide‘),return true},afterHide:function(){alert(‘after hide‘);}})
222     .show();
223 dlg.hide();
224 </PRE>
225                 <BUTTON
226                     onclick="dlg = new Dialog(‘hide()回调函数‘,{afterHide:function(){alert(‘after hide‘);},beforeHide:function(){alert(‘before hide‘);return true;},modal:false});dlg.show();">显示</BUTTON>
227                 &nbsp;&nbsp;&nbsp;
228                 <BUTTON onclick=dlg.hide();>隐藏</BUTTON>
229                 <BR> <BR>
230                 <H5>close()函数</H5>
231                 <PRE class="prettyprint lang-js"
232                     onclick="new Dialog(‘close()回调函数‘,{afterClose:function(){alert(‘after close‘);},beforeClose:function(){alert(‘before close‘);return true;}}).show();">new Dialog(‘close()回调函数‘
233     {beforeClose:function(){alert(‘before close‘),return true},afterClose:function(){alert(‘after close‘);}})
234     .show();
235 </PRE>
236             </DIV>
237             <!-- end list -->
238         </DIV>
239         <!-- end content -->
240         <DIV class=footer>
241             ©2010 by <A href="http://www.cnblogs.com/visec479" rel=me>caixw.com</A> | <A
242                 href="http://www.cnblogs.com/visec479/p/3939645.html">相关文章</A>
243         </DIV>
244     </DIV>
245     <!-- end center -->
246     <DIV class=ad-left></DIV>
247     <!-- end header -->
248     <DIV class=ad-right></DIV>
249     <!-- end footer -->
250 
251 </BODY>
252 </HTML>

 

bubuko.com,布布扣bubuko.com,布布扣

jQuery Dialog弹出层对话框插件

标签:des   style   blog   http   io   ar   color   os   sp   

原文地址:http://www.cnblogs.com/jameslif/p/4119324.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!