封裝常用的js(base.js)——【05】自定義彈出框.封裝水平垂直居中center(),和resize() .

原文鏈接：http://www.cnblogs.com/henw/archive/2011/12/19/2293585.html

需求：自定義一個彈出登陸框的界面，主要特點有隱藏hide()，顯示show()，瀏覽器窗口改變大小觸發事件resize(),計算屏幕居中位置等功能。

//設置物體居中
Base.prototype.center=function(width,height){
	var top=(document.documentElement.clientHeight-height)/2;
	var left=(document.documentElement.clientWidth-width)/2;
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].style.top=top+'px';
		this.elements[i].style.left=left+'px';
	}
	return this;
}

//當瀏覽器改變窗口大小的時候，觸發事件
Base.prototype.resize=function(){
	window.onresize=fn;
	return this;
}


/*
前臺調用

var login=$().getId('login');
//登錄框
login.center(350,250).resize(function(){
	login.center(350,250);	
});
//彈出登錄框
$().getClass('login').click(function(){
	login.css('display','block');
});
//登錄框關閉按鈕
$().getClass('close').click(function(){
	login.css('display','none');
});

*/

基礎庫：

//前臺調用
var $ = function (_this) {
	return new Base(_this);
}

//基礎庫
function Base(_this) {
	//創建一個數組，來保存獲取的節點和節點數組
	this.elements = [];
	if (_this != undefined) {    //_this是一個對象，undefined也是一個對象，區別與typeof返回的帶單引號的'undefined'
		this.elements[0] = _this;
	}
}

//獲取ID節點
Base.prototype.getId = function (id) {
	this.elements.push(document.getElementById(id));
	return this;
};

//獲取元素節點數組
Base.prototype.getTagName = function (tag) {
	var tags = document.getElementsByTagName(tag);
	for (var i = 0; i < tags.length; i ++) {
		this.elements.push(tags[i]);
	}
	return this;
};

//獲取CLASS節點數組
Base.prototype.getClass = function (className, idName) {
	var node = null;
	if (arguments.length == 2) {
		node = document.getElementById(idName);
	} else {
		node = document;
	}
	var all = node.getElementsByTagName('*');
	for (var i = 0; i < all.length; i ++) {
		if (all[i].className == className) {
			this.elements.push(all[i]);
		}
	}
	return this;
}

//獲取某一個節點
Base.prototype.getElement = function (num) {	
	var element = this.elements[num];
	this.elements = [];
	this.elements[0] = element;
	return this;
};

//設置CSS
Base.prototype.css = function (attr, value) {
	for (var i = 0; i < this.elements.length; i ++) {
		if (arguments.length == 1) {
			if (typeof window.getComputedStyle != 'undefined') {//W3C
				return window.getComputedStyle(this.elements[i], null)[attr];
			} else if (typeof this.elements[i].currentStyle != 'undeinfed') {//IE
				return this.elements[i].currentStyle[attr];
			}
		}
		this.elements[i].style[attr] = value;
	}
	return this;
}

//添加Class
Base.prototype.addClass = function (className) {
	for (var i = 0; i < this.elements.length; i ++) {
		if (!this.elements[i].className.match(new RegExp('(\s|^)' +className +'(\s|$)'))) {
			this.elements[i].className += ' ' + className;
		}
	}
	return this;
}

//移除Class
Base.prototype.removeClass = function (className) {
	for (var i = 0; i < this.elements.length; i ++) {
		if (this.elements[i].className.match(new RegExp('(\s|^)' +className +'(\s|$)'))) {
			this.elements[i].className = this.elements[i].className.replace(new RegExp('(\s|^)' +className +'(\s|$)'), ' ');
		}
	}
	return this;
}

//添加link或style的CSS規則
Base.prototype.addRule = function (num, selectorText, cssText, position) {
	var sheet = document.styleSheets[num];
	if (typeof sheet.insertRule != 'undefined') {//W3C
		sheet.insertRule(selectorText + '{' + cssText + '}', position);
	} else if (typeof sheet.addRule != 'undefined') {//IE
		sheet.addRule(selectorText, cssText, position);
	}
	return this;
}

//移除link或style的CSS規則
Base.prototype.removeRule = function (num, index) {
	var sheet = document.styleSheets[num];
	if (typeof sheet.deleteRule != 'undefined') {//W3C
		sheet.deleteRule(index);
	} else if (typeof sheet.removeRule != 'undefined') {//IE
		sheet.removeRule(index);
	}
	return this;
}

//設置innerHTML
Base.prototype.html = function (str) {
	for (var i = 0; i < this.elements.length; i ++) {
		if (arguments.length == 0) {
			return this.elements[i].innerHTML;
		}
		this.elements[i].innerHTML = str;
	}
	return this;
}

//設置鼠標移入移出方法
Base.prototype.hover = function (over, out) {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].onmouseover = over;
		this.elements[i].onmouseout = out;
	}
	return this;
};

//設置顯示
Base.prototype.show = function () {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].style.display = 'block';
	}
	return this;
}

//設置隱藏
Base.prototype.hide = function () {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].style.display = 'none';
	}
	return this;
}

//設置物體居中
Base.prototype.center = function (width, height) {
	var top = (document.documentElement.clientHeight - height) / 2;
	var left = (document.documentElement.clientWidth - width) / 2;
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].style.top = top + 'px';
		this.elements[i].style.left = left + 'px';
	}
	return this;
}

//觸發點擊事件
Base.prototype.click = function (fn) {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].onclick = fn;
	}
	return this;
}

//觸發瀏覽器窗口事件
Base.prototype.resize = function (fn) {
	window.onresize = fn;
	return this;
}