artDialog.js的使用(引用http://www.2cto.com/kf/201303/195812.html，artDialog基本使用)

一、artDialog是什麼

二、artDialog的使用

以下內容引用 http://www.2cto.com/kf/201303/195812.html，artDialog基本使用，詳細內容有調整和更改。

三、配置參數

配置全局預設設置

配置參數範例

• 內容 [content]

  1. 傳入字元串 art.dialog({ content: '我支持HTML' }); 2. 傳入HTMLElement art.dialog({ content: document.getElementById('demoCode_content_DOM'), id: 'EF893L' }); 備註：1)元素不是複製而是完整移動到對話框中，所以原有的事件與屬性都將會保留；2)如果隱藏元素被傳入到對話框，會設置display:block屬性顯示該元素；3)對話框關閉的時候元素將恢復到原來在頁面的位置，style display屬性也將恢復。 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]

  art.dialog({ content: '如果定義了回調函數才會出現相應的按鈕', yesFn: function () { this.title('3秒後自動關閉').time(3); return false; }, noText: '關閉', noFn: true //為true等價於function(){} }); 備註：回調函數this指向擴展介面，如果返回false將阻止對話框關閉。

• 自定義按鈕 [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: '關閉我' } ] }); 備註：回調函數this指向擴展介面，如果返回false將阻止對話框關閉；button參數對應的控制介面名稱也是"button"。

• 定時關閉的消息 [time]

  art.dialog({ time: 2, content: '兩秒後關閉' });

• 防止重覆彈出 [id]

  art.dialog({ id: 'testID', content: '再次點擊運行看看' }); art.dialog({id: 'testID'}).title('3秒後關閉').time(3);

• 定義消息圖標 [icon]

  art.dialog({ icon: 'succeed', content: '我可以定義消息圖標哦' }); 內置圖標：alert、succeed、error、confirm

• 內容與邊界填充邊距 [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: '禁止拖拽' });

四、控制介面

控制介面範例

• 獲取控制介面：直接引用控制介面

  var dialog = art.dialog({ title: '我是對話框', content: '我是初始化的內容' }); dialog.content('對話框內容被控制介面改變了').title('提示');

• 獲取控制介面：使用對話框ID

  art.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指向對話框控制介面，代碼在閉包內執行，不會影響全局，這樣可以進一步實現內容模塊化。 var dialog = art.dialog({id: 'N3690'}); // jQuery ajax $.ajax({ url: './ajaxContent/login.html', success:function (data) { dialog.content(data); }, cache: false }); (本例子使用了AJAX，需要在伺服器上運行。)

五、擴展：iframe應用工具集

－－－－－－－－－－－－－－－－－－－－－－－分割線－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

感謝作者整理。