前端弹出对话框js实现ajax交互剖析Word下载.docx
- 文档编号:21747051
- 上传时间:2023-02-01
- 格式:DOCX
- 页数:19
- 大小:21.57KB
前端弹出对话框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(
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 弹出 对话框 js 实现 ajax 交互 剖析
![提示](https://static.bdocx.com/images/bang_tan.gif)