artDialog說明文檔

1、artDialog 說明文檔artDialog 是一個基于javascript編寫的對話框組件，它擁有精致的界面與友好的接口自適應(yīng)內(nèi)容artDialog 的特殊UI框架能夠適應(yīng)內(nèi)容變化，甚至連外部程序動態(tài)插入的內(nèi)容它仍然 能自適應(yīng)，因此你不必去考慮消息內(nèi)容尺寸使用它。它的消息容器甚至能夠根據(jù)寬度讓文本居中或居左對齊一一這一切全是XHTML+CSS生實現(xiàn)。完善的接口它的接口完善，可以輕易與外部程序配合使用。如異步寫入消息、控制位置、尺寸、顯 示與隱藏、關(guān)閉等。細致的體驗如果不是在輸入狀態(tài)， 它支持Esc快捷鍵關(guān)閉；可指定在元素附近彈出， 讓操作更便捷； 智能給按鈕添加焦點；黃金比例垂直居中；超大

2、響應(yīng)區(qū)域特別為ipad等觸屏設(shè)備優(yōu)化；預(yù)先緩存皮膚圖片更快響應(yīng)，跨平臺兼容兼容：IE6+、Firefox、Chroma Safari、Opera 以及 iPad 等移動設(shè)備。并且 IE6 下也 能支持現(xiàn)代瀏覽器的靜止定位(fixed) 、alpha通道png背景。下載地址:http:/code.google.Com/p/artdialog/downloads/list快速入門一、使用傳統(tǒng)的參數(shù)art.dialog(content, ok, cancel)示例：art.dialog('簡單愉悅的接口，強大的表現(xiàn)力，優(yōu)雅的內(nèi)部實現(xiàn) ',function()alert('ye

3、s'););art.dialog(“簡單愉悅的接口，強大的表現(xiàn)力，優(yōu)雅的內(nèi)部實現(xiàn)”);二、使用字面量傳參art.dialog(options)示例var dialog = art.dialog(title:' 歡迎',content:'歡迎使用artDialog 對話框組件！',icon: 'succeed',follow: document.getElementById('btn2'),ok: function()this.title('警告').content(' 請注意 artDialog 兩

4、秒后將關(guān)閉！').lock().time(2);return false; );三、擴展方法需要對彈出后的對話框操作？artDialog簡單實用的擴展方法可以使這一切變得簡單。如在ajax異步操作中，我們可以先定義一個變量引用對話框返回的擴展方法： var myDialog = art.dialog();/初始化一個帶有 loading 圖標的空對話框jQuery.ajax(url: ' success: function (data) (myDialog.content(data);/填充對話框內(nèi)容 );如果需要使用程序控制關(guān)閉，可以使用 "close"方

5、法關(guān)閉對話框： myDialog.close();插件：框架應(yīng)用工具artDialog 針對CM斂的框架應(yīng)用提供了專屬插件，如穿越框架、 iframe、AJAX跨框 架傳值操作等。例：使用open方法嵌入頁面，并使用 data方法在各個iframe間傳遞數(shù)據(jù)：var val = document.getElementById('demoInput04-3').value; art.dialog.data('test', val); art.dialog.data('homeDemoPath', './_doc/');/ 此時ifr

6、ameA.html 頁面可以使用 art.dialog.data('test')獲取到數(shù)據(jù)，如：/ document.getElementById('aInput').value = art.dialog.data('test'); art.dialog.open('./_doc/iframeA.html');jQuery + artDialogartDialog 提供了一個jQuery版本，功能與標準版一致，調(diào)用只需要把art前綴改成jQuery的命名空間。/普通調(diào)用$.dialog(content:'hello wor

7、ld!');/使用選擇器方式，此時自動使用綁定了 live click 事件，同時啟用follow 模式 $('#main .test').dialog(content: 'hello world');(最低兼容jquery1.3.2，但框架應(yīng)用插件需要jquery1.4+運行?)名稱類型默認值描述f內(nèi)容titleString'消息標題內(nèi)容名稱類型默認值描述HTMLElement1、如果傳入的是 HTMLElement類型，如 果是隱藏元素會給其設(shè)置display:block以顯示該元素，其他屬性與綁定的事件都會完整保留，對話框關(guān)閉 后此元素又將

8、恢復(fù)原來的display 屬性，并且重新插入原文檔所在位置2、如果沒有設(shè)定content的值則會有l(wèi)oading 的動畫按鈕okFunctionBooleannull確定按鈕回調(diào)函數(shù)。函數(shù)如果返回false將阻止對話框關(guān)閉； 函數(shù)this指針指向內(nèi)部api ；如果傳入 true表示只顯示有關(guān)閉功能的按鈕cancelFunctionBooleannull取消按鈕回調(diào)函數(shù)。函數(shù)如果返回false將阻止對話框關(guān)閉； 函數(shù)this指針指向內(nèi)部api ；如果傳入 true表示只顯示有關(guān)閉功能的按鈕 對話框標題欄的關(guān)閉按鈕其實就是取消按 鈕，只不過視覺不同罷了，點擊同樣觸發(fā) cancel 事件okValS

9、tring'確定,”確定按鈕”文字cancelValString,取消,”取消按鈕”文字Arraynull自定義按鈕。配置參數(shù)成員:name鈕名稱callback 下后執(zhí)行的函數(shù)focus否聚焦點buttondisabled 否標記按鈕為不可用狀 態(tài)(后續(xù)可使用擴展方法讓其恢復(fù)可用狀 態(tài))示例：參數(shù)如：(name:' 登錄',callback:function () ), (name:'取消')注意點擊按鈕默認會觸發(fā)按鈕關(guān)閉動作， 需要阻止觸發(fā)關(guān)閉請讓回調(diào)函數(shù)返回false尺寸名稱類型默認值描述widthNumberString'auto'

10、;設(shè)置消息內(nèi)容寬度，可以帶單位。一般不 需要設(shè)置此，對話框框架會自己適應(yīng)內(nèi)容。如果設(shè)置為百分值單位，將會以根據(jù)瀏覽 器可視范圍作為基準，此時如果瀏覽器窗 口大小被改變其也會進行相應(yīng)的調(diào)整1heightNumberString'auto'設(shè)置消息內(nèi)容高度，可以帶單位。不建議 設(shè)置此，而應(yīng)該讓內(nèi)容自己撐開高度。如果設(shè)置為百分值單位，將會以根據(jù)瀏覽 器可視范圍作為基準，此時如果瀏覽器窗 口大小被改變其也會進行相應(yīng)的調(diào)整位置fixedBooleanfalse開啟靜止定位。靜止定位是css2.1的一個屬性，它靜止在瀏覽器某個地方不動， 也不受滾動條拖動影響。(artDialog 支持 I

11、E6 fixed )followHTMLElementStringnull讓對話框依附在指定元素附近。可傳入元素ID名稱，注意ID名稱需要以“ #號作為前綴leftNumberString'50%'相對于可視區(qū)域的X軸的坐標?？梢允褂?%' '100%'作為相對坐標，如果瀏覽器窗口大小被改變其也會進行相應(yīng)的調(diào)整topNumberString'38.2%'相對于可視區(qū)域的 Y軸的坐標?？梢允褂?#39;0%' '100%'作為相對坐標，如果瀏覽器窗口大小被改變其也會進行相應(yīng)的調(diào)整I-視覺lockBooleanfals

12、e開啟鎖屏。中斷用戶對話框之外的交互，用于顯示非 常重要的操作/消息，所以不建議頻繁使用 它，它會讓操作變得繁瑣rbackgroundString'#000'鎖屏遮罩顏色opacityNumber0.7鎖屏遮罩透明度iconStringnull定義消息圖標?？啥x "skins/icons/ "目錄下的圖標名作為參數(shù)名(不包含后綴名)名稱類型默認值描述paddingString'20px 25px'內(nèi)容與邊界填充邊距（即css padding）交互timeNumbernull設(shè)置對話框顯示時間。以秒為單位 resizeBooleantrue是

13、否允許用戶調(diào)節(jié)尺寸dragBooleantrue是否允許用戶拖動位置escBooleantrue是否允許用戶按Esc鍵關(guān)閉對話框商級idStringNumbernull設(shè)定對話框唯一標識。用途：1、防止重復(fù)彈出2、定義id后可以使用art.dialog.listyouID獲取擴展方法zIndexNumber1987重置全局zIndex初始值。用來改變對話框疊加高度。比如有時候配合外部浮動層UI組件，但是它們可能默認zIndex 沒有artDialog 高，導(dǎo)致無法浮動到artDialog 之上，這個時候你就可以 給對話框指定一個較小的zIndex值。請注意這是一個會影響到全局的配置，后 續(xù)出現(xiàn)

14、的對話框疊加高度將重新按此累 加。initFunctionnull對話框彈出后執(zhí)行的函數(shù)closeFunctionnull對話框關(guān)閉前執(zhí)行的函數(shù)。函數(shù)如果返回 false將阻止對話框關(guān)閉。請注意這不是關(guān)閉按鈕的回調(diào)函數(shù)，無論 何種方式關(guān)閉對話框，close都將執(zhí)行。showBooleantrue是否顯示對話框擴展方法名稱描述close()關(guān)閉對話框F"show()顯示對話框hide()隱藏對話框title(value)寫入標題。無參數(shù)則返回標題容器元素名稱content(value)button(arguments)follow(element) position(left, top

15、) size(width, height) lock() unlock() time(val)內(nèi)容content1.傳入字符串a(chǎn)rt.dialog(描述向消息容器中寫入內(nèi)容。參數(shù)支持字符串、DOM寸象，無參數(shù)則返回內(nèi)容容器元素插入一個自定義按鈕。配置參數(shù)成員：name鈕名稱callback 下后執(zhí)行的函數(shù)focus 否聚焦點disabled 否標記按鈕為不可用狀態(tài)(后續(xù)可使用擴展方法讓其恢復(fù)可用狀 態(tài))示例：button(name:' 登錄'，focus: true,callback: function () , name:'取消')讓對話框吸附到指定元素附近重

16、新定位對話框重新設(shè)定對話框大小鎖屏解鎖定時關(guān)閉(單位秒)配置參數(shù)演示content:我支持HTML');運行2,傳入 HTMLElement備注：1、元素不是復(fù)制而是完整移動到對話框中，所以原有的事件與屬性都將會保留2、如果隱藏元素被傳入到對話框， 會設(shè)置display:block 屬性顯示該元素 3、對話框關(guān)閉的時 候元素將恢復(fù)到原來在頁面的位置，style display 屬性也將恢復(fù)art.dialog(content: document,getElementById( 'demoCode_content_DOM),id:'EF893L')；運行標題tit

17、leart.dialog(title:'hello world!')；運行確定取消按鈕ok & cancel備注：回調(diào)函數(shù)this指向擴展接口，如果返回 false將阻止對話框關(guān)閉art.dialog(content:'如果定義了回調(diào)函數(shù)才會出現(xiàn)相應(yīng)的按鈕，ok:function () (this ,title( '3 秒后自動關(guān)閉),time( 3);return false ;，cancelVal:'關(guān)閉',cancel:true / 為 true 等價于 function()()；運行'自定義按鈕button備注：回調(diào)函數(shù)t

18、his指向擴展接口，如果返回false將阻止對話框關(guān)閉；button參數(shù)對應(yīng)的擴展方法名稱也是"button"art.dialog(id:'testID',content:'hello world!' ,button:name:'同意',callback:function () this .content('你同意了 ' ).time( 2);return false ;,focus:true,name:'不同意，callback:function () alert('你不同意'),na

19、me:'無效按鈕',disabled:true,（name:'關(guān)閉我）；定時關(guān)閉的消息timeart.dialog（time:2,content:'兩秒后關(guān)閉'）;防止重復(fù)彈出idart.dialog（id:'testID2',content:'再次點擊運行看看）;art.dialog（id:'testID2' ）.title（ '3 秒后關(guān)閉'）.time（ 3）;定義消息圖標icon請查看 skin/icons 目錄下的圖標art.dialog（icon:'succeed',co

20、ntent:'我可以定義消息圖標哦)；內(nèi)容與邊界填充邊距 padding有時候并不需要默認的內(nèi)容填充邊距，如展示圖片與視頻art.dialog(padding:0,title:'照片，content:'<img src="./images/photo.jpg" width="379" height="500”/>',lock:true);鎖屏lock & background & opacityart.dialog(lock:true ,background:'#600'

21、; , / 背景色opacity:0.87,/ 透明度content:'中斷用戶在對話框以外的交互，展示重要操作與消息icon:'error',ok:function () (art.dialog(content:'再來一個鎖屏',lock: true );return false ;,cancel:true);跟隨元素follw1、標準形式art.dialog(follow: document.getElementById( 'followTestBtn' ),content:'讓對話框跟著某個元素，一個元素同時只能出現(xiàn)一個對話

22、框);2、 使用簡寫形式(已經(jīng)綁定onclick事件，注意此返回值不再是對話框擴展方法)art( '#demoCode_follow_a' ).dialog(content:'讓對話框跟著某個元素，一個元素同時只能出現(xiàn)一個對話框);元素觸發(fā)自定義坐標left & topart.dialog（left:100,top:'60%',content:'我改變坐標了）;創(chuàng)建一個右下角浮動的消息窗口art.dialog( id:'msg',title:'公告',content:'hello world!

23、9;width:320,height:240,left:'100%',top:'100%',fixed:true ,drag:false ,resize:false)設(shè)置大小width & heightart.dialog( width:'20em',height:55,content:'尺寸可以帶單位);創(chuàng)建一個全屏對話框art.dialog( width:'100%',height:'100%',left:'0%',top:'0%',fixed:true ,res

24、ize:false ,drag:false)靜止定位fixedart.dialog(fixed:true ,content:'請拖動滾動條查看);不許拖拽drag & resizeart.dialog(drag:false ,resize:false ,content:'禁止拖拽);擴展方法演示特別說明：擴展方法支持鏈式操作獲取擴展方法一：直接引用返回var dialog = art.dialog(title:'我是對話框',content:'我是初始化的內(nèi)容');dialog.content('對話框內(nèi)容被擴展方法改變了).ti

25、tle(' 提示');獲取擴展方法二：通過對話框IDart.dialog(id: 'KDf435',title:' 警告',content:'我是初始化的內(nèi)容對話框內(nèi)容被擴展方法改變了'););art.dialog.list'KDf435'.content('獲取擴展方法三：回調(diào)函數(shù)中thisart.dialog(content:'我是初始化的內(nèi)容',ok: function () (this.content('你點了確定按鈕').lock();return false;,i

26、nit: function () (this.content('對話框內(nèi)容被擴展方法改變了'););關(guān)閉頁面所有對話框var list = art.dialog.list;for (var i in list) ( listi.close();按鈕接口演示備注：回調(diào)函數(shù)如果返回false將阻止對話框關(guān)閉var dialog = art.dialog(title:'警告',content:'點擊管理按鈕將讓刪除按鈕可用width: '20em',button: (name:'管理',callback: function ()

27、 ( this.content('.button(我更改了刪除按鈕')刪除',disabled: falsename:).lock();return false;,focus: true)；dialog.button(name:' 刪除, callback: function () ( alert('delect'),disabled: true)標題倒計時var timer;art.dialog(content:'時間越來越少，越來越少.'init: function () (var that = this, i = 5;var fn = function () (that.title(i + '秒后關(guān)閉');!i && that.close();i -;timer = setInterval(fn, 1000);fn()；,close: function () (clearlnterval(timer);).show();關(guān)閉不刪除內(nèi)容art.dialog(id: 'show-hide',content:'關(guān)閉后阻止對話框被刪除，只隱藏對話框 ',close: f