artDialog說(shuō)明文檔

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

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

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

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

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

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

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

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

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

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

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

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

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

14、的對(duì)話(huà)框疊加高度將重新按此累 加。initFunctionnull對(duì)話(huà)框彈出后執(zhí)行的函數(shù)closeFunctionnull對(duì)話(huà)框關(guān)閉前執(zhí)行的函數(shù)。函數(shù)如果返回 false將阻止對(duì)話(huà)框關(guān)閉。請(qǐng)注意這不是關(guān)閉按鈕的回調(diào)函數(shù)，無(wú)論 何種方式關(guān)閉對(duì)話(huà)框，close都將執(zhí)行。showBooleantrue是否顯示對(duì)話(huà)框擴(kuò)展方法名稱(chēng)描述close()關(guān)閉對(duì)話(huà)框F"show()顯示對(duì)話(huà)框hide()隱藏對(duì)話(huà)框title(value)寫(xiě)入標(biāo)題。無(wú)參數(shù)則返回標(biāo)題容器元素名稱(chēng)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(描述向消息容器中寫(xiě)入內(nèi)容。參數(shù)支持字符串、DOM寸象，無(wú)參數(shù)則返回內(nèi)容容器元素插入一個(gè)自定義按鈕。配置參數(shù)成員：name鈕名稱(chēng)callback 下后執(zhí)行的函數(shù)focus 否聚焦點(diǎn)disabled 否標(biāo)記按鈕為不可用狀態(tài)(后續(xù)可使用擴(kuò)展方法讓其恢復(fù)可用狀 態(tài))示例：button(name:' 登錄'，focus: true,callback: function () , name:'取消')讓對(duì)話(huà)框吸附到指定元素附近重

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

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

18、his指向擴(kuò)展接口，如果返回false將阻止對(duì)話(huà)框關(guān)閉；button參數(shù)對(duì)應(yīng)的擴(kuò)展方法名稱(chē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:'無(wú)效按鈕',disabled:true,（name:'關(guān)閉我）；定時(shí)關(guān)閉的消息timeart.dialog（time:2,content:'兩秒后關(guān)閉'）;防止重復(fù)彈出idart.dialog（id:'testID2',content:'再次點(diǎn)擊運(yùn)行看看）;art.dialog（id:'testID2' ）.title（ '3 秒后關(guān)閉'）.time（ 3）;定義消息圖標(biāo)icon請(qǐng)查看 skin/icons 目錄下的圖標(biāo)art.dialog（icon:'succeed',co

20、ntent:'我可以定義消息圖標(biāo)哦)；內(nèi)容與邊界填充邊距 padding有時(shí)候并不需要默認(rèn)的內(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:'中斷用戶(hù)在對(duì)話(huà)框以外的交互，展示重要操作與消息icon:'error',ok:function () (art.dialog(content:'再來(lái)一個(gè)鎖屏',lock: true );return false ;,cancel:true);跟隨元素follw1、標(biāo)準(zhǔn)形式art.dialog(follow: document.getElementById( 'followTestBtn' ),content:'讓對(duì)話(huà)框跟著某個(gè)元素，一個(gè)元素同時(shí)只能出現(xiàn)一個(gè)對(duì)話(huà)

22、框);2、 使用簡(jiǎn)寫(xiě)形式(已經(jīng)綁定onclick事件，注意此返回值不再是對(duì)話(huà)框擴(kuò)展方法)art( '#demoCode_follow_a' ).dialog(content:'讓對(duì)話(huà)框跟著某個(gè)元素，一個(gè)元素同時(shí)只能出現(xiàn)一個(gè)對(duì)話(huà)框);元素觸發(fā)自定義坐標(biāo)left & topart.dialog（left:100,top:'60%',content:'我改變坐標(biāo)了）;創(chuàng)建一個(gè)右下角浮動(dò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)建一個(gè)全屏對(duì)話(huà)框art.dialog( width:'100%',height:'100%',left:'0%',top:'0%',fixed:true ,res

24、ize:false ,drag:false)靜止定位fixedart.dialog(fixed:true ,content:'請(qǐng)拖動(dòng)滾動(dòng)條查看);不許拖拽drag & resizeart.dialog(drag:false ,resize:false ,content:'禁止拖拽);擴(kuò)展方法演示特別說(shuō)明：擴(kuò)展方法支持鏈?zhǔn)讲僮鳙@取擴(kuò)展方法一：直接引用返回var dialog = art.dialog(title:'我是對(duì)話(huà)框',content:'我是初始化的內(nèi)容');dialog.content('對(duì)話(huà)框內(nèi)容被擴(kuò)展方法改變了).ti

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

26、nit: function () (this.content('對(duì)話(huà)框內(nèi)容被擴(kuò)展方法改變了'););關(guān)閉頁(yè)面所有對(duì)話(huà)框var list = art.dialog.list;for (var i in list) ( listi.close();按鈕接口演示備注：回調(diào)函數(shù)如果返回false將阻止對(duì)話(huà)框關(guān)閉var dialog = art.dialog(title:'警告',content:'點(diǎn)擊管理按鈕將讓刪除按鈕可用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)標(biāo)題倒計(jì)時(shí)var timer;art.dialog(content:'時(shí)間越來(lái)越少，越來(lái)越少.'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)閉后阻止對(duì)話(huà)框被刪除，只隱藏對(duì)話(huà)框 ',close: f