基于artDialog的弹出框公共类

       基于artDialog对话框的公共JS类实现,artDialog最新版见附件。加压后将artDialog.js和skins放到一个文件夹下,skins文件夹下包含了artDialog使用的样式信息,在加载artDialog后,会自动加载相应的皮肤样式。弹框要在body元素加载完成后再显示,也可以将弹框js文件放到body之后加载。JQuery使用jquery-1.9.1.js。

       引用代码:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dialog</title>
<script type="text/javascript" src="resources/plugins/jquery-1.9.1.js"></script>
<script type="text/javascript" src="resources/plugins/artDialog.js?skin=default"></script>
</head>
<body>
测试
</body>
<script type="text/javascript" src="resources/plugins/dialog.js"></script>
</html>
 

 

        dialog.js代码:

(function($){
	/**
	 * 弹出窗口抖动效果
	 */
	artDialog.fn.shake = function (){
	    var style = this.DOM.wrap[0].style,
	        p = [4, 8, 4, 0, -4, -8, -4, 0],
	        fx = function () {
	    		var value = p.shift() ;
	            style.marginLeft = value + 'px';
	            if (p.length <= 0) {
	                style.marginLeft = 0;
	                clearInterval(timerId);
	            };
	        };
	    p = p.concat(p.concat(p));
	    timerId = setInterval(fx, 13);
	    return this;
	};
	
	(function(paramObj){
		for ( var key in paramObj) {
			$[key] = function(definedObj){
				return function(customOption){
					//默认dialog属性
					var defaultOptions = {
						fixed : true,
				        lock : true,
				        esc : true,
				        ok: true,
				        time: 3
					} ;
					//如果definedObj为函数则,调用函数对象
					if(typeof definedObj == "function"){
						definedObj = definedObj.apply(null,arguments) ;
					}
					//如果definedObj不是object对象,则返回undefined
					if(typeof definedObj !="object"){
						return ;
					}
					customOption = $.extend(defaultOptions,definedObj,customOption) ;
					//id相同,默认函数的id属性值没有被替换
					if(definedObj.id==customOption.id&&art.dialog.list[definedObj.id]){
						art.dialog.list[definedObj.id].close() ;
					}
					var dialog = art.dialog(customOption) ;
					if(customOption.shake){
						dialog.shake();
					}
					return dialog ;
				};
			}(paramObj[key]) ;
		}
	})({
//		显示对话框
		dialog : {
		},
//		疑问对话框
		question : {
	        id: 'question',
	        icon: 'question',
	        shake : true
	    },
//		警告对话框
	    warn : {
	        id: 'warn',
	        icon: 'warning',
	        shake : true
	    },
//		错误对话框
	    error : {
	        id: 'error',
	        icon: 'error',
	        shake : true
	    },
//		成功对话框
	    success : {
	        id: 'success',
	        icon: 'succeed',
	        shake : true
	    },
//	    success弹出框另外一种定义方法
//	    success : function(option,param){
//	    	return {
//		        id: 'success',
//		        icon: 'succeed',
//		        shake : true
//		    } ;
//	    },
//		弹出确认对话框,不指定id,可以弹出多个
	    confirm : {
			icon : false,
			time : null
	    }
	}) ;
})(jQuery);

//测试代码
//function test1(){
//	$.success({
//		title : "问题",
//		left : "300px",
//		content : "O(∩_∩)O哈哈~" 
//	});
//	setTimeout(function(){
//		$.confirm({
//			title : "确认",
//			left : "0px" ,
//			content : "O(∩_∩)O哈哈~" 
//		});
//	},2000) ;
//}

 

你可能感兴趣的:(artdialog)