前端弹出对话框js实现ajax交互剖析.docx

复制代码

接着给出选择器部分代码，也就是outil.js的代码，当然之前的jquery以及jqueryui就不说了。

其核心是绑定click事件。

复制代码

jQuery.extend（{

getCookie:

function（sName）{

varaCookie=document.cookie.split（";"）;

for（vari=0;i

varaCrumb=aCookie[i].split（"="）;

if（sName==aCrumb[0]）returndecodeURIComponent（aCrumb[1]）;

}

return'';

},

setCookie:

function（sName,sValue,sExpires）{

varsCookie=sName+"="+encodeURIComponent（sValue）;

if（sExpires!

=null）sCookie+=";expires="+sExpires;document.cookie=sCookie;

},

removeCookie:

function（sName）{

document.cookie=sName+"=;expires=Fri,31Dec199923:

59:

59GMT;";}

}）;

$（function（）{

/*dialog选择并绑定一个新的click事件*/

$（'*[ectype="dialog"]'）.click（function（）{

varid=$（this）.attr（'dialog_id'）;

vartitle=$（this）.attr（'dialog_title'）?

$（this）.attr（'dialog_title'）:

'';varurl=$（this）.attr（'uri'）;

varwidth=$（this）.attr（'dialog_width'）;ajax_form（id,title,url,width）;returnfalse;

}）;

}）;

functiondrop_confirm（msg,url）{

if（confirm（msg））{

window.location=url;

}

}

/*显示Ajax表单*/

functionajax_form（id,title,url,width）

{

if（!

width）

{

width=400;

}

vard=DialogManager.create（id）;

d.setTitle（title）;

d.setContents（'ajax',url）;d.setWidth（width）;d.show（'center'）;

returnd;

}

functiongo（url）{

window.location=url;

}

functionset_zindex（parents,index）{

$.each（parents,function（i,n）{

if（$（n）.css（'position'）=='relative'）{//alert（'relative'）;

//alert（$（n）.css（'z-index'））;

$（n）.css（'z-index',index）;

}

}）;

}

functionjs_success（dialog_id）

{

DialogManager.close（dialog_id）;

varurl=window.location.href;

url=url.indexOf（'#'）>0?

url.replace（/#/g,''）:

url;window.location.replace（url）;

}

functionjs_fail（str）

{

$（'#warning'）.html（''+str+''）;$（'#warning'）.show（）;

}

functioncheck_pint（v）

{

varregu=/人[0-9]{1,}$/;

if（!

regu.test（v））

{

alert（lang.only_int）;

returnfalse;

}

returntrue;

}

/*转化JS跳转中的&*/

functiontransform_char（str）

{

if（str.indexOf（'&'））

{

str=str.replace（/&/g,"%26"）;

}

returnstr;

}

//复制到剪贴板

functioncopyToClipboard（txt）{

if（window.clipboardData）{window.clipboardData.clearData（）;window.clipboardData.setData（"Text",txt）;

}elseif（navigator.userAgent.indexOf（"Opera"）!

=-1）{window.location=txt;

}elseif（scape）{

try{netscape.security.PrivilegeManager.enablePrivilege（"UniversalXPConnect"）;

}catch（e）{

returnfalse;

}

varclip

Components.classes['@mozilla.org/widget/clipboard;1'].createInstance（Components.interfaces.nsIClipboard）;

if（!

clip）

returnfalse;

vartrans

Components.classes['@mozilla.org/widget/transferable;1'].createInstance（Components.interfaces.nsITransferable）;

if（!

trans）

returnfalse;

trans.addDataFlavor（'text/unicode'）;

varstr=newObject（）;

varlen=newObject（）;

varstr

Components.classes["@mozilla.org/supports-string;1"].createInstance（Components.interfaces.nsISupportsString）;

varcopytext=txt;

str.data=copytext;

trans.setTransferData（"text/unicode",str,copytext.length*2）;

varclipid=Components.interfaces.nsIClipboard;

if（!

clip）

returnfalse;

clip.setData（trans,null,clipid.kGlobalClipboard）;

}

}

复制代码

帮定事件的相关代码就是dialog的核心代码（dialog.js）了，这个是在网上找到的，在此感谢，代码如下所示：

复制代码

__DIALOG_WRAPPER__={};

/*IE6有个Bug，如果不给定对话框的宽度的话，在IE6下，对话框将以100%宽度显示*/

DialogManager={

'create':

function（id）{

vard={};

if（!

__DIALOG_WRAPPER__[id]）

{

d=newDialog（id）;

__DIALOG_WRAPPER__[id]=d;

}

else

{

d=DialogManager.get（id）;

}

returnd;

},

'get':

function（id）{

return__DIALOG_WRAPPER__[id];

},

'close':

function（id）{

if（__DIALOG_WRAPPER__[id].close（））

{

__DIALOG_WRAPPER__[id]=null;

},

'onClose':

function（）{

returntrue;

},

/*加载对话框样式*/

'loadStyle':

function（）{

var_dialog_js_path=$（'#dialog_js'）.attr（'src'）;

var_path=_dialog_js_path.split（'/'）;

var_dialog_css=_path.slice（0,_path.length-1）.join（'/'）+'/dialog.css';

$（'#dialog_js'）.after（''）;

}

};ScreenLocker={

'style':

{

'position'

:

'absolu

'top'

:

'0px',

'left'

:

'0px',

'backgroundColor'

:

'#000',

'opacity'

:

0.5,

'zIndex'

:

999

},

'masker':

null,

'lock':

function（zIndex）{

if（this.masker!

==null）

{this.masker.width（$（document）.width（））.height（$（document）.height（））;

returntrue;

}

this.masker=$（'

/*IE6Hack*/

if（$.browser.msie）

{

$（'select'）.css（'visibility','hidden'）;

}

//var_iframe=$（''）.css（{'opacity':

0,'width':

'100%','height':

'100%'}）;//this.masker.append（_iframe）;

/*样式*/

this.masker.css（this.style）;

if（zIndex）

{this.masker.css（'zIndex',zIndex）;

}

/*整个文档的宽高*/

this.masker.width（$（document）.width（））.height（$（document）.height（））;

$（document.body）.append（this.masker）;

},

'unlock':

function（）{

if（this.masker===null）

{

returntrue;

}this.masker.remove（）;this.masker=null;

/*IE6Hack*/

if（$.browser.msie）

{

$（'select'）.css（'visibility','visible'）;

}

}

};

Dialog=function（id）{

/*构造函数生成对话框代码，并加入到文档中*/this.id=id;

this.init（）;

};

Dialog.prototype={

/*唯一标识*/

'id':

null,

/*文档对象*/

'dom':

null,

'lastPos':

null,

'status':

'complete',

'onClose':

function（）{

returntrue;

},

'tmp':

{},

/*初始化*/

'init':

function（）{

this.dom={'wrapper':

null,'body':

null,'head':

null,'title':

null,'close_button':

null,'content':

null};

=$（'

/*创建外层容器*/this.dom.wrapperclass="dialog_wrapper">