JavaScript插件系列——artDialog 5.0.4 使用示例

 

artDialog 是一个精心设计的对话框控件，它拥有精致的界面与易用的编程接口。

演示与文档：

http://aui.github.com/artDialog/

  1 //弹出层函数，调用artDialog5.0.4
  2 /**
  3  * 弹出ajax页面
  4  * @param url 获取页面的地址
  5  * @param string warning 弹出消息
  6  * @param title 弹出页面的标题
  7  * @param zindex 弹出页面的zindex
  8  */
  9 function artPage(url,param,title,zindex){
 10     if(!isDefined(title)) title="";
 11     if(!isDefined(param)) param=[];
 12     if(!isDefined(zindex)) zindex=300;
 13     var dialog=art.dialog({
 14         id:"artPage",
 15         title:title,
 16         fixed:true,
 17         lock:true,
 18         zIndex:zindex
 19     });
 20     if($("#art_page_div").length==0){
 21         $("#wrap").append("<div id='art_page_div' class='hidden'></div>");
 22     }
 23     $("#art_page_div").load(url,param,function(){
 24         dialog.content(document.getElementById('art_page_div'));
 25     });
 26 }
 27 /**
 28  * 警告弹出层
 29  * @param string warning 弹出消息
 30  * @param callback 回调函数
 31  */
 32 function artWarning(warning,callback){
 33     var dialog=artBase(warning,"warning");
 34     dialog.title("警告");
 35     dialog.button({
 36         id:'close',
 37         value:'',
 38         callback:callback
 39     });
 40 }
 41 /**
 42  * 操作成功弹出层
 43  * @param string success 弹出消息
 44  * @param int time 显示弹出层的毫秒，0表示常显示
 45  * @param callback 点击确定触发的函数
 46  */
 47 function artSuccess(success,time,callback){
 48     if(isEmpty(time)) time=0;
 49     var dialog=artBase(success,"succeed");
 50     dialog.time(time);
 51     dialog.button({
 52         id:'close',
 53         value:'确定',
 54         callback:callback
 55     });
 56 }
 57 /**
 58  * 错误弹出层
 59  * @param string error 弹出消息
 60  * @param callback 点击关闭触发的函数
 61  */
 62 function artError(error,callback){
 63     var dialog=artBase(error,"error");
 64     dialog.title("错误");
 65     dialog.button({
 66         id:'close',
 67         value:'关闭',
 68         callback:callback
 69     });
 70 }
 71 /**
 72  * 提示弹出层，弹出层标题隐藏
 73  * @param string tip 弹出消息
 74  */
 75 function artTip(tip,time,callback){
 76     var dialog=artBase(tip,"succeed",function(){
 77         $(".d-header").css("display","none");
 78     },function(){
 79         return false;
 80     });
 81     dialog.lock();
 82     if(isEmpty(time)) time=0;
 83     dialog.time(time);
 84     if(time>0){
 85         setInterval(callback,time/1.5);//避免延迟
 86     }
 87 }
 88 /**
 89  * 确认弹出层
 90  * @param confirm
 91  * @param success
 92  * @param error
 93  */
 94 function artConfirm(confirm,success,error,title){
 95     var dialog=artBase(confirm,"question");
 96     if(!isEmpty(title)) dialog.title(title);
 97     if(isEmpty(success)){
 98         success=function(){
 99             return true;
100         };
101     }
102     if(isEmpty(error)){
103         error=function(){
104             return true;
105         };
106     }
107     dialog.button({
108         id:"success",
109         value:"确认",
110         callback:success
111     },{
112         id:"cancel",
113         value:"取消",
114         callback:error
115     });
116 }
117 /**
118  * 弹出层基本配置
119  * @param string icon 图标名称
120  * @param string info 提示信息
121  * @param function initialize 初始化函数
122  * @param function close 关闭时函数
123  */
124 function artBase(info,icon,initialize,close){
125     var content="";
126     if(!isEmpty(icon)){
127         content="<div style='float:left'><img src='/Public/Img/Common/icons/"+icon+".png'></div>";
128     };
129     content+="<div style='float:left;margin-left:10px;line-height: 42px;'>"+info+"</div>";
130     var dialog=art.dialog({
131         id:"dialog",
132         title:"提示",
133         content:content,
134         fixed:true,
135         lock:true,
136         padding:"20px 30px",
137         initialize:initialize,
138         beforeunload:close
139     });
140     return dialog;
141 }

 

转载于:https://www.cnblogs.com/JunJiang/p/3358229.html