查看完整内容

/**
 * [$ 常用特效封装]
 * @author 张建林
 * @datetime 2016-07-13T13:52:54+0800
 * @version  1.0
 * @return   {[type]}                 [description]
 */
var $ = function() {
	return new Base();
};

function Base() {

}

Base.prototype.elements = [];
//根据id获得节点
// Base.prototype.getById = function(id) {
// 	var eleId = document.getElementById(id);
// 	this.elements.push(getElementById);
// };

/*
	获得一个弹出容器
	conf：自定义的属性的对象
 */
Base.prototype.getWapper = function(conf) {
	var source = {
		contentWidth: "300px",
		contentHeight: "250px",
		contentBorder: "1px solid #ccc",
		contentBg: "#f8f8f8",
		contentShadow: "1px 2px 8px #b1b1b1",
		borderRadius: "3px"
	};
	var setting = this.extend(conf, source);
	var content = document.createElement('div');
	document.body.appendChild(content);
	content.setAttribute("id", "loadContentId");
	//获得容器的节点
	var contentId = document.getElementById("loadContentId");
	contentId.style.cssText = 'border-radius:'+setting.borderRadius+';border:' + setting.contentBorder + ';width:' + setting.contentWidth + ';height:' + setting.contentHeight + ';margin:0px auto;box-shadow:' + setting.contentShadow + ';position:absolute;background:' + setting.contentBg;
	//获得屏幕的宽度
	var initheight = document.documentElement.clientHeight || window.innerHeight || window.screen.height;
	var initwidth = document.documentElement.clientWidth || window.innerWidth || window.screen.width;
	//获得创建节点的高度和宽度
	var dialogContentWidth = contentId.clientHeight;
	var dialogConetWidth = contentId.clientWidth;
	var v_h = initheight / 2 - dialogContentWidth / 2 + "px";
	var v_w = initwidth / 2 - dialogConetWidth / 2 + "px";
	contentId.style.top = v_h;
	contentId.style.left = v_w;
	window.onresize = function() {
		var height = document.documentElement.clientHeight || window.innerHeight || window.screen.height;
		var width = document.documentElement.clientWidth || window.innerWidth || window.screen.width;
		var h = height / 2 - dialogContentWidth / 2 + "px";
		var w = width / 2 - dialogConetWidth / 2 + "px";
		contentId.style.top = h;
		contentId.style.left = w;
	};
	this.elements.push(contentId);
	return this;
};


/*
	把新对象复制给原对象（但是注意，这个是破会了原对象的）
	target：目标对象
	source：原对象
 */
Base.prototype.extend = function(target, source) {
	if (arguments[1] !== undefined) {
		for (var p in target) {
			if (source.hasOwnProperty(p)) {
				source[p] = target[p];
			}
		}
		return source;
	} else {
		return source;
	}
};

/*
   加载效果
   imgPath:图片的路径
 */
Base.prototype.onload = function(imgPath,title){
	var eles = this.elements,
		len = eles.length;
	if(eles.length>0){
		for(var i=0;i<len;i++){
			var ele = eles[i],
				loadCont = document.createElement('div'),
				loadImg = document.createElement('img'),
				loadTitle = document.createElement('div'),
				text = document.createTextNode(title);
			ele.appendChild(loadCont);
			loadTitle.style.cssText = 'text-align:center;color:#6f6f6f;font-size:15px';
			loadCont.style.cssText = 'position:absolute;top:31%;left:41%;display:inline-block;';
			arguments[0] !== undefined && loadCont.appendChild(loadImg) && loadImg.setAttribute('src',imgPath);
			arguments[1] !== undefined && loadCont.appendChild(loadTitle) && loadTitle.appendChild(text);
		}
	}
	return this;
};

/*
  带有确认，取消
 */
Base.prototype.confirm = function(imgPath,fn,message){
	var eles = this.elements,
		len = eles.length;
	if(eles.length>0){
		for(var i=0;i<len;i++){
			var ele = eles[i],
			    wapperButton = document.createElement('div'),
				iconImg = document.createElement("img");
				iconTitle = document.createElement("span");
				iconTitleCont = document.createTextNode("你确定要删除吗？");
			for(var j = 0;j<2;j++){
				var button = document.createElement('span'),
					buttonStyle = 'padding:5px 24px 5px;margin:0px 5px;display: inline-block;line-height: 22px;float:right;cursor:pointer';
				wapperButton.appendChild(button);
				j === 0 && button.appendChild(document.createTextNode('确认')) || (button.style.cssText='background:#03A9F4;color:#fff;'+buttonStyle);
				j === 1 && button.appendChild(document.createTextNode('取消')) || (button.style.cssText='background:#efae4d;color:#fff;'+buttonStyle);
			}
			iconImg.setAttribute('src',imgPath);
			iconImg.style.cssText='width:50px;height:50px;margin:27px;float: left;';
			ele.appendChild(iconImg);
			ele.appendChild(iconTitle);
			iconTitle.appendChild(iconTitleCont);
			iconTitle.style.cssText='line-height: 104px;display: inline-block;'
			ele.appendChild(wapperButton);
			wapperButton.style.cssText = 'position:absolute;bottom:0px;width:100%;bottom:7px;padding-top: 5px;border-top: 1px solid #ccc;';
		}
	}
	return this;
};