本文目录
- artDialog.js 弹出框dialog怎么显示在页面的最外层
- artdialog 和art.dialog的区别
- art.dialog需要引进哪几个js
- jquery artdialog怎么用
- art.dialog.open怎么设置窗口位置
- 如何在jquery.artDialog中呈现另一个页面
- artdialog 弹出对话框怎么关闭自己
- 怎么获得当前页面的Dialog
- 怎么在artdialog弹出框右上角添加最大最小化按钮
artDialog.js 弹出框dialog怎么显示在页面的最外层
title: “Title“ 想改变title时 改变#span_Title的html() 就行了！ 例 (点击一个按钮) $(“#btn_ChangeTitleContent“).click(function() { $(“#span_Title“).html(“Title Change“); });
artdialog 和art.dialog的区别
在artDialog的首页说明中写道： 它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。 鉴于jquery的流行，作者又提供了jquery版本的artDialog供那些jquery粉丝使用 artDialog提供了一个jQuery版本，功能与标准版一
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 false;
},okVal: ’确定’,
cancelVal: ’关闭’,
cancel: function(){
console.log(123);
},fixed:true,
resize:true
然后用一个函数封装这段代码，绑定触发事件即可.
详细介绍百度官网，百度不让发链接呀
-log
jquery artdialog怎么用
使用artDialog，首先的去网站上下载它的相关代码文件，下载下来的文件目录如下：
_doc里面是帮助文档，也就是使用它的api，plugins里面是为了更好的支持iframe框架，提供的js，skins里面是提供的artDialog的各种皮肤文件，你可以再使用的时候随心所欲的使用各种皮肤，其他文件比较重要的是artDialog.js，这个是最主要的文件，jQuery.artDialog.js文件能让你在使用jQuery框架的时候能更好的使用artDialog。-js
调用的时候引入相关的js文件就可以了。
（1）这是引用artDialog的主要文件,skin就是你需要使用的皮肤
《script src=“artDialog.js?skin=default“》《/script》
（2）如果你是使用的Jquery框架，则引入jQuery版本的
《scriptsrc=“jquery.artDialog.js?skin=default“》《/script》
（3）如果你使用了iframe，那么你需要在引入iframeTools.js
《scriptsrc=“artDialog.iframeTools.js“》《/script》
art.dialog.open怎么设置窗口位置
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里，你可以使用下面的方式获取自己的窗口句柄,然后关闭自己。
-log
如何在jquery.artDialog中呈现另一个页面
dialog({
title: ’iframe弹窗’,
url: ’file/listing02.html’
});
artdialog 弹出对话框怎么关闭自己
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里，你可以使用下面的方式获取自己的窗口句柄,然后关闭自己。
-js
怎么获得当前页面的Dialog
？任何人都承认实验是科学之母，这是断定不移的真谛，谁也不会否定。题目描述时候比如东流水，只有流去无流回。如何把 artDialog 生成的html代码放到一个固定的DIV里面解答在artDialog中可以经由过程三种办法实现。获取内容办法一: 直接引用返回var dialog = art.dialog（{ title: ““题目““， content: ““我是对话框的内容““ }）; dialog.content（““对话框内容被改变了““）.title（““提示““）;?获取内容办法二: 经由过程对话框IDart.dialog（{ id: ““KDf435““， title: ““警告““， content: ““我是初始化的内容““ }）; art.dialog.list[““KDf435““].content（““对话框内容被扩大办法改变了““）;?art.dialog.list 办法返回一个数组，包含页面内所有的artdialog对话框列表。 可以用list办法查找到你想要操纵的对话框，调用content办法，取得或者改变对话框的内容。获取内容办法三: 回调函数中thisart.dialog（{ title: ““警告““， content: ““我是初始化的内容““， ok: function （） { this.content（““你点了断定按钮““）.lock（）; return false; }， init: function （） { this.content（““对话框内容被改变了““）; } }）;?在回调函数中，this变量引用的就是当前的对话框。
-log
怎么在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_close“ 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_se“》《/td》’
+ ’《/tr》’
+ ’《/tbody》’
+ ’《/table》’
+’《/div》’;
这里，我们发现 aui_close 样式被定义为关闭按钮
于是，修改这里的代码，追加两个 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=“false“》《/div》’
+ ’《div class=“aui_max“ state=“false“》《/div》’
+ ’《a class=“aui_close“ 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_se“》《/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); // 获取 artDialog 窗口的 iframe 对象
var max = jQuery(DOM.max); // 获取最大化按钮对象
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).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) {
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) {
that._click(config.cancelVal);
return false;
} else if (target === DOM.max) {
that.max();
} else if (target === DOM.min) {
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);
-js
