artDialog弹窗使用小结

最近在做项目的时候需要对很多的页面进行改造，将已有的页面已div的形式弹出来，自己在网上找了很多jQuery的插件但是都觉得不够好，最后发现了一个国产的插件“artDialog”还不错(支持国产啊:D )，使用很简单、上手快、API全！

一、下载
    地址：http://code.google.com/p/artdialog/downloads/list
    在这里可以获取到最新版本的artDialog，目前最新版本是3.0.4

官方网站： http://www.planeart.cn

二、应用到项目
    1、将下载的zip包解压后整体copy到项目中
    2、在页面head引入一个js文件
   

Js代码  

1. <script src="artDialog3.0.4/artDialog.min.js"></script>  

<script src="artDialog3.0.4/artDialog.min.js"></script>

    3、在页面head设置默认配置（可选）。

 

Js代码  

1.   <script>   
2. // 设置对话框全局默认配置   
3. (function(){   
4.     var d = art.dialog.defaults;   
5.        
6.     // 按需加载要用到的皮肤，数组第一个为默认皮肤   
7.     // 如果只使用默认皮肤，可以不填写skin   
8.     d.skin = ['default', 'chrome', 'facebook', 'aero'];   
9.        
10.     // 支持拖动   
11.     d.drag = true;   
12.        
13.     // 超过此面积大小的对话框使用替身拖动   
14.     d.showTemp = 100000;   
15. })();   
16. </script>  

  <script>
// 设置对话框全局默认配置
(function(){
    var d = art.dialog.defaults;
    
    // 按需加载要用到的皮肤，数组第一个为默认皮肤
    // 如果只使用默认皮肤，可以不填写skin
    d.skin = ['default', 'chrome', 'facebook', 'aero'];
    
    // 支持拖动
    d.drag = true;
    
    // 超过此面积大小的对话框使用替身拖动
    d.showTemp = 100000;
})();
</script>

    4、在自己的js函数里面使用
   

Js代码  

1. function test(){   
2. art.dialog({   
3.  lock: true,   
4.  content: '中断用户在对话框以外的交互，展示重要操作与消息',   
5.  yesFn: function(){   
6.      art.dialog({content: '再来一个锁屏', lock: true});   
7.      return false;   
8.  },   
9.  noFn: true  
10.   
11. }   

   function test(){
   art.dialog({
    lock: true,
    content: '中断用户在对话框以外的交互，展示重要操作与消息',
    yesFn: function(){
        art.dialog({content: '再来一个锁屏', lock: true});
        return false;
    },
    noFn: true
});
   }

   

效果如下：


更多参数配置可以查看下载中自带的API。。

 

 

http://imshare.iteye.com/blog/823859