artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口。
如果你想在弹出的对话框里,加一个自己的按钮,来关闭自己,普通对话框可以使用以下方式:
//artdialog弹出对话框之后会返回一个dialog句柄
var
dialog
=
art.dialog(content,
ok,
cancel)
//你可以在对话框事件中通过该句柄的close方法,将对话框自己关闭。
function
closeSelf(){
dialog.close()
}
如果是弹出一个iframe对话框呢?获得的对话框句柄在是父窗体里的,需要在子窗体里使用该句柄把自己关掉。
artdialog提供了框架之间的数据传递方式,你要包含artDialog.iframeTools.js方法。
var
temp
=
{}
art.dialog.data(’temp’,
temp)
temp.dialog
=
art.dialog(’../childframe.html’)
这样你的数据就穿越了。在childframe.html的js里,你可以使用下面的方式获取自己的窗口句柄,然后关闭自己。
如何使用jqueryartDialog
var dialog = art.dialog(content, ok, cancel) //你可以在对话框事件中通过该句柄的close方法,将对话框自己关闭。 function closeSelf(){ dialog.close()} 如果是弹出一个iframe对话框呢
怎么在artdialog弹出框右上角添加最大最小化按钮
引入jQuery库,在引入jquery.artDialog.js。
// 普通调用
$.dialog({content:’hello world!’})
// 使用选择器方式,此时自动使用绑定了live click事件,同时启用follow模式
$(’#main .test’).dialog({content: ’hello world’})
为什么我的artdialog中的drag功能不能实现
通过分析关闭按钮的定义来实现其他按钮。关闭按钮是通过 html 模板定义的,定义同样在 artDialog.source.js 文件中,代码如下:
[javascript] view plain copy
artDialog._templates =
’<div >’
+ ’<table >’
+ ’<tbody>’
+ ’<tr>’
+ ’<td ></td>’
+ ’<td ></td>’
+ ’<td ></td>’
+ ’</tr>’
+ ’<tr>’
+ ’<td ></td>’
+ ’<td >’
+ ’<div >’
+ ’<table >’
+ ’<tbody>’
+ ’<tr>’
+ ’<td colspan=”2” >’
+ ’<div >’
+ ’<div ></div>’
+’<a onclick=”javascript:/*artDialog*/”>’//href paul mod
+ ’\xd7’
+ ’</a>’
+ ’</div>’
+ ’</td>’
+ ’</tr>’
+ ’<tr>’
+ ’<td >’
+ ’<div ></div>’
+ ’</td>’
+ ’<td >’
+ ’<div ></div>’
+ ’</td>’
+ ’</tr>’
+ ’<tr>’
+ ’<td colspan=”2” >’
+ ’<div ></div>’
+ ’</td>’
+ ’</tr>’
+ ’</tbody>’
+ ’</table>’
+ ’</div>’
+ ’</td>’
+ ’<td ></td>’
+ ’</tr>’
+ ’<tr>’
+ ’<td ></td>’
+ ’<td ></td>’
+ ’<td ></td>’
+ ’</tr>’
+ ’</tbody>’
+ ’</table>’
+’</div>’
这里,我们发现 aui_close 样式被定义为关闭按钮
于是,修改这里的代码,追加两个 div 变成下边的代码:
[javascript] view plain copy
artDialog._templates =
’<div >’
+ ’<table >’
+ ’<tbody>’
+ ’<tr>’
+ ’<td ></td>’
+ ’<td ></td>’
+ ’<td ></td>’
+ ’</tr>’
+ ’<tr>’
+ ’<td ></td>’
+ ’<td >’
+ ’<div >’
+ ’<table >’
+ ’<tbody>’
+ ’<tr>’
+ ’<td colspan=”2” >’
+ ’<div >’
+ ’<div ></div>’
+’<div state=”false”></div>’
+’<div state=”false”></div>’
+’<a onclick=”javascript:/*artDialog*/”>’//href paul mod
+ ’\xd7’
+ ’</a>’
+ ’</div>’
+ ’</td>’
+ ’</tr>’
+ ’<tr>’
+ ’<td >’
+ ’<div ></div>’
+ ’</td>’
+ ’<td >’
+ ’<div ></div>’
+ ’</td>’
+ ’</tr>’
+ ’<tr>’
+ ’<td colspan=”2” >’
+ ’<div ></div>’
+ ’</td>’
+ ’</tr>’
+ ’</tbody>’
+ ’</table>’
+ ’</div>’
+ ’</td>’
+ ’<td ></td>’
+ ’</tr>’
+ ’<tr>’
+ ’<td ></td>’
+ ’<td ></td>’
+ ’<td ></td>’
+ ’</tr>’
+ ’</tbody>’
+ ’</table>’
+’</div>’
在这里,我追加了两个 div ,样式分别定义为 aui_max 和 aui_min,具体样式请自行到相应的样式文件中修改,比如定义按钮图片之类的,这里就不细说了
在定义完成后,弹出新的窗口时,这两个按钮已经出现了,现在,我们需要对我们定义的按钮进行事件追加了
首先,我们在 close 方法附近追加一下代码,来作为最大化的方法实现
[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’) == ’false’) { // 判断是否已最大化
max.attr(’_width’, border.width()) // 记录当前窗口定义的宽度
max.attr(’_height’, border.height())// 记录当前窗口定义的高度
max.attr(’state’, ’true’) // 修改最大化按钮状态为真
this.position(0, 0) // 将窗口移动到左上角
this.size(’100%’, ’100%’) // 修改窗口大小
} else {
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’, ’false’) // 设置最大化状态为假
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 = setTimeout(function () {
that._reset(isIE)
}, 40)
}
_$window.bind(’resize’, that._winResize)
// 监听点击
DOM.wrap
.bind(’click’, function (event) {
var target = event.target, callbackID
if (target.disabled) return false// IE BUG
if (target === DOM.close[0]) {
that._click(config.cancelVal)
return false
} else {
callbackID = target[_expando + ’callback’]
callbackID &&that._click(callbackID)
}
that._ie6SelectFix()
})
.bind(’mousedown’, 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 = setTimeout(function () {
that._reset(isIE)
}, 40)
}
_$window.bind(’resize’, that._winResize)
// 监听点击
DOM.wrap
.bind(’click’, function (event) {
var target = event.target, callbackID
if (target.disabled) return false// IE BUG
if (target === DOM.close[0]) {
that._click(config.cancelVal)
return false
} else if (target === DOM.max[0]) {
that.max()
} else if (target === DOM.min[0]) {
that.min()
} else {
callbackID = target[_expando + ’callback’]
callbackID &&that._click(callbackID)
}
that._ie6SelectFix()
})
.bind(’mousedown’, 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
},false)
server端当tcp_tw_recycle和tcp_timestamps都是1的时候,会检查收到数据包TCP选项字段中的的timestamp(TS Value),当来自同一个IP地址(任意源端口号)后来的数据包中TCP选项字段如果有timestamp且比前面的数据包中的timestamp小,则server不做ACK响应!
以上就是关于artdialog 弹出对话框怎么关闭自己全部的内容,如果了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!