flatfe.js

这是一个简易的在线通讯簿系统

// ------------------------------
// Flat form elements script
// Purpose: Enable flat form elements on the fly
// Author: Shao Yong
// Date: 2003.10 (r10)
// ------------------------------

// 隐藏可能脚本错误
window.onerror = function () {
	// alert("浏览器在加载网页脚本程序时发生错误。可能是你的浏览器版本较低。" +
	//	"请将你的浏览器升级到 IE5 或 NN6 以上的版本。");
	return true;
	};

// 全局对象
var _Global = new Object();
_Global.boxImages = "images/flat/";
_Global.disabledTextboxBgColor = "#F9F9F3";
_Global.checkboxSize = "13,13";
_Global.radioButtonSize = "12,12";
_Global.version = "0.5.1 Build 304.12.10";
_Global.author = "Shao Yong";
_Global.processAllElements = false;

// 当设置为 false 时, 将禁用扁平样式处理
_Global.enabled = true;

// 平面样式的表单元素
function getBrowser() {
	var n = navigator.appName;
	if (n.indexOf("Internet Explorer") >= 0) return "IE";
	else if (n.indexOf("Netscape") >= 0) return "NN";
	else return "Other";
}

// 获取浏览器支持信息
function getSupport() {
	var uagent = navigator.userAgent;
	var NN = 6, IE = 5;
	if (getBrowser() == "IE") {
		var i = uagent.indexOf("MSIE");
		var j = uagent.substring(i).indexOf(';');
		var v = uagent.substring(i, i + j);
		return parseFloat(v.split(' ')[1]) >= 5 ? true : false;
	} else if (getBrowser() == "NN") {
		var i = uagent.indexOf("Netscape");
		if (i >= 0) {
			var j = uagent.substring(i).indexOf(' ');
			var v = uagent.substring(i, i + j);
			return parseFloat(v.split('/')[1]) >= 6 ? true : false;
		}

		i = uagent.indexOf("Firefox");
		if (i >= 0) {
			var v = uagent.substring(i);
			return parseFloat(v.split('/')[1]) >= 0.9 ? true : false;
		}

		return false;
	} else {
		return false;
	}
}

// 在数组检索数组元素
function arrayIndexOf(_array, _value, _igcase){
	if (_array) {
		var bmatch = false;
		for (var i = 0; i < _array.length; i++) {
			bmatch = _igcase ? (_array[i] == _value) : (_array[i] === _value);
			if (bmatch) return i;
		}
	}
	return -1;
}

// 预载入图像
function preloadImages() {
	var boxScriber = new Array();
	boxScriber[0] = new Array("rbox", "cbox");
	boxScriber[1] = new Array("checked", "unchecked");
	boxScriber[2] = new Array("disabled", "normal", "focus");
	for (var i = 0; i < boxScriber[0].length; i ++) {
		for (j = 0; j < boxScriber[1].length; j ++){
			for (var k = 0; k < boxScriber[2].length; k ++) {
				oImg = new Image();
				oImg.src = _Global.boxImages + boxScriber[0][i] + "_" +
					boxScriber[1][j] + "_" + boxScriber[2][k] + ".gif";
			}
		}
	}
}

// 平面按钮
function flatButton(_el, _state) {
	if (_el) {
		// 初始化按钮边框样式
		var _STYLE_BUTTON_HIGHLIGHT = _el.getAttribute("STYLE_HIGHLIGHT");
		if(!_STYLE_BUTTON_HIGHLIGHT) _STYLE_BUTTON_HIGHLIGHT = "1PX OUTSET #CCCCCC";
		var _STYLE_BUTTON_NORMAL =  _el.getAttribute("STYLE_NORMAL");
		if(!_STYLE_BUTTON_NORMAL) _STYLE_BUTTON_NORMAL = "1PX SOLID #666666";

		var state = _state.toUpperCase();
		
		switch (state) {
		case "NORMAL":
				_el.style.border = _STYLE_BUTTON_NORMAL;
			break;
		case "HIGHLIGHT":
				_el.style.border = _STYLE_BUTTON_HIGHLIGHT;
			break;
		}
	}
}

// 平面文本框
function flatTextbox (_el, _state) {
	if (_el) {
		// 初始化文本框样式
		var _STYLE_TEXTBOX_FOCUS = _el.getAttribute("STYLE_FOCUS");
		if (!_STYLE_TEXTBOX_FOCUS) _STYLE_TEXTBOX_FOCUS = (getBrowser() == "IE")
			? "1PX INSET #D9D9D9" : "1PX INSET #999999";
		var _STYLE_TEXTBOX_HIGHLIGHT = _el.getAttribute("STYLE_HIGHLIGHT");
		if (!_STYLE_TEXTBOX_HIGHLIGHT) _STYLE_TEXTBOX_HIGHLIGHT = "1PX SOLID #FF9900";
		var _STYLE_TEXTBOX_NORMAL = _el.getAttribute("STYLE_NORMAL");
		if (!_STYLE_TEXTBOX_NORMAL) _STYLE_TEXTBOX_NORMAL = "1PX SOLID #666666";
		
		var state = _state.toUpperCase();

		switch (state) {
		case "NORMAL":
			if (!_el.FOCUSED)
				_el.style.border = _STYLE_TEXTBOX_NORMAL;
			break;
		case "HIGHLIGHT":
			if (!_el.FOCUSED)
				_el.style.border = _STYLE_TEXTBOX_HIGHLIGHT;
			break;
		case "FOCUS":
			_el.style.border = _STYLE_TEXTBOX_FOCUS;
			_el.FOCUSED = true;
			var _autoSelected = _el.getAttribute("AUTOSELECT");
			if (!_autoSelected) _autoSelected = "true";
			if (_autoSelected.toLowerCase() != "false") _el.select();
			break;
		case "BLUR":
			_el.style.border = _STYLE_TEXTBOX_NORMAL;
			_el.FOCUSED = false;
			break;
		}
	}
}

// 初始化事件处理程序 IE5+ & NN6+
function initClassHandler() {
	preloadImages();
	var styler = arguments;
	if (_Global.enabled == false) return;
	if (styler.length > 0 && getSupport())
	for (var i = 0; i < document.forms.length; i ++) {
		for (var j = 0; j < document.forms[i].elements.length; j ++) {
			var el = document.forms[i].elements[j];
			// 检查元素类名称是否在处理列表中
			// 样式类名区别大小写
			if (_Global.processAllElements || arrayIndexOf(styler, el.className, false) >= 0
							 || (el.parentNode && arrayIndexOf(styler, el.parentNode.className, false) >= 0)) {
				// 检查元素类型
				var elType = el.type.toUpperCase();
				if (elType == "TEXT" || elType == "PASSWORD" || elType == "TEXTAREA")
					elType = "TEXT"; // 文本框类型
				else if (elType == "BUTTON" || elType == "SUBMIT" || elType == "RESET" ||  elType == "IMAGE")
					elType = "BUTTON"; // 按钮类型
				else if (elType == "CHECKBOX" || elType == "RADIO")
					elType = "OPTION"; //选项类型
				else if (elType == "FILE")
					elType = "BUTTON";
					
				// 为元素绑定事件处理程序
				switch (elType) {
				case "TEXT":
					flatTextbox(el, "NORMAL"); // 激活正常状态
					if (el.disabled) {
						el.style.backgroundColor = _Global.disabledTextboxBgColor;
					} else if (!el.readOnly) {
						el.onfocus = function () {flatTextbox(this, "FOCUS")};
						el.onblur = function () {flatTextbox(this, "BLUR")};
						el.onmouseout = function () {flatTextbox(this, "NORMAL")};
						el.onmouseover = function () {flatTextbox(this, "HIGHLIGHT")};
					}
					if (el.type.toUpperCase() == "TEXTAREA") el.style.overflow = "auto";
					// if (getBrowser() == "NN") el.className = "NN_" + el.className;
				break;
				
				case "BUTTON":
				flatButton(el, "NORMAL"); // 激活正常状态
					if (!el.disabled) {
						el.onmouseout = function () {flatButton(this, "NORMAL")};
						el.onmouseover = function () {flatButton(this, "HIGHLIGHT")};
						if (el.type.toUpperCase() == "RESET") {
							el.onclick = function () {location.reload()};
						}
						// if (getBrowser() == "NN") el.className = "NN_" + el.className;
					}
				break;

				case "OPTION":
					var oContainer = el.parentNode;
					if (oContainer) {
						var img = document.createElement("IMG");
						img.target = el;
						img.title = el.title;
						img.targetName = el.name;
						img.align = "absmiddle";
						check = el.checked ? "checked" : "unchecked";
						state = el.disabled ? "disabled" : "normal";
						el.trigger = img;
						
						if (el.type.toUpperCase() == "RADIO") {
							img.box = "rbox";
							img.width = _Global.radioButtonSize.split(',')[0];
							img.height = _Global.radioButtonSize.split(',')[1];
						} else {
							img.box = "cbox";
							img.width = _Global.checkboxSize.split(',')[0];
							img.height = _Global.checkboxSize.split(',')[1];
						}

						img.src = _Global.boxImages + img.box + '_' + check + '_' + state + ".gif";
						if (el.id) img.id = "img_" + el.id;
						oContainer.insertBefore(img, el);
						el.style.display = "none";
						
						// 添加事件处理程序
						if (!el.disabled) {
							img.onmouseout = function () {flatOptionBox(this, "normal", false)};
							img.onmouseover = function () {flatOptionBox(this, "focus", false)};
							img.onclick = function () {flatOptionBox(this, "focus", true)};
							el.onclick = function () {flatOptionBox(this.trigger, "normal", true)};
						}
					}
				break;
				}
			}
		}
	}
}

// 更新复选框或单选按钮 IE5+ & NN6+
function flatOptionBox(_img, _state, _bfire) {
	if (_bfire) _img.target.click();
	var imgPath = _Global.boxImages;
	check = _img.target.checked ? "checked" : "unchecked";
	_img.src = imgPath + _img.box + "_" + check + "_" + _state + ".gif";

	// 重置所有的单选按钮
	if (_bfire)
	if (_img.box == "rbox") {
		var _di = document.images;
		for (var i = 0; i < _di.length; i++) {
			if (_di[i].target) {
				if (_di[i].targetName == _img.targetName && !_di[i].target.checked) {
					var state = _di[i].target.disabled ? "disabled" : "normal";
					_di[i].src = imgPath + _di[i].box + "_unchecked_" + state + ".gif";
				}
			}
		}
	}
}