收藏
下载资源下载资源 加入VIP,免费下载

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

上传人：b****7 文档编号：8610837 上传时间：2023-02-01 格式：DOCX 页数：19 大小：21.57KB
下载 相关 举报
前端弹出对话框js实现ajax交互剖析.docx_第1页
第1页 / 共19页
前端弹出对话框js实现ajax交互剖析.docx_第2页
第2页 / 共19页
前端弹出对话框js实现ajax交互剖析.docx_第3页
第3页 / 共19页
前端弹出对话框js实现ajax交互剖析.docx_第4页
第4页 / 共19页
前端弹出对话框js实现ajax交互剖析.docx_第5页
第5页 / 共19页
点击查看更多>>
下载资源
资源描述

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

《前端弹出对话框js实现ajax交互剖析.docx》由会员分享，可在线阅读，更多相关《前端弹出对话框js实现ajax交互剖析.docx（19页珍藏版）》请在冰豆网上搜索。

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

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

前端弹出对话框js实现ajax交互

原本计划实现这样一个需求：

前台点击触发某业务动作，需要用户补充信息，不做跳转页面，弹窗的形式进行补充信息。

折腾出来了，但是最终没有用到。

代码还有些毛躁，提供大概实现逻辑。

实现思路：

在窗口铺上蒙板以屏蔽原窗口功能按钮操作，在蒙板上层绝对定位实现弹窗，弹窗中的数据交互采用ajax方式。

出发弹窗事件用onclick.

关键细节：

弹窗和原窗体本质是同页面，为了描述方便，姑且称底层窗体为父窗体，弹窗为子窗体。

为了实现字父窗体的交互，需要在父窗体中做一些特别标签，以便选择器选择，并操作插入新的dom对象。

如此，首先看下父窗体的代码，关键部分我是有注释的。

复制代码

//www.w3.org/1999/xhtml">

测试弹窗

*{

margin:

0;

padding:

0;

text-align:

center;

text-decoration:

none;

body{

font:

12px/1.5宋体,Tahoma,Arial,sans-serif;

font-family:

"微软雅黑";width:

320px;

height:

auto;margin:

0auto;

}

.content{

border:

#cccsolid1px;margin:

60px10px10px;background:

#fff;overflow:

hidden;

color:

#6b6b6b;

font-size:

14px;border-radius:

5px;

}

--选择器是通过ectype="dialog"来进行选择的-->

void（0）;"ectype="dialog"dialog_id="dialog_test"dialog_title="对话测试"dialog_width="300"uri="pop_son.html">

对话测试

复制代码

接着给出选择器部分代码，也就是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">

'）.get（0）;

=$（''）.get（0）;

=$（''）.get（0）;

=$（''）.get（0）;

/*创建对话框主体*/this.dom.body/*创建标题栏*/this.dom.head/*创建标题文本*/

this.dom.title/*创建关闭按钮*/

$（'

//this.dom.close_buttonclass="dialog_close_button">close'）.get（0）;

/*创建内容区域*/

this.dom.content=$（''）.get（0）;

/*组合*/

$（this.dom.head）.append（''）.append（$（''）.append（this.dom.title））.append（this.dom.close_button）;

$（this.dom.body）.append（this.dom.head）.append（this.dom.content）;

$（this.dom.wrapper）.append（this.dom.body）.append（'

both;display:

block;">'）;

/*初始化样式*/

$（this.dom.wrapper）.css（{

'zIndex':

9999,

'display':

'none',

'position':

'absolute'

}）;

$（this.dom.body）.css（{

'position':

'relative'

}）;

$（this.dom.head）.css（{

'cursor':

'move'

}）;

$（this.dom.close_button）.css（{

'position':

'absolute',

'text-indent':

'-9999px',

'cursor':

'pointer',

'overflow':

'hidden'

}）;

$（this.dom.content）.css（{

'margin':

'0px',

'padding':

'0px'

}）;

varself=this;

/*初始化组件事件*/$（this.dom.close_button）.click（function（）{DialogManager.close（self.id）;

}）;

/*可拖放*/$（this.dom.wrapper）.draggable（{

'handle':

this.dom.head

}）;

/*放入文档流*/$（document.body）.append（this.dom.wrapper）;

},

/*隐藏*/

'hide':

function（）{$（this.dom.wrapper）.hide（）;

},

/*显示*/

'show':

function（pos）{

if（pos）

{

this.setPosition（pos）;

}

/*锁定屏幕*/

ScreenLocker.lock（999）;

/*显示对话框*/

$（this.dom.wrapper）.show（）;

},

/*关闭*/

'close':

function（）{

if（!

this.onClose（））

{

returnfalse;

}

/*关闭对话框*/

$（this.dom.wrapper）.remove（）;

/*解锁屏幕*/

ScreenLocker.unlock（）;

returntrue;

},

/*对话框标题*/

'setTitle':

function（title）{

$（this.dom.title）.html（title）;

},

/*改变对话框内容*/

'setContents':

function（type,options）{

contents=this.createContents（type,options）;

if（typeof（contents）=='string'）

{

$（this.dom.content）.html（contents）;

}

else

{

$（this.dom.content）.empty（）;

$（this.dom.content）.append（contents）;

}

},

/*设置对话框样式*/

'setStyle':

function（style）{

if（typeof（style）=='object'）

{

/*否则为CSS*/

$（this.dom.wrapper）.css（style）;

}

else

/*如果是字符串，则认为是样式名*/$（this.dom.wrapper）.addClass（style）;

}

},

'setWidth':

function（width）{

this.setStyle（{'width':

width+'px'}）;

},

'setHeight':

function（

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置：首页 > 经管营销 > 金融投资

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1