最近在做項目的時候需要對很多的頁面進行改造,將已有的頁面已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文件
- <script src="artDialog.js?skin=default"></script>
- //後面的是指使用default皮膚,當前目錄下的skin目錄下面
- function test(){
- art.dialog({
- content: 'Test artDialog'
- });
- }
- <a href="javascript:" onclick="test();">測試</a>
全文:
- <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