PHPCMS系統使用的彈出窗口插件artDialog


來源:

 

http://aui.github.io/artDialog/doc/index.html  (官方)

http://lab.seaning.com/

http://www.mb5u.com/jscode/html/ajax/426_artDialog2_0_4/

 

artDialog是一個基於javascript編寫的對話框組件,它擁有精致的界面與友好的接口

自適應內容
artDialog的特殊UI框架能夠適應內容變化,甚至連外部程序動態插入的內容它仍然能自適應,因此你不必去考慮消息內容尺寸使用它。它的消息容器甚至能夠根據寬度讓文本居中或居左對齊——這一切全是XHTML+CSS原生實現。
完善的接口
它的接口完善,可以輕易與外部程序配合使用。如異步寫入消息、控制位置、尺寸、顯示與隱藏、關閉等。
細致的體驗
如果不是在輸入狀態,它支持Esc快捷鍵關閉;可指定在元素附近彈出,讓操作更便捷;智能給按鈕添加焦點;黃金比例垂直居中;超大響應區域特別為ipad等觸屏設備優化;預先緩存皮膚圖片更快響應……
跨平台兼容
兼容:IE6+、Firefox、Chrome、Safari、Opera以及iPad等移動設備。並且IE6下也能支持現代瀏覽器的靜止定位( fixed)、覆蓋下拉控件、alpha通道png背景。

快速入門

一、使用傳統的參數

art.dialog(content, ok, cancel)

art.dialog('簡單愉悅的接口,強大的表現力,優雅的內部實現', function(){alert('yes');});

二、使用字面量傳參

art.dialog(options)

var dialog = art.dialog({ title: '歡迎', content: '歡迎使用artDialog對話框組件!', icon: 'succeed', follow: document.getElementById('btn2'), ok: function(){ this.title('警告').content('請注意artDialog兩秒后將關閉!').lock().time(2); return false; } }); 

更多配置參數用法請查閱API文檔: ./_doc/API.html#options

三、擴展方法

需要對彈出后的對話框操作?artDialog簡單實用的擴展方法可以使這一切變得簡單。

如在ajax異步操作中,我們可以先定義一個變量引用對話框返回的擴展方法:

var myDialog = art.dialog();// 初始化一個帶有loading圖標的空對話框 jQuery.ajax({ url: 'http://web5.qq.com/content?id=1', success: function (data) { myDialog.content(data);// 填充對話框內容 } }); 

如果需要使用程序控制關閉,可以使用"close"方法關閉對話框:

myDialog.close();

更多擴展方法用法請查閱API文檔: ./_doc/API.html#API

插件:框架應用工具

artDialog針對CMS類的框架應用提供了專屬插件,如穿越框架、iframe、AJAX、跨框架傳值操作等。

例: 使用open方法嵌入頁面,並使用data方法在各個iframe間傳遞數據:

var val = document.getElementById('demoInput04-3').value; art.dialog.data('test', val); art.dialog.data('homeDemoPath', './_doc/'); // 此時 iframeA.html 頁面可以使用 art.dialog.data('test') 獲取到數據,如: // document.getElementById('aInput').value = art.dialog.data('test'); art.dialog.open('./_doc/iframeA.html'); 

請輸入測試文字:  

插件更多功能請查閱API文檔: ./iframeTop.html

jQuery + artDialog

artDialog提供了一個jQuery版本,功能與標准版一致,調用只需要把art前綴改成jQuery的命名空間。

// 普通調用 $.dialog({content:'hello world!'}); // 使用選擇器方式,此時自動使用綁定了live click事件,同時啟用follow模式 $('#main .test').dialog({content: 'hello world'});

(最低兼容jquery1.3.2,但框架應用插件需要jquery1.4+運行[?])

聯系

注意!artDialog4+即將停止維護,在框架滿天飛的時代結束后,其歷史使命已經完成。新版本 artDialog 5+很小,卻依然動人。若要遷移,請拋棄iframe,使用ajax技術。

如果你對artDialog有什么意見建議可以用下面任意一種聯系方式找到作者。artDialog一直在不斷完善自身,這個愉悅的過程中感謝有你的參與~

提交BUG必備項:1、瀏覽器名稱,版本 2、artDialog版本號(只支持4+版本) 3、簡明扼要的描述信息 4、建議提取一份BUG DEMO,這樣解決問題的概率增加300%

如果對使用問題有疑惑,可以前往由 artDialog 愛好者建立的QQ群尋求幫助(前提是先自己閱讀文檔): 44030323

作者:糖餅
郵箱: (僅用作bug提交)
網站:PlaneArt.Cn
微博:t.qq.com/tangbin


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM