前端弹出对话框js实现ajax交互剖析Word下载.docx
《前端弹出对话框js实现ajax交互剖析Word下载.docx》由会员分享，可在线阅读，更多相关《前端弹出对话框js实现ajax交互剖析Word下载.docx（19页珍藏版）》请在冰豆网上搜索。
script/jquery/themes/ui-lightness/jquery.ui.css"
script/dialog/dialog.js"
id="
dialog_js"
linkhref="
script/dialog/dialog.css"
rel="
styletype="
*{
margin:
0;
padding:
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;
60px10px10px;
background:
#fff;
overflow:
hidden;
color:
#6b6b6b;
font-size:
14px;
border-radius:
5px;
/style>
/head>
body>
!
--选择器是通过ectype="
dialog"
来进行选择的-->
divclass="
content"
ahref="
javascript:
void（0）;
"
ectype="
dialog_id="
dialog_test"
dialog_title="
对话测试"
dialog_width="
300"
uri="
pop_son.html"
>
对话测试
/a>
/div>
/body>
/html>
接着给出选择器部分代码，也就是outil.js的代码，当然之前的jquery以及jqueryui就不说了。
其核心是绑定click事件。
jQuery.extend（{
getCookie:
function（sName）{
varaCookie=document.cookie.split（"
）;
for（vari=0;
i<
aCookie.length;
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:
document.cookie=sName+"
=;
expires=Fri,31Dec199923:
59:
59GMT;
}
}）;
$（function（）{
/*dialog选择并绑定一个新的click事件*/
$（'
*[ectype="
]'
）.click（function（）{
varid=$（this）.attr（'
dialog_id'
vartitle=$（this）.attr（'
dialog_title'
）?
$（this）.attr（'
）:
'
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）{
functionset_zindex（parents,index）{
$.each（parents,function（i,n）{
if（$（n）.css（'
position'
）=='
relative'
）{//alert（'
//alert（$（n）.css（'
z-index'
））;
$（n）.css（'
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（'
labelclass="
error"
+str+'
/label>
$（'
）.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）{
varclip
Components.classes['
@mozilla.org/widget/clipboard;
1'
].createInstance（Components.interfaces.nsIClipboard）;
clip）
vartrans
@mozilla.org/widget/transferable;
].createInstance（Components.interfaces.nsITransferable）;
trans）
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;
clip.setData（trans,null,clipid.kGlobalClipboard）;
帮定事件的相关代码就是dialog的核心代码（dialog.js）了，这个是在网上找到的，在此感谢，代码如下所示：
__DIALOG_WRAPPER__={};
/*IE6有个Bug，如果不给定对话框的宽度的话，在IE6下，对话框将以100%宽度显示*/
DialogManager={
create'
:
function（id）{
vard={};
__DIALOG_WRAPPER__[id]）
d=newDialog（id）;
__DIALOG_WRAPPER__[id]=d;
else
d=DialogManager.get（id）;
get'
return__DIALOG_WRAPPER__[id];
close'
if（__DIALOG_WRAPPER__[id].close（））
__DIALOG_WRAPPER__[id]=null;
onClose'
function（）{
/*加载对话框样式*/
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'
）.after（'
+_dialog_css+'
/>
};
ScreenLocker={
style'
{
:
absolu
top'
0px'
left'
backgroundColor'
#000'
opacity'
0.5,
zIndex'
999
masker'
null,
lock'
function（zIndex）{
if（this.masker!
==null）
{this.masker.width（$（document）.width（））.height（$（document）.height（））;
this.masker=$（'
div>
/*IE6Hack*/
if（$.browser.msie）
select'
）.css（'
visibility'
'
hidden'
//var_iframe=$（'
iframe>
/iframe>
）.css（{'
0,'
width'
100%'
height'
//this.masker.append（_iframe）;
/*样式*/
this.masker.css（this.style）;
if（zIndex）
{this.masker.css（'
zIndex）;
/*整个文档的宽高*/
this.masker.width（$（document）.width（））.height（$（document）.height（））;
$（document.body）.append（this.masker）;
unlock'
function（）{
if（this.masker===null）
}this.masker.remove（）;
this.masker=null;
visible'
Dialog=function（id）{
/*构造函数生成对话框代码，并加入到文档中*/this.id=id;
this.init（）;
Dialog.prototype={
/*唯一标识*/
id'
/*文档对象*/
dom'
lastPos'
status'
complete'
function（）{
tmp'
{},
/*初始化*/
init'
this.dom={'
wrapper'
null,'
body'
null,'
head'
title'
close_button'
content'
null};
=$（'
divid="
dialog_object_'
+this.id+
/*创建外层容器*/this.dom.wrapperclass="
dialog_wrapper"
）.get（0）;
dialog_body"
h3class="
dialog_head"
/h3>
spanclass="
dialog_title_icon"
/span>
/*创建对话框主体*/this.dom.body/*创建标题栏*/this.dom.head/*创建标题文本*/
this.dom.title/*创建关闭按钮*/
span
//this.dom.close_buttonclass="
dialog_close_button"
close<
/*创建内容区域*/
this.dom.content=$（'
dialog_content"
/*组合*/
$（this.dom.head）.append（'
dialog_ornament1"
dialog_ornament2"
）.append（$（'
dialog_title"
）.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（'
divstyle="
clear:
both;
display:
block;
/*初始化样式*/
$（this.dom.wrapper）.css（{
9999,
display'
none'
absolute'
$（this.dom.body）.css（{
$（this.dom.head）.css（{
cursor'
move'
$（this.dom.close_button）.css（{
text-indent'
-9999px'
pointer'
overflow'
$（this.dom.content）.css（{
margin'
padding'
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（）;
/*关闭*/
this.onClose（））
/*关闭对话框*/
$（this.dom.wrapper）.remove（）;
/*解锁屏幕*/
ScreenLocker.unlock（）;
/*对话框标题*/
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）;
$（this.dom.content）.empty（）;
$（this.dom.content）.append（contents）;
/*设置对话框样式*/
setStyle'
function（style）{
if（typeof（style）=='
object'
/*否则为CSS*/
$（this.dom.wrapper）.css（style）;
/*如果是字符串，则认为是样式名*/$（this.dom.wrapper）.addClass（style）;
setWidth'
function（width）{
this.setStyle（{'
width+'
px'
setHeight'
function（
升级会员 