artDialog基本使用

在頁面head引入artDialog，注意如果檔案帶有skin參數將會無阻塞的方式自動載入對應的皮膚css檔案，當然你仍然可以使用傳統方式引用“skins/”目錄下的css檔案，二者選其一。<script src="artDialog.js?skin=default"></script>如果項目採用jQuery作為架構，則引用jQuery artDialog版本：<script src="jquery.artDialog.js?skin=default"></script>如果需要在iframe應用下提供 更好的支援，需要加上：<script src="artDialog.iframeTools.js"></script>配置參數 名稱 類型 預設值 描述內容title String '訊息' 標題內容content String null 訊息內容。1、如果內容類型是Object還需要tmpl參數配合 2、如果傳入的是HTMLElement類型，如果是隱藏元素會給其設定display:block以顯示該元素，其他屬性與綁定的事件都會完整保留，對話方塊關閉後此元素又將恢複原來的display屬性，並且重新插入原文檔所在位置3、如果沒有設定content的值則會有loading的動畫HTMLElementObject按鈕yesFn Function null 確定按鈕回呼函數。函數如果返回false將阻止對話方塊關閉；函數this指標指向內部api；如果傳入true表示只顯示有關閉功能的按鈕BooleannoFn Function null 取消按鈕回呼函數。函數如果返回false將阻止對話方塊關閉；函數this指標指向內部api；如果傳入true表示只顯示有關閉功能的按鈕對話方塊標題列的關閉按鈕其實就是取消按鈕，只不過視覺不同罷了，點擊同樣觸發noFn事件BooleanyesText String '確定' "確定按鈕"文字noText String '取消' "取消按鈕"文字button Array null 自訂按鈕。配置參數成員：name —— 按鈕名稱callback —— 按下後執行的函數focus —— 是否聚焦點disabled —— 是否標記按鈕為不可用狀態（後續可使用控制介面讓其恢複可用狀態） 樣本：參數如：[{name: '登入', callback: function () {}}, {name: '取消'}] 。注意點擊按鈕預設會觸發按鈕關閉動作，需要阻止觸發關閉請讓回呼函數返回false尺寸width Number 'auto' 設定訊息內容寬度，可以帶單位。一般不需要設定此，對話方塊架構會自己適應內容。如果設定為百分值單位，將會以根據瀏覽器可視範圍作為基準，此時如果瀏覽器視窗大小被改變其也會進行相應的調整Stringheight Number 'auto' 設定訊息內容高度，可以帶單位。不建議設定此，而應該讓內容自己撐開高度。如果設定為百分值單位，將會以根據瀏覽器可視範圍作為基準，此時如果瀏覽器視窗大小被改變其也會進行相應的調整String位置fixed Boolean false 開啟靜止定位。靜止定位是css2.1的一個屬性，它靜止在瀏覽器某個地方不動，也不受捲軸拖動影響。（artDialog支援IE6 fixed）follow HTMLElement null 讓對話方塊依附在指定元素附近。可傳入元素ID名稱，注意ID名稱需要以“#”號作為首碼Stringleft Number '50%' X軸的座標。1、如果開啟了fixed參數則以瀏覽器視口為基準；2、可以使用'0%' ~ '100%'作為相對座標，如果瀏覽器視窗大小被改變其也會進行相應的調整Stringtop Number 'goldenRatio' Y軸的座標。1、如果開啟了fixed參數則以瀏覽器視口為基準；2、可以使用'0%' ~ '100%'、''goldenRatio''作為相對座標，如果瀏覽器視窗大小被改變其也會進行相應的調整，其中'goldenRatio'表示為黃金比例垂直置中，絕對置中請使用'50%'String視覺lock Boolean false 開啟鎖屏。中斷使用者對話方塊之外的互動，用於顯示非常重要的操作/訊息，所以不建議頻繁使用它background String '#000' 鎖屏遮罩顏色opacity Number 0.7 鎖屏遮罩透明度icon String null 定義訊息表徵圖。可定義“skins/icons/”目錄下的表徵圖名作為參數名（不包含尾碼名）padding String '20px 25px' 內容與邊界填充邊距(即css padding)互動time Number null 設定對話方塊顯示時間。以秒為單位resize Boolean true 是否允許使用者調節尺寸drag Boolean true 是否允許使用者拖動位置esc Boolean true 是否允許使用者按Esc鍵關閉對話方塊進階id String null 設定對話方塊唯一標識。用途：1、防止重複彈出2、可後續使用art.dialog.list[youID]擷取控制介面Numbertmpl String null 啟用模板引擎拼接訊息內容，還需要與content參數傳入字面量對象才會生效，詳情見樣本zIndex Number 1987 重設全域zIndex初始值。用來改變對話方塊疊加高度。比如有時候配合外部浮動層UI組件，但是它們可能預設zIndex沒有artDialog高，導致無法浮動到artDialog之上，這個時候你就可以給對話方塊指定一個較小的zIndex值。請注意這是一個會影響到全域的配置，後續出現的對話方塊疊加高度將重新按此累加。initFn Function null 對話方塊彈出後執行的函數closeFn Function null 對話方塊關閉前執行的函數。函數如果返回false將阻止對話方塊關閉。請注意這不是關閉按鈕的回呼函數，無論何種方式關閉對話方塊，closeFn都將執行。show Boolean true 是否顯示對話方塊 配置全域預設設定:(function (config) { config['lock'] = true; config['fixed'] = true; config['yesText'] = 'yes'; config['noText'] = 'no'; // [more..] })(art.dialog.defaults);配置參數範例 內容 [content]1. 傳入字串art.dialog({ content: '我支援HTML' }); 2. 傳入HTMLElement備忘：1、元素不是複製而是完整移動到對話方塊中，所以原有的事件與屬性都將會保留 2、如果隱藏元素被傳入到對話方塊，會設定display:block屬性顯示該元素 3、對話方塊關閉的時候元素將恢複到原來在頁面的位置，style display屬性也將恢複art.dialog({ content: document.getElementById('demoCode_content_DOM'), id: 'EF893L' }); 3. 進階應用程式：傳入Object並使用“tmpl”模板參數產生內容備忘：拼接字串是一個比較無趣的活兒，而artDialog內部使用一個微型模板引擎解析自身UI架構，你可以通過tmp參數繼續使用它格式化內容。模板支援原生的javascript文法，可進行條件判斷。推薦你嘗試使用type="text/tmpl"的script標籤存放模板，如： var tmpl = document.getElementById('tmpl_demoCode_content').innerHTML; art.dialog({ content: { code: 0, users: ['糖餅', '月月鳥', '水水', '麗麗', '花花', '大叔'], me: '糖餅', web: 'http://www.planeart.cn' }, tmpl: tmpl }); 標題 [title]art.dialog({ title: 'hello world!' }); 確定取消按鈕 [yesFn & noFn]備忘：回呼函數this指向擴充介面，如果返回false將阻止對話方塊關閉art.dialog({ content: '如果定義了回呼函數才會出現相應的按鈕', yesFn: function () { this.title('3秒後自動關閉').time(3); return false; }, noText: '關閉', noFn: true //為true等價於function(){} }); 自訂按鈕 [button]備忘：回呼函數this指向擴充介面，如果返回false將阻止對話方塊關閉；button參數對應的控制介面名稱也是"button"art.dialog({ id: 'testID', content: 'hello world!', button: [ { name: '同意', callback: function () {this.content('你同意了').time(2); return false; }, focus: true }, { name: '不同意', callback: function () {alert('你不同意') } }, { name: '無效按鈕', disabled: true }, { name: '關閉我' } ] }); 定時關閉的訊息 [time]art.dialog({ time: 2, content: '兩秒後關閉' }); 防止重複彈出 [id]art.dialog({ id: 'testID', content: '再次點擊運行看看' }); art.dialog({id: 'testID'}).title('3秒後關閉').time(3); 定義訊息表徵圖 [icon]內建表徵圖：alert、succeed、error、confirmart.dialog({ icon: 'succeed', content: '我可以定義訊息表徵圖哦' }); 內容與邊界填充邊距 [padding]有時候並不需要預設的內容填充邊距，如展示圖片與視頻art.dialog({ padding: 0, title: false, content: '<img src="./images/photo.jpg" width="379" height="500" />', lock: true }); 鎖屏 [lock & background & opacity]art.dialog({ lock: true, background: '#600', // 背景色 opacity: 0.7, // 透明度 content: '中斷使用者在對話方塊以外的互動，展示重要操作與訊息', icon: 'error', yesFn: function () { art.dialog({content: '再來一個鎖屏', lock:true}); return false; }, noFn: true }); 跟隨元素 [follw]1、標準形式art.dialog({ follow: document.getElementById('followTestBtn'), content: '讓對話方塊跟著某個元素，一個元素同時只能出現一個對話方塊' }); 2、使用簡寫形式 （已經綁定onclick事件，注意此傳回值不再是對話方塊控制介面）art('#demoCode_follow_a').dialog({ content: '讓對話方塊跟著某個元素，一個元素同時只能出現一個對話方塊' });元素觸發 自訂座標 [left & top]art.dialog({ left: 100, top: '60%', content: '我改變座標了' }); 建立一個右下角浮動的訊息視窗art.dialog({ id: 'msg', title: '公告', content: 'hello world!', width: 320, height: 240, left: '100%', top:'100%', fixed: true, drag: false, resize: false }) 設定大小 [width & height]art.dialog({ width: '20em', height: 55, content: '尺寸可以帶單位' }); 建立一個全屏對話方塊art.dialog({ width: '100%', height: '100%', left: '0%', top: '0%', fixed: true, resize: false, drag: false }) 靜止定位 [fixed]art.dialog({ fixed: true, content: '請拖動捲軸查看' }); 不許拖拽 [drag & resize]art.dialog({ drag: false, resize: false, content: '禁止拖拽' }); 控制介面 名稱 描述close() 關閉對話方塊show() 顯示對話方塊hide() 隱藏對話方塊title(value) 寫入標題。無參數則返回標題容器元素content(value) 向訊息容器中寫入內容。參數支援字串、DOM對象，無參數則返回內容容器元素button(arguments) 插入一個自訂按鈕。如：button({name: '登入', callback: function () {_form.submit();}) 更多用法請見範例文檔follow(element) 讓對話方塊吸附到指定元素附近position(left, top) 重新置放對話方塊size(width, height) 重新設定對話方塊大小lock() 鎖屏unlock() 解鎖time(val) 定時關閉（單位秒）備忘：控制介面傳回值都是this，因此你可以使用鏈式編程風格。控制介面範例 控制介面可以在對話方塊初始化後控制對話方塊，需要有一定的javascript基礎，這裡不做過多示範。擷取控制介面：直接引用控制介面var dialog = art.dialog({ title: '我是對話方塊', content: '我是初始化的內容' }); dialog.content('對話方塊內容被控制介面改變了').title('提示'); 擷取控制介面：使用對話方塊IDart.dialog({ id: 'KDf435', title: '警告', content: '我是初始化的內容' }); art.dialog.list['KDf435'].content('對話方塊內容被控制介面改變了').time(2); 擷取控制介面：this引用art.dialog({ title: '警告', content: '我是初始化的內容', yesFn: function () { this.content('你點了確定按鈕').position('50%', null).lock().time(2); return false; }, initFn: function () { this.content('對話方塊內容被控制介面改變了'); } }); 示範四關閉頁面所有對話方塊var list = art.dialog.list; for (var i in list) { list[i].close(); }; 按鈕介面示範備忘：回呼函數如果返回false將阻止對話方塊關閉var dialog = art.dialog({ title: '警告', content: '點擊管理按鈕將讓刪除按鈕可用', width: '20em', button: [{ name: '管理', callback: function () { this.content('我更改了刪除按鈕').button({ name: '刪除', disabled:false }); return false; }, focus: true }] }); dialog.button( { name: '刪除', callback: function () {alert('remove') }, disabled: true } ) 改變關閉方式art.dialog({ id: 'show-hide', content: '關閉後阻止對話方塊被刪除，只隱藏對話方塊', closeFn: function () {this.hide(); return false; } }).show(); AJAX進階應用程式：執行HTML片段中特殊script標籤HTML片段中的<script type="text/dialog"></script>標籤包裹的javascript將會在對話方塊中執行，其this指向對話方塊控制介面，代碼在閉包內執行，不會影響全域，這樣可以進一步實現內容模組化。(本例子使用了AJAX，需要在伺服器上運行。可開啟 ./ajaxContent/login.html查看源碼中的自訂指令碼)var dialog = art.dialog({id: 'N3690'}); // jQuery ajax $.ajax({ url: './ajaxContent/login.html', success:function (data) { dialog.content(data); }, cache: false }); 擴充：iframe應用工具集 名稱 描述核心方法art.dialog.parent 擷取artDialog可用最高層window對象。這與直接使用window.top不同，它能排除artDialog對象不存在已經或者頂層頁面為框架組的情況這是iframe應用工具集中的核心方法，你可以用它來操作父頁面對象（包括上面的對話方塊）art.dialog.data(name, value) 跨架構資料共用寫入介面。架構與架構之間以及與首頁面之間進行資料交換是非常頭疼的事情，常規情況下你必須知道架構的名稱才能進行資料交換，如果是在複雜的多層架構下操作簡直就是噩夢。而data方法就是為瞭解決這個問題，你完全不用管架構層級問題，它可以寫入任何類型的資料，而做到各個頁面之間資料共用。art.dialog.data(name) 跨架構資料共用讀取介面。指定name即返回資料，任何引用了artDialog的頁面都有效art.dialog.removeData(name) 跨架構資料共用刪除介面。刪除指定名稱的資料，任何引用了artDialog的頁面都有效非同步資料對話方塊art.dialog.open(url, options, cache) 建立一個iframe頁面參數: 地址, 配置參數, 緩衝開關(預設true)art.dialog.open.api iframe頁面擷取open方法控制介面。 (注意這個iframe中也必須引用artDialog指令檔)art.dialog.open.origin iframe頁面擷取open方法觸發來源頁面window對象。 (注意這個iframe中也必須引用artDialog指令檔)art.dialog.close() iframe頁面關閉open方法建立的對話方塊的捷徑。close方法等同於：var api = art.dialog.open.api;api && api.close(); (注意這個iframe中也必須引用artDialog指令檔)art.dialog.load(url, options, cache) Ajax載入內容參數：地址, 配置參數, 緩衝開關(預設true)基礎互動對話方塊art.dialog.alert(content) 警告訊息 (同時只允許一個alert)參數: 內容art.dialog.confirm(content, yesFn, noFn) 確認 (同時只允許一個confirm)參數: 內容, 確定按鈕回呼函數, 取消按鈕回呼函數art.dialog.prompt(content, yesFn, value) 提問 (同時只允許一個prompt)參數: 內容, 確定按鈕回呼函數, 文字框預設值art.dialog.tips(content, time) 短暫提示(同時只允許一個tips)參數: 內容、顯示時間(單位秒, 預設1.5)自訂art.dialog.through(options) 建立一個普通可穿越架構的對話方塊不鼓勵直接使用window.top這樣的方式穿越，這樣可能因為對話方塊觸發頁面重設導致其產生所有的對象在記憶體中被清空，而讓對話方塊無法關閉，所以你應該用這個安全的方法建立自訂對話方塊。框架組頁面無法覆蓋第三方元素，不過可以使用一個iframe套住框架組頁面就可以正常使用，見下面示範文檔