原生javascript对话框 --- sy_dialog

最新推荐文章于 2021-09-15 22:05:13 发布

asdhjhzmu16342979

最新推荐文章于 2021-09-15 22:05:13 发布

阅读量180

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/latefor/p/3323833.html

版权

基本功能介绍

sy_dialog是一款原生javascript对话框；支持自定义对话框界面，自定义多个按钮（可自定义回调函数），对话框有3种状态（隐藏，显示，销毁）

可以使用对象字面量作为参数，也可以使用普通类型作为参数；

使用对象字面量作为参数

1.普通对话框

sy_dialog.dialog({title:'标题',content:'普通对话框'})；

2.修改width参数

var longStr="定义width属性；这也是个普通的对话框，不过内容比较长，自这也是个普通的对话框，不过内容比较长；这也是个普通的对话框，不过内容比较长；这也是个普通的对话框，不过内容比较长...";

sy_dialog.dialog({title:'标题',content:longStr,width:300})

3.改变外观自定义参数 XXXClassName

先定义css类：.testBgColor'{background-color:#08c;}

sy_dialog.dialog({content:'自定义样式的对话框',title:'我的颜色变了',titleBoxClassName:'testBgColor'});

4.自定义多个按钮

user_define_buttons=[{'value':'no_close','handler':function(){
alert('no_close Button clicked,and the dialog will not be shut down');
return true;
}},
{'value':'Hide','handler':function(){
alert('Hide Button clicked, 对话框将被隐藏,必须定义对象字面量中参数id，否则无效 ');
this.hide('buttons');
}},
{'value':'Close','handler':function(){
alert('Close button clicked,对话框将被销毁');
this.close('buttons');
}}
]

user_define_buttons_str="自定义多个按钮，使用return true禁用按钮默认行为（默认行为请查看具体帮助信息），可调用sy_dialog内部方法close,hide,show";

sy_dialog.dialog({id:'myId',content:user_define_buttons_str,title:'多个按钮',buttons:user_define_buttons,width:400});

5.没有按钮

sy_dialog.dialog({content:'<img src="img/1.jpg" height=400 />;',buttons:false});

6.模态窗口 modal

sy_dialog.dialog({content:' < img src="img/1.jpg" height=400 / >',buttons:false，modal:true});

使用普通参数调用(title,content,modal,width,height)

1.只有一个string类型参数时，默认为content

sy_dialog.dialog('只有一个string类型参数时，默认为content');

2.多个参数

sy_dialog.dialog('title','4个参数，title和content,modal,width;如需要还可以定义第5个参数height',false,300);

参数列表

名称	说明	类型
content	对话框主要内容	string
title	标题	string
width	宽	int
height	高	int
buttons	[ {按钮，格式[value:'title',className:'your define class',handler:function(){},{......}{......}{.....} ]	[{}]
xxxClassName	具体莫一块的自定义class，学习作品，(modalBoxClassName,dlgBoxClassName,titleBoxClassName,closeBoxClassName,contentBoxClassName,bottomBoxClassName,buttons内部也可以定义不做详细说明，有兴趣可看源码	string
modal	模态显示	boolean
id	重要参数，影响按钮默认行为，无id时默认行为为关闭(销毁)，有id时默认行为为hide；可调用sy_dialog.show(id）显示，如需销毁sy_dialog.close(id),或隐藏sy_dialog.hide(id)	string

代码

  1 // sy_dialog()
  2 
  3 /*    sy_dialog moudle    
  4 *    args:
  5 *        modal:boolean
  6 *        modalBoxClassName:string
  7 *        dlgBoxClassName    :string                    
  8 *        id:string    影响是否重复创建，默认关闭行为
  9         title:string    
 10         titleBoxClassName:string    
 11         closeIcoClassName:string    
 12         content:string    
 13         contentBoxClassName:string    
 14         buttonsClassName:string    
 15         bottomBoxClassName:string    
 16         buttons:[{value:,className,handler}]
 17             eg:buttons:[{value:'OK',handler:function(){do something...},{value:'CanCel',handler:function(){do something...}]
 18         width:int || string
 19         height:int || string
 20     
 21 *
 22 */
 23 //注：自定义ClassName样式表如在不同文件最好 先加载msg_dialog.css后加载自定义文件；如在同一文件，自定义样式写在默认样式后
 24 var log=function(x){ if (window.console){console.log(x);} };
 25 var sy_dialog= (function(){
 26     var    doc=document,
 27         _sy_dlgBox_id_prefix='_sy_dlgBox_',
 28         _sy_modalBox_id_prefix='_sy_modalBox_',
 29         _sy_conent_id_prefix='_sy_content_',
 30         _parent=doc.getElementsByTagName('body')[0],
 31         _index=0,
 32         _modalBoxClassName='sy_dialog_modalBox',
 33         _dlgBoxClassName='sy_dialog_dlgBox',
 34         _titleBoxClassName='sy_dialog_titleBox',
 35         _closeIcoClassName='sy_dialog_closeIco',
 36         _contentBoxClassName='sy_dialog_contentBox',
 37         _buttonsClassName='sy_dialog_buttons',
 38         _bottomBoxClassName='sy_dialog_bottomBox',
 39         _buttons=[{'title':'OK','ClassName':'dlgBox-btnOk','style':{},'handler':function(){console.log('btnOk clicked');}}],
 40 
 41         $=function(id){            
 42             if(typeof id==='string'){return doc.getElementById(id);    }
 43             //对象判断 待修复
 44             if(id.nodeName && id.appendChild){return id;}
 45             return null;
 46         },        
 47         createEl=function(nodeName,className,id){
 48             var node=doc.createElement(nodeName);                
 49             if(className){ node.className=className; }
 50             if(id) { node.id=id; }                
 51             return node;
 52         },
 53         createHTMLStr=function(str,className,nodeName,id){
 54             nodeName=nodeName || 'div';
 55             id=id ? " id='"+id+"' " : '';
 56             return "<"+nodeName+id+" class='"+className+"'>"+str+"</"+nodeName+">";
 57         },
 58         mergeClassName=function(origin,addition){
 59             if(addition) { return origin+' '+addition;}
 60             return origin;
 61         },
 62         isArray = function(obj) { 
 63             return Object.prototype.toString.call(obj) === '[object Array]'; 
 64         } ,
 65         addHandler=function(element, type, handler){
 66             if (element.addEventListener){
 67                 element.addEventListener(type, handler, false);
 68             } else if (element.attachEvent){
 69                 element.attachEvent("on" + type, handler);
 70             } else {
 71                 element["on" + type] = handler;
 72             }
 73         },
 74         preventDefault=function(event){
 75             if (event.preventDefault){
 76                 event.preventDefault();
 77             } else {
 78                 event.returnValue = false;
 79             }
 80         };
 81 
 82 
 83     function show(id){
 84         toggleDisplay(id,'block');
 85     }
 86     function hide(id){
 87         toggleDisplay(id,'none');
 88     }
 89 
 90     function toggleDisplay(id,style){
 91         var dlgBox,modalBox;
 92         if(typeof id==='string'){
 93             dlgBox=$(_sy_dlgBox_id_prefix+id);
 94             modalBox=$(_sy_modalBox_id_prefix+id);
 95             if(dlgBox) {dlgBox.style.display=style;}
 96             if(modalBox){modalBox.style.display=style;}
 97         }
 98     }
 99 
100     function close(arg1,arg2){
101         var dlgBox,modalBox;
102         //根据id操作
103         if(typeof arg1==='string'){
104             dlgBox=$(_sy_dlgBox_id_prefix+arg1);
105             modalBox=$(_sy_modalBox_id_prefix+arg1);            
106         } else{
107             if (arg1){ dlgBox=arg1; }
108             if (arg2){ modalBox=arg2; }
109         }
110         if(dlgBox) { _parent.removeChild(dlgBox); }
111         if(modalBox) { _parent.removeChild(modalBox); }
112     }        
113     
114     //创建sButton并为buttons赋予id值
115     function createButtons(index,buttons,buttonDefaultClassName){
116         var i,len,id,buttonClassName='',value,sButtons='';            
117         for(i=0,len=buttons.length;i<len;i++){        
118             id='sy_dialog_btn_'+index+'_'+i;//buttons.id for event;                
119             buttons[i].id=id;
120             if(buttons[i].className){ buttonClassName=buttonDefaultClassName+' '+buttons[i].className; }
121             if(buttons[i].value){ 
122                 value=buttons[i].value;    
123             } else {
124                 value='OK';
125             }
126             sButtons+="<input id='"+id+"' class='"+buttonClassName+"' type='button' value='"+value+"'/>";
127         }            
128         return sButtons;
129     }
130 
131     //读取buttons对象的值
132     function getButtons(argButtons){
133         var i,len,button,buttons,obj,prop;                
134         if(argButtons){
135             if(argButtons.length>0){
136                 buttons=[];                
137                 for(i=0,len=argButtons.length;i<len;i++){                    
138                     button={};
139                     obj=argButtons[i];
140                     for(prop in obj){
141                         if(obj.hasOwnProperty(prop)){
142                             button[prop]=obj[prop];
143                         }
144                     }
145                     buttons.push(button);
146                 }
147                 return buttons;
148             }else{
149                 return '';
150             }
151         }
152     }
153 
154     //重定位
155     function resetLayout(obj){
156         var oWidth=parseInt(obj.offsetWidth,10),//                
157             oHeight=parseInt(obj.offsetHeight,10),
158             clientWidth=document.documentElement.clientWidth || document.body.clientWidth,
159             clientHeight=document.documentElement.clientHeight || document.body.clientHeight,
160             scrollTop=document.documentElement.scrollTop || document.body.scrollTop;        
161         obj.style.left=(clientWidth-oWidth)/2+'px';
162         obj.style.top=(clientHeight-oHeight)/2+scrollTop+'px';
163     }
164 
165     function init(args){
166         var modalBoxClassName,
167             dlgBoxClassName,
168             titleBoxClassName,
169             closeIcoClassName,
170             contentBoxClassName,
171             buttonsClassName,
172             bottomBoxClassName,
173             buttons,
174             modal=false,
175             title='',
176             content='',
177             dlgBox_id,modalBox_id,    content_id,
178             width=0,
179             height=0,            
180             modalBox,dlgBox,sTitle='',sCloseIco='',sContent='',sBottom='',sButtons,
181             clientWidth,clientHeight,scrollTop;
182 
183         _index++;    
184         //对象字面量 参数形式
185         if(typeof args==='object'){
186 
187             /* id：
188                     为id加上前缀，避免与现有dom id冲突
189                     id影响行为：有id时此dlg默认关闭行为是hide；hide后可用show显示，
190                         如需真正关闭，在自定义button内加close函数 自定义button内函数调用this.close(id),this.show(id),this.hide(id)                
191             */
192             if(typeof args.id==='string'){ 
193                 modalBox_id=_sy_modalBox_id_prefix+args.id; 
194                 dlgBox_id=_sy_dlgBox_id_prefix+args.id;                    
195                 if($(dlgBox_id)){
196                     show(args.id);
197                     return;
198                 }    
199             } 
200             
201             //是否模块化显示
202             //xxxClassName为不同模块加上自定义class
203             modal=args.modal;
204             modalBoxClassName=mergeClassName(_modalBoxClassName,args.modalBoxClassName);
205 
206             dlgBoxClassName=mergeClassName(_dlgBoxClassName,args.dlgBoxClassName);    
207 
208             //高宽
209             if(args.width){    width=parseInt(args.width,10); }
210             if(args.height){height=parseInt(args.height,10); }
211 
212             //标题
213             if(typeof args.title==='string'){ title=args.title;    }
214             closeIcoClassName=mergeClassName(_closeIcoClassName,args.closeIcoClassName);
215             titleBoxClassName=mergeClassName(_titleBoxClassName,args.titleBoxClassName);
216 
217             //内容
218             if(typeof args.content==='string'){ content=args.content;    }                    
219             contentBoxClassName=mergeClassName(_contentBoxClassName,args.contentBoxClassName);
220 
221             //buttons：先从系统内置对象读取；在判断是否有自定义buttons并读取
222             //自定义buttons:false 或 buttons:[] 将使buttons的值为空
223             buttons=getButtons(_buttons);
224             if(args.buttons===false || args.buttons==='false'){
225                 buttons='';
226             }else if(isArray(args.buttons)){
227                 buttons=getButtons(args.buttons);
228             }
229             buttonsClassName=mergeClassName(_buttonsClassName,args.buttonsClassName);    
230             bottomBoxClassName=mergeClassName(_bottomBoxClassName,args.bottomBoxClassName);
231 
232         }else if(typeof args==='string'){    //普通参数形式
233             modalBoxClassName=_modalBoxClassName;
234             dlgBoxClassName=_dlgBoxClassName;
235             titleBoxClassName=_titleBoxClassName;
236             closeIcoClassName=_closeIcoClassName;
237             contentBoxClassName=_contentBoxClassName;
238             buttonsClassName=_buttonsClassName;
239             bottomBoxClassName=_bottomBoxClassName;
240             buttons=getButtons(_buttons);
241             //参数length为1时默认为content
242             if(arguments.length===1){
243                 content=arguments[0];
244             }else if(arguments.length>1){
245                 title=arguments[0];
246                 content=arguments[1];
247                 if(arguments[2]){ 
248                     if(arguments[2]==='false'){
249                         modal=false;
250                     }else{
251                         modal=!!arguments[2];
252                     }
253                 }
254             }
255             if(arguments[3]){
256                 if(parseInt(arguments[3],10)>0){
257                     width=parseInt(arguments[3],10);
258                 }
259             }
260             if(arguments[4]){
261                 if(parseInt(arguments[4],10)>0){
262                     height=parseInt(arguments[4],10);
263                 }
264             }
265         }else{
266             alert('参数错误');
267         }
268 
269         
270         if(modal){                                
271             modalBox=createEl('div',modalBoxClassName,modalBox_id);    
272             clientWidth=document.documentElement.clientWidth || document.body.clientWidth;
273             clientHeight=document.documentElement.clientHeight || document.body.clientHeight;
274             scrollTop=document.documentElement.scrollTop || document.body.scrollTop;    
275             modalBox.style.width=clientWidth+'px';
276             modalBox.style.height=clientHeight+scrollTop+'px';
277             _parent.appendChild(modalBox);            
278         }        
279         
280         dlgBox=createEl('div',dlgBoxClassName,dlgBox_id);
281 
282         //是否有自定义高宽
283         if(width>0){ dlgBox.style.width=width+'px'; }
284         if(height>0){ dlgBox.style.height=height+'px'; }
285         
286         //dlg内部 内容采用innerHTML方式
287         sCloseIco=createHTMLStr('X',closeIcoClassName,'span');                
288         sTitle=createHTMLStr(title+sCloseIco,titleBoxClassName);            
289         sContent=createHTMLStr(content,contentBoxClassName);
290         
291         if(buttons){                
292             sButtons=createButtons(_index,buttons,buttonsClassName);
293         }        
294         if(sButtons){                
295             sBottom=createHTMLStr(sButtons,bottomBoxClassName);
296         }            
297         
298         dlgBox.innerHTML=sTitle+sContent+sBottom;    
299 
300         //考虑是否用不同的parent        
301         _parent.appendChild(dlgBox);
302         resetLayout(dlgBox);        
303         registerListener(dlgBox,modalBox,buttons);        
304     }            
305 
306     //test fn；；；可用直接写在自定义buttons的handler内
307     this.hide_fn=function(){
308         log('hidden in messager.this.fn function is exec...');
309     };
310     
311 
312     //events
313     function registerListener(dlgBox,modalBox,buttons){
314         var isMouseDown=false,
315             //canResize=false,
316             _close,    id,    mouseX,mouseY,dlgX,dlgY,i,len;    
317 
318         //click        
319         addHandler(dlgBox,'click',function(event){
320             var target;
321             event=event || window.event;
322             target=event.target || event.srcElement;
323             _close=false;                
324             //indexof  考虑用正则替换
325             if(target.className.indexOf(_closeIcoClassName)!==-1){                
326                 _close=true;
327             } else if((target.nodeName.toLowerCase()==='input') && (target.type.toLowerCase()==='button')){
328                 for(i=0,len=buttons.length;i<len;i++){
329                     if(target.id===buttons[i].id){
330                         if(buttons[i].handler){
331                             _close=!!!buttons[i].handler.call(sy_dialog);                            
332                         }
333                     }
334                 }                
335             }            
336             if(_close){
337                 if(dlgBox.id){ 
338                     id=dlgBox.id.replace(_sy_dlgBox_id_prefix,'');
339                     hide(id);
340                 }else{
341                     close(dlgBox,modalBox);
342                 }
343             }        
344         });
345 
346         /*        drag        */
347         addHandler(dlgBox,'mousedown',function(event){
348             var target;
349             event=event || window.event;
350             target=event.target || event.srcElement;
351             
352             if((target.className.indexOf(_titleBoxClassName)!==-1) || (target.parent && target.parent.className.indexOf(_titleBoxClassName)!==-1)){
353                 preventDefault(event);
354                 isMouseDown=true;
355                 dlgX=parseInt(dlgBox.offsetLeft,10);
356                 dlgY=parseInt(dlgBox.offsetTop,10);
357                 mouseX=event.clientX;
358                 mouseY=event.clientY;                
359             }
360             
361         });
362         addHandler(dlgBox,'mousemove',function(event){
363             var target;
364             event=event || window.event;
365             target=event.target || event.srcElement;                
366             if(isMouseDown){
367                 //console.log('x:'+event.clientX+'    y:'+event.clientY+'    cx:'+dlgX+'    cy:'+dlgY+'    ox:'+dlgWidth+'    oy:'+dlgHeight);
368                 preventDefault(event);                                    
369                 dlgBox.style.top=event.clientY-mouseY+dlgY+'px';
370                 dlgBox.style.left=event.clientX-mouseX+dlgX+'px';                
371             }
372         });
373         addHandler(dlgBox,'mouseup',function(){
374             isMouseDown=false;            
375         });
376 
377     }
378 
379     return{
380         dialog:init,
381         hide:hide,
382         show:show,
383         close:close            
384     };
385 })();