artdialog 彈出對(duì)話框怎么關(guān)閉自己
artDialog是一個(gè)基于javascript編寫的對(duì)話框組件，它擁有精致的界面與友好的接口。
如果你想在彈出的對(duì)話框里，加一個(gè)自己的按鈕，來(lái)關(guān)閉自己，普通對(duì)話框可以使用以下方式：
//artdialog彈出對(duì)話框之后會(huì)返回一個(gè)dialog句柄
var
dialog
=
art.dialog(content,
ok,
cancel)
//你可以在對(duì)話框事件中通過(guò)該句柄的clo方法，將對(duì)話框自己關(guān)閉。
function
cloSelf(){
dialog.clo();
}
如果是彈出一個(gè)iframe對(duì)話框呢？獲得的對(duì)話框句柄在是父窗體里的，需要在子窗體里使用該句柄把自己關(guān)掉。
artdialog提供了框架之間的數(shù)據(jù)傳遞方式，你要包含artDialog.iframeTools.js方法。
var
temp
=
{};
art.dialog.data('temp',
temp);
temp.dialog
=
art.dialog('../childframe.html');
這樣你的數(shù)據(jù)就穿越了。在childframe.html的js里，你可以使用下面的方式獲取自己的窗口句柄,然后關(guān)閉自己。
求助artdialog art.dialog.open方法無(wú)法打開(kāi)頁(yè)面的問(wèn)題
求助artdialog art.dialog.open方法無(wú)法打開(kāi)頁(yè)面的問(wèn)題
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語(yǔ)句時(shí)還應(yīng)注意以下幾點(diǎn)：
1) 在ca后的各常量表達(dá)式的值不能相同，否則會(huì)出現(xiàn)錯(cuò)誤。
2) 在ca后，允許有多個(gè)語(yǔ)句，可以不用{}括起來(lái)。
3) 各ca和default子句的先后順序可以變動(dòng)，而不會(huì)影響程序執(zhí)行結(jié)果。
4) default子句可以省略不用。
怎么在artdialog彈出框右上角添加最大最小化按鈕
通過(guò)分析關(guān)閉按鈕的定義來(lái)實(shí)現(xiàn)其他按鈕。關(guān)閉按鈕是通過(guò) 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>';
這里，我們發(fā)現(xiàn) aui_clo 樣式被定義為關(guān)閉按鈕
于是，修改這里的代碼，追加兩個(gè) 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>';
在這里，我追加了兩個(gè) div ，樣式分別定義為 aui_max 和 aui_min，具體樣式請(qǐng)自行到相應(yīng)的樣式文件中修改，比如定義按鈕圖片之類的，這里就不細(xì)說(shuō)了
在定義完成后，彈出新的窗口時(shí)，這兩個(gè)按鈕已經(jīng)出現(xiàn)了，現(xiàn)在，我們需要對(duì)我們定義的按鈕進(jìn)行事件追加了
首先，我們?cè)?clo 方法附近追加一下代碼，來(lái)作為最大化的方法實(shí)現(xiàn)
[javascript] view plain copy
max: function () {
var that = this,
DOM = that.DOM;
var border = jQuery(DOM.content[0]); // 獲取 artDialog 窗口的 iframe 對(duì)象
var max = jQuery(DOM.max[0]); // 獲取最大化按鈕對(duì)象
if (max.attr('state') == 'fal') { // 判斷是否已最大化
max.attr('_width', border.width()); // 記錄當(dāng)前窗口定義的寬度
max.attr('_height', border.height()); // 記錄當(dāng)前窗口定義的高度
max.attr('state', 'true'); // 修改最大化按鈕狀態(tài)為真
this.position(0, 0); // 將窗口移動(dòng)到左上角
this.size('100%', '100%'); // 修改窗口大小
} el {
jQuery(DOM.border[0]).parent().parent().css('width', (max.attr('_width') * 1 + 30) + 'px'); // 修改窗口最外層 div 定義的寬度，這個(gè) div 是窗口外層的樣式窗口，比我們定義的窗口寬上 30 像素，根據(jù)使用的皮膚不同有所區(qū)別
this.size(max.attr('_width') + 'px', max.attr('_height') + 'px'); // 將窗口大小按照已記錄的寬和高進(jìn)行設(shè)置
this.position('50%', '50%'); // 將窗口居中
max.attr('state', 'fal'); // 設(shè)置最大化狀態(tài)為假
max.removeAttr('_width'); // 刪除已記錄的寬
max.removeAttr('_height'); // 刪除已記錄的高
}
return that;
}
注意實(shí)際添加代碼的時(shí)候，要在最后加個(gè)逗號(hào)哦，畢竟是寫在 artDialog.fn 的定義對(duì)象里的內(nèi)容
這里我實(shí)現(xiàn)的思路是這樣的，首先在最大化、最小化按鈕中設(shè)置一個(gè)屬性 state，表示窗口是否已經(jīng)最大化或最小化
然后在點(diǎn)擊按鈕的時(shí)候判斷一下，如果沒(méi)有則最大化，否則則還原
在事件實(shí)現(xiàn)方法定義完成后，我發(fā)現(xiàn)點(diǎn)擊按鈕并沒(méi)有發(fā)生什么，所以，我們還需要將事件和方法進(jìn)行關(guān)聯(lián)起來(lái)，于是再次查閱代碼，發(fā)現(xiàn)以下定義：
[javascript] view plain copy
// 同樣在 artDialog.fn 定義中
// 事件代理
_addEvent: function () {
var resizeTimer,
that = this,
config = that.config,
isIE = 'CollectGarbage' in window,
DOM = that.DOM;
// 窗口調(diào)節(jié)事件
that._winResize = function () {
resizeTimer && clearTimeout(resizeTimer);
resizeTimer = tTimeout(function () {
that._ret(isIE);
}, 40);
};
_$window.bind('resize', that._winResize);
// 監(jiān)聽(tīng)點(diǎn)擊
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();
});
},
于是追加代碼變成以下內(nèi)容
[javascript] view plain copy
// 事件代理
_addEvent: function () {
var resizeTimer,
that = this,
config = that.config,
isIE = 'CollectGarbage' in window,
DOM = that.DOM;
// 窗口調(diào)節(jié)事件
that._winResize = function () {
resizeTimer && clearTimeout(resizeTimer);
resizeTimer = tTimeout(function () {
that._ret(isIE);
}, 40);
};
_$window.bind('resize', that._winResize);
// 監(jiān)聽(tīng)點(diǎn)擊
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();
});
},
于是發(fā)現(xiàn)事件被關(guān)聯(lián)成功了，最后，由于不是所有窗口都需要最大化和最小化，所以在 artDialog.fn 定義中，修改 _init 定義的方法，追加以下內(nèi)容
[javascript] view plain copy
config.min ? DOM.min.show() : DOM.min.hide();
config.max ? DOM.max.show() : DOM.max.hide();
修改 artDialog.defaults 定義的對(duì)象追加以下內(nèi)容
[javascript] view plain copy
min: null,
max: null,
這樣，窗口在打開(kāi)時(shí)默認(rèn)是沒(méi)有最大化和最小化的，在我們需要彈出的定義中設(shè)置一下 max 、min 屬性就可以顯示并實(shí)現(xiàn)最大化、最小化了
[javascript] view plain copy
art.dialog.open(url,{
max : true,
min : true
},fal);
V6 artDialog取消了打開(kāi)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需要引進(jìn)哪幾個(gè)js
首先你要獲得這個(gè)組件，百度經(jīng)驗(yàn)不讓發(fā)鏈接，所以大家百度下獲取
2
目錄如下
END
二。導(dǎo)入項(xiàng)目
1
這里有兩個(gè)導(dǎo)入方法，一種是不依賴任何組件和庫(kù)
2
1.不依賴導(dǎo)入
<script type ="text/javascript" src="./Extend/artdialog/artDialog.js?skin=default"></script>
其中./Extend/artdialog/為存放目錄
?skin=default，skin=皮膚，這里的皮膚指的是在skins目錄下對(duì)應(yīng)的.css文件
3
2.依賴jquery庫(kù)
那么就應(yīng)該先導(dǎo)入jquery庫(kù)，后面導(dǎo)入<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對(duì)話框組件！',
icon: 'succeed',
follow: document.getElementById('btn2'),
ok: function(){
return fal;
},okVal: '確定',
cancelVal: '關(guān)閉',
cancel: function(){
console.log(123);
},fixed:true,
resize:true
然后用一個(gè)函數(shù)封裝這段代碼，綁定觸發(fā)事件即可.
詳細(xì)介紹百度官網(wǎng)，百度不讓發(fā)鏈接呀
