[TOC] # artDialog使用說明 > artDialog是一個輕巧且高度兼容的JavaScript對話框組件，可讓你的網頁交互擁有桌面軟件般的用戶體驗。 > 功能： 支持鎖定屏幕(遮罩)、模擬alert和confirm、多窗口彈出、靜止定位、支持Ese鍵關閉對話框、定時關閉、自定義位置、拖動、鼠標調節窗口大小、換膚…… ## **優點** ~~~ 1. 兼容主流瀏覽器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari 2. 自適應內容: 無需預設高寬, 對話框自適應消息內容的大小 (包括按鈕)，并且支持消息框大小拖動調節 3.智能消息對齊: 如果設置了對話框寬度，文本會自動居中或者居左對齊 4.容錯: 如果定義的寬度高度小于內容大小不會出現錯位 5.智能定位: 使用自定義坐標的時候智能修正位置，確保其在可視范圍 (適用于彈出菜單) 6.拖動流暢: 不會粘住鼠標也不會拖出瀏覽器視口導致無法控制 7.輕巧: js壓縮后不到8KB (在js內嵌了核心兼容布局CSS的情況下) 8.制訂皮膚: 九宮格布局, 鉤子完善,制作皮膚相當簡易, 內置IE6 png 32透明和定位解決方案。 9.IE6無抖動靜止定位: 在IE6下可實現與現代瀏覽器一樣完美靜止定位效果 10.IE6遮蓋下拉控件支持: 支持 IE6 下覆蓋下拉控件 (注:半透明皮膚不支持) ~~~ ## **配置參數** ~~~ content: {消息內容,支持HTML} title: {標題.默認:'提示'} lock: {是否鎖定屏幕. 默認:false} width: {寬度,支持em等單位. 默認:'auto'} height: {高度,支持em等單位. 默認:'auto'} url: {iframe地址,存在content參數時候,此參數無效} x: {x坐標,可以使用關鍵字,如:left/right/center. 默認:'center'} y: {y坐標,可以使用關鍵字,如:top/bottom/center. 默認:'center'(并非絕對垂直居中，而是使用的黃金比例)} fixed: {是否啟用靜止定位. 默認:false} time: {多少秒自動關閉} style: {對話框風格擴展參數,寫入自定義className,詳情見皮膚css文件的定義,多個用空格隔開} yesText: {確定按鈕文本. 默認:'確定'} noText: {取消按鈕文本. 默認:'取消'} yesClose: {點擊確定按鈕是否同時關閉對話框. 默認:true} id: {給對話框定義id,對話框未關閉就不再會有同名對話框彈出. 例如定義id為'my2'，則內容容器id為'my2Content'} 形式 ~~~ ## 使用 > 需要引用兩個js文件----使用頁面都需要引用 ~~~ <script type="text/javascript" src="__PUBLIC__/js/artDialog/artDialog.js"></script> <script type="text/javascript" src="__PUBLIC__/js/artDialog/iframeTools.js"></script> ~~~ ### artDialog實現子窗口向父元素傳遞數據 > 在頁面A點擊按鈕，彈出artDialog窗口B，當關閉窗口B時，實現向父元素A傳遞數據。 #### **方法一** ~~~ 利用artdialog中的data方法進行傳值與接收值。 在子窗口調用：artDialog.data('變量名'，變量值) 進行傳值； 在父元素調用：art.dialog.data('變量名') 進行接收值； //可能需要在artDialog的close方法中 ~~~ #### **方法二** B窗口 ~~~ function commitSave() { var ajxxUuid = jQuery("#grid_ajxx").jqGrid('getGridParam','selrow'); //獲取值 var nsrmc = $("#grid_ajxx").jqGrid('getCell',ajxxUuid,'xaAy.nsrmc'); //獲取值 if(ajxxUuid) { artDialog.data("ajxxUuid", ajxxUuid); //將值存起來，供父頁面讀取 artDialog.data("nsrmc", nsrmc); art.dialog.close(); }else { showTopMsg("請選中一行再提交！", 4000, 'error'); return false; } } ~~~ A頁面 ~~~ function chooseAj() { url = "{:U('organ/Mechanism/select_user',array('post_id'=>$post['id']))}"; //需要彈出的頁面路徑 art.dialog.open(url, { id: 'ajxxList', title: '案件信息', width: 650, height: 460, left: '50%', top: '50%', background: '#000000', opacity: 0.1, lock: true, resize: false, close: function () { var ajxxUuid = art.dialog.data('ajxxUuid'); // 讀取子窗口返回的數據 var nsrmc = art.dialog.data('nsrmc'); // 讀取子窗口返回的數據 if (ajxxUuid !== undefined){ document.getElementById("ajxxUuid").value = ajxxUuid; //賦值到頁面A的input以顯示出來 document.getElementById("nsrmc").value = nsrmc; } } }, false); } ~~~ ### artDialog其他調用實例 #### **A** ~~~ function a(){ art.dialog({content:'hello world!歷史'}) } ~~~ #### **B** ~~~ function b(){ art.dialog({ content:'歡迎你來到對話框世界！', lock:true, style:'succeed noClose' }, function(){ alert('你點了確定'); //不管點了確定還是取消默認都會關閉artdialog，除非在這里面返回false }, function(){ alert('你點了取消'); }); } ~~~ #### **C** ~~~ function c(){ art.dialog({ title:'圖片查看', fixed:true, content:'<img width="817" height="479" src="butterfly.jpg" />' }); //return false; }; ~~~ #### **D** ~~~ function d(){ // art.dialog({title:'dialog內嵌iframe', iframe:'http://www.baidu.com', width:'900', height:'500'}); //已經沒有了直接的iframe屬性 通過下面的方式內嵌iframe 第二種效果不佳 art.dialog.open("http://www.baidu.com", {width: 320, height: 400}); // art.dialog({title:'dialog內嵌iframe', width:'900px',height:'500px', content:"<iframe align='right' src='http://www.baidu.com' width:'100%' height:'100%' />"}); return false; }; ~~~ #### **E** ~~~ function e(){ art.dialog( { title:'動畫', fixed:true, content:'<embed src="ddd.rm" type="audio/x-pn-realaudio-plugin" autostart="true" width="420" height="363"></embed>' }); }; //播放avi總是只有聲音，沒有畫面，哎！ ~~~ #### **F** ~~~ function f(){ art.dialog({content:'你人品穩定么？', fixed:true, yesText:'我很穩定', style:'confirm', id:'bnt4_test'}, function(){ art.dialog({id:'bnt4_test'}).content('你騙人！'); return false;//這樣對話框才不會關閉 }, function(){alert('你是壞人');}//按右上角的叉關閉對話框也會執行這個函數 ); }; ~~~ #### **G** ~~~ function g(){ art.dialog({mouse:true, id:'dg_test34243', content:'您收到 <strong>2</strong> 條消息',left:'right',width:'15em', top:'bottom', fixed:true}); }; ~~~ #### **H** ~~~ function h(){ art.dialog({id:'dg_test34243'}).close(); }; ~~~ #### **I** ~~~ function i(){ var _this = document.getElementById('btn7'); if (document.getElementById('menu_4834783')) {//如果已經打開了對話框，按這個按鈕還能把它關閉 art.dialog({id:'menu_4834783'}).close(); _this.innerHTML = '彈出菜單'; //button上顯示的內容 return; }; art.dialog({id:'menu_4834783', title:'菜單', content:'請輸入：<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:'關閉我',callback:function(){_this.innerHTML = '彈出菜單';}} ] } ); _this.innerHTML = '關閉菜單'; return false; }; ~~~ #### **A-I對應的彈窗類型** ~~~ <input type="button" style="width: 100px" onClick="a()" value="最簡單的對話框"/><br/> <button id="btn0" onClick="b()">基本示例</button><br/> <button id="btn1" onClick="c()">顯示圖片</button><br/> <button id="btn2" onClick="d()">外部頁面</button><br/> <button id="btn3" onClick="e()">視頻</button><br/> <button id="btn4" onClick="f()">詢問</button><br/> <button id="btn5" onClick="g()">廣告</button> <button id="btn6" onClick="h()">關閉</button><br/> <button id="btn7" onClick="i()">彈出菜單</button><br/> ~~~