artdialog 弹出对话框怎么关闭自己
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口。
如果你想在弹出的对话框里,加一个自己的按钮,来关闭自己,普通对话框可以使用以下方式:
//artdialog弹出对话框之后会返回一个dialog句柄
var
dialog
=
art.dialog(content,
ok,
cancel)
//你可以在对话框事件中通过该句柄的clo方法,将对话框自己关闭。
function
cloSelf(){
dialog.clo();
}
如果是弹出一个iframe对话框呢?获得的对话框句柄在是父窗体里的,需要在子窗体里使用该句柄把自己关掉。
artdialog提供了框架之间的数据传递方式,你要包含artDialog.iframeTools.js方法。
var
temp
=
{};
art.dialog.data('temp',
temp);
temp.dialog
=
art.dialog('../childframe.html');
这样你的数据就穿越了。在childframe.html的js里,你可以使用下面的方式获取自己的窗口句柄,然后关闭自己。
求助artdialog art.dialog.open方法无法打开页面的问题
求助artdialog art.dialog.open方法无法打开页面的问题
main(){
int a;
printf("input integer number: ");
scanf("%d",&a);
switch (a){
ca 1:printf("Monday\n");break;
ca 2:printf("Tuesday\n"); break;
ca 3:printf("Wednesday\n");break;
ca 4:printf("Thursday\n");break;
ca 5:printf("Friday\n");break;
ca 6:printf("Saturday\n");break;
ca 7:printf("Sunday\n");break;
default:printf("error\n");
}
}
在使用switch语句时还应注意以下几点:
1) 在ca后的各常量表达式的值不能相同,否则会出现错误。
2) 在ca后,允许有多个语句,可以不用{}括起来。
3) 各ca和default子句的先后顺序可以变动,而不会影响程序执行结果。
4) default子句可以省略不用。
怎么在artdialog弹出框右上角添加最大最小化按钮
通过分析关闭按钮的定义来实现其他按钮。关闭按钮是通过 html 模板定义的,定义同样在 artDialog.source.js 文件中,代码如下:
[javascript] view plain copy
artDialog._templates =
'<div class="aui_outer">'
+ '<table class="aui_border">'
+ '<tbody>'
+ '<tr>'
+ '<td class="aui_nw"></td>'
+ '<td class="aui_n"></td>'
+ '<td class="aui_ne"></td>'
+ '</tr>'
+ '<tr>'
+ '<td class="aui_w"></td>'
+ '<td class="aui_c">'
+ '<div class="aui_inner">'
+ '<table class="aui_dialog">'
+ '<tbody>'
+ '<tr>'
+ '<td colspan="2" class="aui_header">'
+ '<div class="aui_titleBar">'
+ '<div class="aui_title"></div>'
+ '<a class="aui_clo" onclick="javascript:/*artDialog*/;">'//href paul mod
+ '\xd7'
+ '</a>'
+ '</div>'
+ '</td>'
+ '</tr>'
+ '<tr>'
+ '<td class="aui_icon">'
+ '<div class="aui_iconBg"></div>'
+ '</td>'
+ '<td class="aui_main">'
+ '<div class="aui_content"></div>'
+ '</td>'
+ '</tr>'
+ '<tr>'
+ '<td colspan="2" class="aui_footer">'
+ '<div class="aui_buttons"></div>'
+ '</td>'
+ '</tr>'
+ '</tbody>'
+ '</table>'
+ '</div>'
+ '</td>'
+ '<td class="aui_e"></td>'
+ '</tr>'
+ '<tr>'
+ '<td class="aui_sw"></td>'
+ '<td class="aui_s"></td>'
+ '<td class="aui_"></td>'
+ '</tr>'
+ '</tbody>'
+ '</table>'
+'</div>';
这里,我们发现 aui_clo 样式被定义为关闭按钮
于是,修改这里的代码,追加两个 div 变成下边的代码:
[javascript] view plain copy
artDialog._templates =
'<div class="aui_outer">'
+ '<table class="aui_border">'
+ '<tbody>'
+ '<tr>'
+ '<td class="aui_nw"></td>'
+ '<td class="aui_n"></td>'
+ '<td class="aui_ne"></td>'
+ '</tr>'
+ '<tr>'
+ '<td class="aui_w"></td>'
+ '<td class="aui_c">'
+ '<div class="aui_inner">'
+ '<table class="aui_dialog">'
+ '<tbody>'
+ '<tr>'
+ '<td colspan="2" class="aui_header">'
+ '<div class="aui_titleBar">'
+ '<div class="aui_title"></div>'
+ '<div class="aui_min" state="fal"></div>'
+ '<div class="aui_max" state="fal"></div>'
+ '<a class="aui_clo" onclick="javascript:/*artDialog*/;">'//href paul mod
+ '\xd7'
+ '</a>'
+ '</div>'
+ '</td>'
+ '</tr>'
+ '<tr>'
+ '<td class="aui_icon">'
+ '<div class="aui_iconBg"></div>'
+ '</td>'
+ '<td class="aui_main">'
+ '<div class="aui_content"></div>'
+ '</td>'
+ '</tr>'
+ '<tr>'
+ '<td colspan="2" class="aui_footer">'
+ '<div class="aui_buttons"></div>'
+ '</td>'
+ '</tr>'
+ '</tbody>'
+ '</table>'
+ '</div>'
+ '</td>'
+ '<td class="aui_e"></td>'
+ '</tr>'
+ '<tr>'
+ '<td class="aui_sw"></td>'
+ '<td class="aui_s"></td>'
+ '<td class="aui_"></td>'
+ '</tr>'
+ '</tbody>'
+ '</table>'
+'</div>';
在这里,我追加了两个 div ,样式分别定义为 aui_max 和 aui_min,具体样式请自行到相应的样式文件中修改,比如定义按钮图片之类的,这里就不细说了
在定义完成后,弹出新的窗口时,这两个按钮已经出现了,现在,我们需要对我们定义的按钮进行事件追加了
首先,我们在 clo 方法附近追加一下代码,来作为最大化的方法实现
[javascript] view plain copy
max: function () {
var that = this,
DOM = that.DOM;
var border = jQuery(DOM.content[0]); // 获取 artDialog 窗口的 iframe 对象
var max = jQuery(DOM.max[0]); // 获取最大化按钮对象
if (max.attr('state') == 'fal') { // 判断是否已最大化
max.attr('_width', border.width()); // 记录当前窗口定义的宽度
max.attr('_height', border.height()); // 记录当前窗口定义的高度
max.attr('state', 'true'); // 修改最大化按钮状态为真
this.position(0, 0); // 将窗口移动到左上角
this.size('100%', '100%'); // 修改窗口大小
} el {
jQuery(DOM.border[0]).parent().parent().css('width', (max.attr('_width') * 1 + 30) + 'px'); // 修改窗口最外层 div 定义的宽度,这个 div 是窗口外层的样式窗口,比我们定义的窗口宽上 30 像素,根据使用的皮肤不同有所区别
this.size(max.attr('_width') + 'px', max.attr('_height') + 'px'); // 将窗口大小按照已记录的宽和高进行设置
this.position('50%', '50%'); // 将窗口居中
max.attr('state', 'fal'); // 设置最大化状态为假
max.removeAttr('_width'); // 删除已记录的宽
max.removeAttr('_height'); // 删除已记录的高
}
return that;
}
注意实际添加代码的时候,要在最后加个逗号哦,毕竟是写在 artDialog.fn 的定义对象里的内容
这里我实现的思路是这样的,首先在最大化、最小化按钮中设置一个属性 state,表示窗口是否已经最大化或最小化
然后在点击按钮的时候判断一下,如果没有则最大化,否则则还原
在事件实现方法定义完成后,我发现点击按钮并没有发生什么,所以,我们还需要将事件和方法进行关联起来,于是再次查阅代码,发现以下定义:
[javascript] view plain copy
// 同样在 artDialog.fn 定义中
// 事件代理
_addEvent: function () {
var resizeTimer,
that = this,
config = that.config,
isIE = 'CollectGarbage' in window,
DOM = that.DOM;
// 窗口调节事件
that._winResize = function () {
resizeTimer && clearTimeout(resizeTimer);
resizeTimer = tTimeout(function () {
that._ret(isIE);
}, 40);
};
_$window.bind('resize', that._winResize);
// 监听点击
DOM.wrap
.bind('click', function (event) {
var target = event.target, callbackID;
if (target.disabled) return fal; // IE BUG
if (target === DOM.clo[0]) {
that._click(config.cancelVal);
return fal;
} el {
callbackID = target[_expando + 'callback'];
callbackID && that._click(callbackID);
};
that._ie6SelectFix();
})
.bind('moudown', function () {
that.zIndex();
});
},
于是追加代码变成以下内容
[javascript] view plain copy
// 事件代理
_addEvent: function () {
var resizeTimer,
that = this,
config = that.config,
isIE = 'CollectGarbage' in window,
DOM = that.DOM;
// 窗口调节事件
that._winResize = function () {
resizeTimer && clearTimeout(resizeTimer);
resizeTimer = tTimeout(function () {
that._ret(isIE);
}, 40);
};
_$window.bind('resize', that._winResize);
// 监听点击
DOM.wrap
.bind('click', function (event) {
var target = event.target, callbackID;
if (target.disabled) return fal; // IE BUG
if (target === DOM.clo[0]) {
that._click(config.cancelVal);
return fal;
} el if (target === DOM.max[0]) {
that.max();
} el if (target === DOM.min[0]) {
that.min();
} el {
callbackID = target[_expando + 'callback'];
callbackID && that._click(callbackID);
};
that._ie6SelectFix();
})
.bind('moudown', function () {
that.zIndex();
});
},
于是发现事件被关联成功了,最后,由于不是所有窗口都需要最大化和最小化,所以在 artDialog.fn 定义中,修改 _init 定义的方法,追加以下内容
[javascript] view plain copy
config.min ? DOM.min.show() : DOM.min.hide();
config.max ? DOM.max.show() : DOM.max.hide();
修改 artDialog.defaults 定义的对象追加以下内容
[javascript] view plain copy
min: null,
max: null,
这样,窗口在打开时默认是没有最大化和最小化的,在我们需要弹出的定义中设置一下 max 、min 属性就可以显示并实现最大化、最小化了
[javascript] view plain copy
art.dialog.open(url,{
max : true,
min : true
},fal);
V6 artDialog取消了打开iframe 使用全屏的功能吗
这样写可以全屏显示,新版就不确定了。
var d = Dialog({
title: '添加',
url:'/a.html',
width: '100%',
height: '100%',
//left: 0,
//top: 0,
//fixed: true,
//resize: fal,
//drag: fal,
padding: 0
});
d.show();
art.dialog需要引进哪几个js
首先你要获得这个组件,百度经验不让发链接,所以大家百度下获取
2
目录如下
END
二。导入项目
1
这里有两个导入方法,一种是不依赖任何组件和库
2
1.不依赖导入
<script type ="text/javascript" src="./Extend/artdialog/artDialog.js?skin=default"></script>
其中./Extend/artdialog/为存放目录
?skin=default,skin=皮肤,这里的皮肤指的是在skins目录下对应的.css文件
3
2.依赖jquery库
那么就应该先导入jquery库,后面导入<script type="text/javascript" src="./Extend/artdialog/jquery.artDialog.js?skin=default"></script>
注意是jquery.artDialog.js,不是artDialog.js,其他和上面提到一样。
END
三。使用
演示代码:
var dialog = art.dialog({
title: '欢迎',
content: '欢迎使用artDialog对话框组件!',
icon: 'succeed',
follow: document.getElementById('btn2'),
ok: function(){
return fal;
},okVal: '确定',
cancelVal: '关闭',
cancel: function(){
console.log(123);
},fixed:true,
resize:true
然后用一个函数封装这段代码,绑定触发事件即可.
详细介绍百度官网,百度不让发链接呀