最近在做項目的時候需要對很多的頁面進行改造，將已有的頁面已div的形式彈出來，自己在網上找了很多jQuery的插件但是都覺得不夠好，最後發現了一個國產的插件“artDialog”還不錯(支持國產 啊:D )，使用很簡單、上手快、API全！
一、下載
地址：http://code.google.com/p/artdialog/downloads/list
在這裏可以獲取到最新版本的artDialog，目前最新版本是4.1.2
二、應用到項目
1、將下載的zip包解壓後整體copy到項目中
2、在頁面head引入一個js文件
官網地址：http://www.planeart.cn/demo/artDialog/index.html
我只是說下大致怎麼使用，裏面有很多用法和效果，請參考下官方的api文檔
先說下目錄結構吧
我的目錄結構是：
dialog
---artDialog.js
---test.html
skin
---default.css
---green.css
--- ......
然後，在head裏引入js文件
Javascript代碼 ![收藏代碼]()
- <script src="artDialog.js?skin=default"></script>
- //後面的是指使用default皮膚，當前目錄下的skin目錄下面
Javascript代碼 ![收藏代碼]()
- function test(){
- art.dialog({
- content: 'Test artDialog'
- });
- }
Html代碼 ![收藏代碼]()
- <a href="javascript:" onclick="test();">測試</a>
全文：
Html代碼 ![收藏代碼]()
- <html>
- <head>
- <title>test artdialog</title>
- <script src="artDialog.js?skin=default"></script>
- <script type="text/javascript">
- function test(){
- art.dialog({
- content: 'Test artDialog'
- });
- }
- </script>
- </head>
- <body>
- <a href="javascript:" onclick="test();">測試</a>
- </body>
- </html>
大家試下效果吧。
當你要Open一個網頁,或Load,導入iframeTools.js
更多資源:
http://www.planeart.cn/demo/artDialog/_doc/API.html
http://www.planeart.cn/demo/artDialog/_doc/plugin.iframe.html
http://imshare.iteye.com/blog/823859
http://yeyuan.iteye.com/blog/1236279