|
像dojo一樣，artdialog也是在網(wǎng)上無(wú)意間搜出來(lái)的，可惜后來(lái)發(fā)現(xiàn)它和dojo沖突（最后都是用的dojo的dialog），沒(méi)辦法只有忍痛割愛(ài)了。今天花了些時(shí)間把http://code.google.com/p/artdialog/downloads/list上的demo整理了一下，把demo.js里的代碼都抽出來(lái)加到j(luò)sp代碼中了，這樣更直觀。代碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>art</title>
<link id="artDialogSkin" href="skins/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="artDialog.js"></script>
<script type="text/javascript" src="artDialog.iframeTools.js"></script> <!-- 對(duì)iframe的新工具 --> </head>
<body >
<script type="text/javascript">
function a(){
art.dialog({content:'hello world!歷史'})
}
function b(){
art.dialog(
{
content:'歡迎你來(lái)到對(duì)話框世界！',
lock:true,
style:'succeed noClose'
},
function(){
alert('你點(diǎn)了確定'); //不管點(diǎn)了確定還是取消默認(rèn)都會(huì)關(guān)閉artdialog，除非在這里面返回false
},
function(){
alert('你點(diǎn)了取消');
}
);
}
function c(){
art.dialog(
{
title:'圖片查看',
fixed:true,
content:'<img width="817" height="479" src="butterfly.jpg" />'
});
//return false;
};
function d(){
// art.dialog({title:'dialog內(nèi)嵌iframe', iframe:'http://www.baidu.com', width:'900', height:'500'}); //已經(jīng)沒(méi)有了直接的iframe屬性 通過(guò)下面的方式內(nèi)嵌iframe 第二種效果不佳
art.dialog.open(" // art.dialog({title:'dialog內(nèi)嵌iframe', width:'900px',height:'500px', content:"<iframe align='right' src='http://www.baidu.com' width:'100%' height:'100%' />"});
return false;
};
function e(){
art.dialog(
{
title:'動(dòng)畫(huà)',
fixed:true,
content:'<embed src="ddd.rm" type="audio/x-pn-realaudio-plugin" autostart="true" width="420" height="363"></embed>'
});
}; //播放avi總是只有聲音，沒(méi)有畫(huà)面，哎！
function f(){
art.dialog({content:'你人品穩(wěn)定么？', fixed:true, yesText:'我很穩(wěn)定', style:'confirm', id:'bnt4_test'},
function(){
art.dialog({id:'bnt4_test'}).content('你騙人！');
return false;//這樣對(duì)話框才不會(huì)關(guān)閉
},
function(){alert('你是壞人');}//按右上角的叉關(guān)閉對(duì)話框也會(huì)執(zhí)行這個(gè)函數(shù)
);
};
function g(){
art.dialog({mouse:true, id:'dg_test34243', content:'您收到 <strong>2</strong> 條消息',left:'right',width:'15em', top:'bottom', fixed:true});
};
function h(){
art.dialog({id:'dg_test34243'}).close();
};
function i(){
var _this = document.getElementById('btn7');
if (document.getElementById('menu_4834783')) {//如果已經(jīng)打開(kāi)了對(duì)話框，按這個(gè)按鈕還能把它關(guān)閉
art.dialog({id:'menu_4834783'}).close();
_this.innerHTML = '彈出菜單'; //button上顯示的內(nèi)容
return;
};
art.dialog({id:'menu_4834783', title:'菜單', content:'請(qǐng)輸入：<input style="width:200px;" id="M_dfd" type="text" value="hello world!" />',
button:[{name:'確定',callback:function(){
var a=document.getElementById('M_dfd').value;
art.dialog({content:a, lock:true, time:1});
}
},
{name:'關(guān)閉我',callback:function(){_this.innerHTML = '彈出菜單';}}
]
}
);
_this.innerHTML = '關(guān)閉菜單';
return false;
};
</script>
<input type="button" style="width: 100px" onClick="a()" value="最簡(jiǎn)單的對(duì)話框"/><br/>
<button id="btn0" onClick="b()">基本示例</button><br/>
<button id="btn1" onClick="c()">顯示圖片</button><br/>
<button id="btn2" onClick="d()">外部頁(yè)面</button><br/>
<button id="btn3" onClick="e()">視頻</button><br/>
<button id="btn4" onClick="f()">詢問(wèn)</button><br/>
<button id="btn5" onClick="g()">廣告</button>
<button id="btn6" onClick="h()">關(guān)閉</button><br/>
<button id="btn7" onClick="i()">彈出菜單</button><br/>
</body>
</html> 上面沒(méi)有用的特性art.dialog({id:'testDialog'}).data.iframe.document.getElementById('test')，也就是說(shuō)如果在dialog里面嵌入的iframe，parent頁(yè)面可以通過(guò)這種方式取到里面的控件。PS：iframe支持已經(jīng)改變，沒(méi)細(xì)研究。 在對(duì)話框里添加視頻的時(shí)候，avi格式的總是只有聲音沒(méi)有畫(huà)面，氣死我了！基本上典型應(yīng)用都有了，以后看一下就會(huì)用了，這就是目的，哈哈。還有，artDialg的屬性如下（也就是Demo網(wǎng)頁(yè)上的那幾個(gè)）： content: {消息內(nèi)容,支持HTML} title: {標(biāo)題.默認(rèn):'提示'}iframe: {嵌入外部頁(yè)面. 存在content參數(shù)時(shí)候,此參數(shù)無(wú)效}yesText: {確定按鈕文本. 默認(rèn):'確定'}noText: {取消按鈕文本. 默認(rèn):'取消'} width: {寬度,支持em等單位. 默認(rèn):'auto'} - height: {高度,支持em等單位. 默認(rèn):'auto'}
- left: {x坐標(biāo),可以使用關(guān)鍵字,如:'left'、'right'. 默認(rèn):居中}
- top: {y坐標(biāo),可以使用關(guān)鍵字,如:'top'、'bottom'. 默認(rèn):居中(注: 小對(duì)話框采用黃金比例垂直居中)}
- menuBtn: {讓對(duì)話框在指定元素附近彈出, 存在menuBtn參數(shù)則讓left、top參數(shù)失效}
- fixed: {是否啟用靜止定位. 默認(rèn):false}
- style: {對(duì)話框風(fēng)格擴(kuò)展參數(shù),寫(xiě)入自定義className,詳情見(jiàn)皮膚css文件的定義,多個(gè)用空格隔開(kāi)}
- lock: {是否鎖定屏幕, 中斷用戶操作頁(yè)面. 默認(rèn):false}
- id: {給對(duì)話框定義唯一標(biāo)識(shí)id名稱. 可以防止重復(fù)彈出對(duì)話框}
- time: {多少秒自動(dòng)關(guān)閉}
上面的屬性有些已經(jīng)不支持，屬性已經(jīng)改變更新了好多，詳細(xì)參見(jiàn)最新下載的doc說(shuō)明?。?/p>
|
