/*
源码作者: 石不易(Louis Shi)
联系方式: http://www.shibuyi.net
===================================================================================
程序名称: JavaScript 封装库 BETA 3.0 版
迭代版本: BETA 2.0
插件总数: 8 个
库方法数: 20 个
功能总数: 48 个
新增总数: 7 个
删除总数: 0 个
追加功能:
1. 新增“插件库”支持, 可自由扩展网页特效插件
2. 新增“元素节点选择器”, 元素节点操纵简便性大大提升, 可读性加强
3. 新增“HTML DOM 加载”, 节省外部文件加载耗时
4. 库方法: 新增“CSS 处理”, 分离调用代码可读性加强
5. 库方法: 新增“class 处理”, 分离调用代码可读性加强
...
优化功能:
1. 优化节点定位并删除了 name 方式定位, 遵循 W3C 原则
2. 优化节点事件绑定, 集中至“nodeEvent”方法同一调用, 可读性、扩展性、维护性大大加强
3. 库方法: 优化“清除空白节点”, 采用倒序遍历, 删除更加彻底简便
4. 库方法: 优化“清除注释节点”, 采用倒序遍历, 删除更加彻底简便
....
删除功能:
无
*/
// 实例化基础库
$ = function () {
return arguments.length == 0 ? new Base() : new Base(arguments);
};
// 基础库构造方法
var Base = function (nodes) {
this.info = '无节点';
this.elements = [];
if (typeof nodes == 'object') {
var elements = [], node = null;
for (var i = 0; i < nodes.length; i ++) {
node = nodes[i];
if (typeof node == 'string') { // 元素节点选择器
// 全局或局部
if (this.elements.length == 0) this.elements.push(document);
var patternSpace = /[\s\t ]+/;
if (patternSpace.test(node)) { // 多层
node = node.split(patternSpace);
for (var j = 0; j < node.length; j ++) {
if (j == (node.length - 1)) {
elements.push(this.selector(node[j]).getNodes());
} else {
this.selector(node[j]);
}
}
} else { // 单层
elements.push(this.selector(node).getNodes());
}
this.elements = [];
} else if (typeof node == 'object' && (node == window || typeof node.nodeType != 'undefined')) { // 节点对象
this.elements.push(node);
} else if (typeof node == 'function') { // HTML DOM 加载
this.htmlLoaded(node);
}
}
if (typeof elements != 'undefined') {
for (var k = 0; k < elements.length; k ++) {
if (elements[k] instanceof Array) { // 集群
for (var l = 0; l < elements[k].length; l ++) {
if (elements[k][l] != this.info) this.elements.push(elements[k][l]);
}
} else { // 单一
if (elements[k] != this.info) this.elements.push(elements[k]);
}
}
}
}
};
// 获取采集的所有节点
Base.prototype.getNodes = function () {
if (this.elements.length == 0) return this.info;
if (this.elements.length == 1) return this.firstNode();
return this.elements;
};
// 获取采集的首位节点
Base.prototype.firstNode = function () {
if (this.elements.length == 0) return this.info;
return this.elements[0];
};
// 获取采集的末尾节点
Base.prototype.lastNode = function () {
if (this.elements.length == 0) return this.info;
return this.elements[this.elements.length - 1];
};
// 获取 id 元素节点
Base.prototype.getId = function (ids, positioner) {
if (ids instanceof Array) { // 集群
for (var i = 0; i < ids.length; i ++) {
this.getId(ids[i], positioner);
}
} else { // 单一
var selector = null, node = null;
if (typeof positioner != 'undefined') { // 局部
if (typeof positioner == 'object' && typeof positioner.nodeType != 'undefined') {
selector = positioner;
} else {
if (!(selector = Base.positioner(positioner))) return this;
}
} else { // 全局
selector = document;
}
if (selector instanceof Array) { // 集群
for (var j = 0; j < selector.length; j ++) {
node = selector[j].getElementsByTagName('*');
for (var k = 0; k < node.length; k ++) {
if (node[k].id == ids) {
for (var i = 0; i < this.elements.length; i ++) {
if (this.elements[i] == node[k]) return this;
}
this.elements.push(node[k]);
}
}
}
} else { // 单一
// 容错处理
if (typeof selector.getElementById != 'undefined') {
node = selector.getElementById(ids);
if (node === null) return this;
for (var i = 0; i < this.elements.length; i ++) {
if (this.elements[i] == node) return this;
}
this.elements.push(node);
} else {
node = selector.getElementsByTagName('*');
for (var j = 0; j < node.length; j ++) {
if (node[j].id == ids) {
for (var i = 0; i < this.elements.length; i ++) {
if (this.elements[i] == node[j]) return this;
}
this.elements.push(node[j]);
}
}
}
}
}
return this;
};
// 获取 tagName 元素节点
Base.prototype.getTagName = function (tagName, positioner) {
var selector = null, nodes = [];
if (typeof positioner != 'undefined') { // 局部
if (typeof positioner == 'object' && typeof positioner.nodeType != 'undefined') {
selector = positioner;
} else {
if (!(selector = Base.positioner(positioner))) return this;
}
} else { // 全局
selector = document;
}
if (selector instanceof Array) { // 集群
for (var j = 0; j < selector.length; j ++) {
nodes = selector[j].getElementsByTagName(tagName);
for (var i = 0; i < nodes.length; i ++) {
this.elements.push(nodes[i]);
}
}
} else { // 单一
nodes = selector.getElementsByTagName(tagName);
for (var i = 0; i < nodes.length; i ++) {
this.elements.push(nodes[i]);
}
}
return this;
};
// 获取 class 元素节点
Base.prototype.getClass = function (className, positioner) {
var selector = null, nodes = [];
if (typeof positioner != 'undefined') { // 局部
if (typeof positioner == 'object' && typeof positioner.nodeType != 'undefined') {
selector = positioner;
} else {
if (!(selector = Base.positioner(positioner))) return this;
}
} else {// 全局
selector = document;
}
if (selector instanceof Array) { // 集群
for (var j = 0; j < selector.length; j ++) {
nodes = selector[j].getElementsByTagName('*');
for (var i = 0; i < nodes.length; i ++) {
if (Base.hasClass(className, nodes[i])) this.elements.push(nodes[i]);
}
}
} else { // 单一
nodes = selector.getElementsByTagName('*');
for (var i = 0; i < nodes.length; i ++) {
if (Base.hasClass(className, nodes[i])) this.elements.push(nodes[i]);
}
}
return this;
};
// 获取 name 元素节点
Base.prototype.getName = function (name, positioner) {
var selector = null, nodes = [];
if (typeof positioner != 'undefined') { // 局部
if (typeof positioner == 'object' && typeof positioner.nodeType != 'undefined') {
selector = positioner;
} else {
if (!(selector = Base.positioner(positioner))) return this;
}
} else { // 全局
selector = document;
}
if (selector instanceof Array) { // 集群
for (var j = 0; j < selector.length; j ++) {
nodes = selector[j].getElementsByTagName('*');
for (var i = 0; i < nodes.length; i ++) {
if (nodes[i].name == name) this.elements.push(nodes[i]);
}
}
} else { // 单一
// 容错处理
nodes = typeof selector.getElementsByName != 'undefined' ? selector.getElementsByName(name) : selector.getElementsByTagName('*');
for (var i = 0; i < nodes.length; i ++) {
if (nodes[i].name == name) this.elements.push(nodes[i]);
}
}
return this;
};
// 元素节点选择器
Base.prototype.selector = function (node) {
if (typeof node == 'string') {
var nodes = [], elements = [];
var patternId = /([a-z]+)#([\w\-]+)/i;
var patternClass = /([a-z]+)\.([\w\-]+)/i;
var tagName = '', id = '', className = '';
for (var i = 0; i < this.elements.length; i ++) {
switch (node.charAt(0)) {
case '#' : // id
if ((nodes = $().getId(node.substring(1, node.length), this.elements[i]).getNodes()) != this.info) {
elements.push(nodes);
}
break;
case '.' : // class
if ((nodes = $().getClass(node.substring(1, node.length), this.elements[i]).getNodes()) != this.info) {
if (nodes instanceof Array) { // 集群
for (var j = 0; j < nodes.length; j ++) {
elements.push(nodes[j]);
}
} else { // 单一
elements.push(nodes);
}
}
break;
default :
if (patternId.test(node)) { // tagName + id
tagName = patternId.exec(node)[1];
id = patternId.exec(node)[2];
if ((nodes = $().getTagName(tagName, this.elements[i]).getNodes()) != this.info) {
if (nodes instanceof Array) { // 集群
for (var j = 0; j < nodes.length; j ++) {
if (nodes[j].id == id) elements.push(nodes[j]);
}
} else { // 单一
if (nodes.id == id) elements.push(nodes);
}
}
} else if (patternClass.test(node)) { // tagName + class
tagName = patternClass.exec(node)[1];
className = patternClass.exec(node)[2];
if ((nodes = $().getTagName(tagName, this.elements[i]).getNodes()) != this.info) {
if (nodes instanceof Array) { // 集群
for (var j = 0; j < nodes.length; j ++) {
if (Base.hasClass(className, nodes[j])) elements.push(nodes[j]);
}
} else { // 单一
if (Base.hasClass(className, nodes)) elements.push(nodes);
}
}
} else { // tagName
if ((nodes = $().getTagName(node, this.elements[i]).getNodes()) != this.info) {
if (nodes instanceof Array) { // 集群
for (var j = 0; j < nodes.length; j ++) {
elements.push(nodes[j]);
}
} else { // 单一
elements.push(nodes);
}
}
}
}
}
this.elements = elements;
}
return this;
};
// 获取与设置元素内容
Base.prototype.html = function (text) {
var html = [];
for (var i = 0; i < this.elements.length; i ++) {
if (typeof text != 'undefined') { // 设置
this.elements[i].innerHTML = text;
} else { // 获取
html.push(this.elements[i].innerHTML);
}
}
switch (html.length) {
case 0 :
return this;
break;
case 1 :
return html[0];
break;
default :
return html;
}
};
// 获取与设置表单元素内容
Base.prototype.value = function (text) {
var value = [];
for (var i = 0; i < this.elements.length; i ++) {
if (typeof text != 'undefined') { // 设置
if (typeof this.elements[i].value != 'undefined') this.elements[i].value = text;
} else { // 获取
if (typeof this.elements[i].value != 'undefined') value.push(this.elements[i].value);
}
}
switch (value.length) {
case 0 :
return this;
break;
case 1 :
return value[0];
break;
default :
return value;
}
};
// 获取与设置 CSS
Base.prototype.css = function (cssKey, cssValue) {
if (typeof cssValue != 'undefined' || cssKey instanceof Array) { // 设置
if (cssKey instanceof Array) { // 集群
var patternStyle = /^([a-z]+)[\s\t ]*=[\s\t ]*([\w\(=,\s\.#\/\\\'\"\-\)]+)$/i;
var key = '', value = '';
for (var i = 0; i < cssKey.length; i ++) {
if (patternStyle.test(cssKey[i])) {
key = patternStyle.exec(cssKey[i])[1];
value = patternStyle.exec(cssKey[i])[2];
this.css(key, value);
}
}
} else { // 单一
for (var i = 0; i < this.elements.length; i ++) {
if (typeof this.elements[i].style[cssKey] != 'undefined') {
this.elements[i].style[cssKey] = cssValue;
}
}
}
} else { // 获取
var css = [], style = '';
for (var i = 0; i < this.elements.length; i ++) {
if (typeof (style = Tool.getStyle(cssKey, this.elements[i])) != 'undefined') css.push(style);
}
switch (css.length) {
case 0 :
return this;
break;
case 1 :
return css[0];
break;
default :
return css;
break;
}
}
return this;
};
// 添加 class 选择器
Base.prototype.addClass = function (className) {
if (className instanceof Array) { // 集群
for (var i = 0; i < className.length; i ++) {
this.addClass(className[i]);
}
} else { // 单一
var space = '';
for (var i = 0; i < this.elements.length; i ++) {
space = this.elements[i].className != '' ? ' ' : space;
if (!Base.hasClass(className, this.elements[i])) this.elements[i].className += space + className;
}
}
return this;
};
// 移除 class 选择器
Base.prototype.removeClass = function (className) {
if (className instanceof Array) { // 集群
for (var i = 0; i < className.length; i ++) {
this.removeClass(className[i]);
}
} else { // 单一
var node = null;
for (var i = 0; i < this.elements.length; i ++) {
node = this.elements[i];
if (Base.hasClass(className, node)) {
node.className = node.className.replace(new RegExp('(^|\\s+)' + className + '(\\s+|$)'), ' ');
node.className = Base.trim(node.className);
}
}
}
return this;
};
// 添加样式规则
Base.prototype.addRule = function (ruleName, ruleText, rulePosition, sheetIndex) {
if (ruleName instanceof Array) { // 集群
if (!(ruleText instanceof Array) || ruleName.length != ruleText.length) return this;
for (var i = 0; i < ruleName.length; i ++) {
if (ruleName[i] && ruleText[i]) this.addRule(ruleName[i], ruleText[i], rulePosition, sheetIndex);
}
} else { // 单一
var rule = Base.checkRule(rulePosition, sheetIndex);
if (typeof rule.sheet != 'undefined') {
var nameTotal = Tool.ruleNameTotal(rule.sheet);
for (var i = 0; i < nameTotal.length; i ++) {
if (nameTotal[i] == ruleName) return this;
}
Tool.addRule(rule.sheet, ruleName, ruleText, rule.position);
}
}
return this;
};
// 移除样式规则
Base.prototype.removeRule = function (rulePosition, ruleNumber, sheetIndex) {
var rule = Base.checkRule(rulePosition, sheetIndex, ruleNumber);
if (typeof rule.sheet != 'undefined') {
for (var i = 0; i < rule.number; i ++) {
Tool.removeRule(rule.sheet, rule.position);
}
}
return this;
};
// 节点事件绑定
Base.prototype.nodeEvent = function (eventName, method, mode) {
if (typeof eventName != 'string' || typeof method != 'function') return this;
eventName = eventName.toLowerCase();
if (eventName.indexOf('on') == 0) eventName = eventName.substring(2, eventName.length);
if (typeof mode == 'undefined') mode = true;
for (var i = 0; i < this.elements.length; i ++) {
switch (eventName) {
case 'mousewheel' :
Tool.mousewheel(this.elements[i], method, mode);
break;
default :
mode ? Tool.loginEvent(this.elements[i], eventName, method) : Tool.logoutEvent(this.elements[i], eventName, method);
}
}
return this;
};
// HTML DOM 加载
Base.prototype.htmlLoaded = function (method) {
if (typeof method == 'function') Tool.htmlLoaded(method);
return this;
};
// 加载特效插件
Base.prototype.plugins = function (pluginName, pluginMethod) {
if (pluginName instanceof Array) { // 集群
if (!(pluginMethod instanceof Array) || pluginName.length != pluginMethod.length) return false;
for (var i = 0; i < pluginName.length; i ++) {
this.plugins(pluginName[i], pluginMethod[i]);
}
} else { // 单一
if (typeof pluginName == 'string' && typeof pluginMethod == 'function') {
Base.prototype[pluginName] = pluginMethod;
}
}
return this;
};
/*
库方法集合
*/
// 库方法: 清除两边空格
Base.trim = function (string) {
if (typeof string != 'string') return string;
var patternLeft = /^[\s\t ]+/;
var patternRight = /[\s\t ]+$/;
if (patternLeft.test(string)) string = string.replace(patternLeft, '');
if (patternRight.test(string)) string = string.replace(patternRight, '');
return string;
};
// 库方法: 检测样式规则
Base.checkRule = function (rulePosition, sheetIndex, ruleNumber) {
if (typeof rulePosition != 'number') rulePosition = 0;
if (typeof sheetIndex != 'number') sheetIndex = 0;
if (typeof ruleNumber != 'number') ruleNumber = 1;
var sheetObject = undefined;
var sheetTotal = document.styleSheets.length;
if (sheetTotal != 0 && sheetIndex <= (sheetTotal - 1)) { // 兼容 IE 6/7/8 防止 unknown
sheetObject = document.styleSheets[sheetIndex];
}
if (typeof sheetObject != 'undefined') {
var ruleTotal = Tool.ruleTotal(sheetObject);
if (rulePosition > ruleTotal) rulePosition = ruleTotal;
var maxNumber = ruleTotal - rulePosition;
if (ruleNumber > maxNumber) ruleNumber -= ruleNumber - maxNumber;
}
return {
position : rulePosition,
sheet : sheetObject,
number : ruleNumber
}
};
// 库方法: 检测 class
Base.hasClass = function (className, elementNode) {
return (new RegExp('(^|\\s+)' + className + '(\\s+|$)')).test(elementNode.className);
}
// 库方法: 元素节点定位器(局部搜索)
Base.positioner = function (positioner) {
if (typeof positioner != 'string') return false;
var nodes = [];
var patternId = /^id\s*=\s*([\w\-]+)$/i;
var patternTag = /^tag(Name)?\s*=\s*([a-z]+)$/i;
var patternClass = /^class(Name)?\s*=\s*([\w\-]+)$/i;
if (patternTag.test(positioner)) { // tagName
positioner = patternTag.exec(positioner)[2];
nodes = $().getTagName(positioner).getNodes();
} else if (patternClass.test(positioner)) { // class
positioner = patternClass.exec(positioner)[2];
nodes = $().getClass(positioner).getNodes();
} else if (patternId.test(positioner)) { // id
positioner = patternId.exec(positioner)[1];
nodes = $().getId(positioner).getNodes();
} else { // id
nodes = $().getId(positioner).getNodes();
}
if (nodes == $().info) return false;
return nodes;
};
// 库方法: 获取元素从属关系(直接从属)
Base.hasChild = function (elementNode, targetNode) {
var childs = targetNode.childNodes;
for (var i = 0; i < childs.length; i ++) {
if (childs[i].nodeType == 1 && childs[i] == elementNode) return true;
}
return false;
};
// 库方法: 清除空白节点
Base.clear = function (elementNode) {
var childs = elementNode.childNodes;
var length = childs.length;
for (var i = (length - 1); i >= 0; i --) {
if (childs[i].nodeType == 3 && /^[\s\t ]+$/.test(childs[i].nodeValue)) elementNode.removeChild(childs[i]);
}
return elementNode;
};
// 库方法: 清除注释节点
Base.comment = function (elementNode) {
var childs = elementNode.childNodes;
var length = childs.length;
for (var i = (length - 1); i >= 0; i --) {
if (childs[i].nodeType == 8) {
elementNode.removeChild(childs[i]);
}
}
return elementNode;
};
// 库方法: 字符串删减
Base.replace = function (string, index) {
if (typeof string != 'string') return string;
if (string.indexOf(index) != -1) string = string.replace(new RegExp(index, 'ig'), '');
return string;
};
// 库方法: 添加元素节点
Base.addElement = function (elementName, attributes, html, targetNode) {
var elementNode = document.createElement(elementName);
if (typeof attributes == 'string' || attributes instanceof Array) this.addAttribute(attributes, elementNode);
if (typeof html != 'undefined') $(elementNode).html(html);
if (typeof targetNode != 'undefined') {
if (!(typeof targetNode == 'object' || targetNode.nodeType == 1)) {
if (!(targetNode = this.positioner(targetNode))) targetNode = document.body;
}
} else {
targetNode = document.body;
}
if (targetNode instanceof Array) { // 集群
for (var i = 0; i < targetNode.length; i ++) {
targetNode[i].appendChild(elementNode.cloneNode(true));
}
} else { // 单一
targetNode.appendChild(elementNode);
}
return elementNode;
};
// 库方法: 添加属性节点
Base.addAttribute = function (attributes, elementNode) {
if (attributes instanceof Array) { // 集群
for (var i = 0; i < attributes.length; i ++) {
this.addAttribute(attributes[i], elementNode);
}
} else { // 单一
if (typeof attributes != 'string') return false;
var patternAttribute = /^([a-z]+)[\s\t ]*=[\s\t ]*([\w,\(#=:\s\.\/\\\'\";\-\)]+)$/i;
var key = '', value = '';
if (patternAttribute.test(attributes)) {
key = patternAttribute.exec(attributes)[1];
value = patternAttribute.exec(attributes)[2];
var patternClass = /^class(Name)?$/i, className = [];
if (key == 'style') { // CSS
this.style(value, elementNode);
} else if (patternClass.test(key)) { // class
this.addClass(value, elementNode);
} else {
elementNode.setAttribute(key, value);
}
}
}
};
// 库方法: CSS 处理
Base.style = function (css, elementNode) {
var split = /;[\s\t ]*/i;
if (split.test(css)) { // 集群
css = css.split(split);
for (var i = 0; i < css.length; i ++) {
this.style(css[i], elementNode);
}
} else { // 单一
var patternCSS = /^([a-z]+)[\s\t ]*:[\s\t ]*([\w\(=\s\.,\/\\\'#\"\-\)]+)$/i, cssKey = '', cssValue = '';
if (patternCSS.test(css)) {
cssKey = patternCSS.exec(css)[1];
cssValue = patternCSS.exec(css)[2];
$(elementNode).css(cssKey, cssValue);
}
}
};
// 库方法: class 处理
Base.addClass = function (className, elementNode) {
var split = /[\s\t ]+/;
if (split.test(className)) {
className = className.split(split);
for (var i = 0; i < className.length; i ++) {
this.addClass(className[i], elementNode);
}
} else {
$(elementNode).addClass(className);
}
};
// 库方法: 移除元素节点
Base.removeElement = function (elementNode, targetNode) {
if (!(typeof elementNode == 'object' || elementNode.nodeType == 1)) {
if (!(elementNode = this.positioner(elementNode))) return false;
}
if (typeof targetNode == 'undefined' || !(typeof targetNode == 'object' || targetNode.nodeType == 1)) {
if (!(targetNode = this.positioner(targetNode))) targetNode = document.body;
}
if (targetNode instanceof Array) { // 集群
for (var i = 0; i < targetNode.length; i ++) {
this.removeElement(elementNode, targetNode[i]);
}
} else { // 单一
if (elementNode instanceof Array) { // 集群
for (var i = 0; i < elementNode.length; i ++) {
this.removeElement(elementNode[i], targetNode);
}
} else { // 单一
if (this.hasChild(elementNode, targetNode)) targetNode.removeChild(elementNode);
}
}
};
// 库方法: 初始化滚动条
Base.initializationScroll = function () {
Tool.scrollLeft(0);
Tool.scrollTop(0);
};
// 库方法: 设置与获取滚动条
Base.scroll = function (x, y) {
if (typeof x != 'number' && typeof y != 'number') { // 获取
return {
x : Tool.scrollLeft(),
y : Tool.scrollTop()
}
}
if (typeof x == 'number') { // 设置x轴
Tool.scrollLeft(x);
}
if (typeof y == 'number') { // 设置y轴
Tool.scrollTop(y);
}
};
// 库方法: 获取网页可视区尺寸
Base.getWindowRectangle = function () {
return {
width : Tool.getWindowWidth(),
height : Tool.getWindowHeight()
}
};
// 库方法: 获取元素尺寸
Base.getInnerRectangle = function (elementNode) {
var width = 0, height = 0, display = '', _this = null;
_this = $(elementNode);
display = _this.css('display');
width = _this.css('width');
height = _this.css('height');
if (width == 'auto' || height == 'auto') { // IE 6/7/8
if (display == 'none') _this.show();
width = elementNode.offsetWidth;
height = elementNode.offsetHeight;
}
width = this.replace(width, 'px');
height = this.replace(height, 'px');
return {
width : width,
height : height
};
};
// 库方法: 获取元素外边距尺寸
Base.getOuterRectangle = function (elementNode) {
this.absolute(elementNode);
var left = 0, top = 0, display = '', _this = null;
_this = $(elementNode);
display = _this.css('display');
left = _this.css('left');
top = _this.css('top');
if (left == 'auto' || top == 'auto') { // IE 6/7/8
if (display == 'none') _this.show();
left = elementNode.offsetLeft;
top = elementNode.offsetTop;
}
left = this.replace(left, 'px');
top = this.replace(top, 'px');
return {
left : left,
top : top
};
};
// 库方法: 设置元素绝对定位
Base.absolute = function (elementNode) {
var _this = $(elementNode);
if (_this.css('position') != 'absolute') _this.css(['position = absolute', 'left = 0', 'top = 0']);
};
// 库方法: 固定锁屏区域(修正浏览器Bug)
Base.fixed = function () {
// IE Bug 修正
var down = function () {
var move = function (event) {
event.preventDefault();
};
var up = function () {
$('#screen').nodeEvent('mousemove', move, false);
$('#screen').nodeEvent('mouseup', up, false);
};
$('#screen').nodeEvent('mousemove', move);
$('#screen').nodeEvent('mouseup', up);
};
$('#screen').nodeEvent('mousedown', down);
// Chrome Bug 修改
$('#screen').nodeEvent('mousewheel', function (event) {
event.preventDefault();
});
};
/*
源码作者: 石不易(Louis Shi)
联系方式: http://www.shibuyi.net
===================================================================================
程序名称: JavaScript 工具库(跨浏览器兼容) BETA 3.0 版
迭代版本: BETA 2.0
功能总数: 18 个
新增总数: 2 个
删除总数: 0 个
追加功能:
1. 新增“跨浏览器获取样式规则名称集合”
2. 新增“跨浏览器 HTML DOM 加载”
优化功能:
1. 优化跨浏览器滚动条设置与获取至“scrollLeft”和“scrollTop”方法中
删除功能:
无
*/
// 工具库
var Tool = {
// 数组排序
sort : {
minToMax : function (min, max) {
if (min < max) {
return -1;
} else if (min > max) {
return 1;
} else {
return 0;
}
},
maxToMin : function (min, max) {
if (min < max) {
return 1;
} else if (min > max) {
return -1;
} else {
return 0;
}
}
},
// 跨浏览器获取计算后的样式
getStyle : function (cssKey, elementNode) {
if (typeof window.getComputedStyle != 'undefined') { // W3C
return window.getComputedStyle(elementNode, null)[cssKey];
} else if (typeof elementNode.currentStyle != 'undefined') { // IE 6/7/8
return elementNode.currentStyle[cssKey];
}
},
// 跨浏览器获取样式规则总数
ruleTotal : function (sheetObject) {
if (typeof sheetObject.cssRules != 'undefined') { // W3C
return sheetObject.cssRules.length;
} else if (typeof sheetObject.rules != 'undefined') { // IE 6/7/8
return sheetObject.rules.length;
}
},
// 跨浏览器获取样式规则名称集合
ruleNameTotal : function (sheetObject) {
var nameTotal = [];
if (typeof sheetObject.cssRules != 'undefined') { // W3C
for (var i = 0; i < sheetObject.cssRules.length; i ++) {
nameTotal.push(sheetObject.cssRules[i].selectorText);
}
} else if (typeof sheetObject.rules != 'undefined') { // IE 6/7/8
for (var i = 0; i < sheetObject.rules.length; i ++) {
nameTotal.push(sheetObject.rules[i].selectorText);
}
}
return nameTotal;
},
// 跨浏览器添加样式规则
addRule : function (sheetObject, ruleName, ruleText, rulePosition) {
if (typeof sheetObject.insertRule != 'undefined') { // W3C
sheetObject.insertRule(ruleName + ' {' + ruleText + '}', rulePosition);
} else if (typeof sheetObject.addRule != 'undefined') { // IE 6/7/8
sheetObject.addRule(ruleName, ruleText, rulePosition);
}
},
// 跨浏览器移除样式规则
removeRule : function (sheetObject, rulePosition) {
if (typeof sheetObject.deleteRule != 'undefined') { // W3C
sheetObject.deleteRule(rulePosition);
} else if (typeof sheetObject.removeRule != 'undefined') { // IE 6/7/8
sheetObject.removeRule(rulePosition);
}
},
// IE 6/7/8 事件对象匹配模式
eventMatch : function (event) {
event.target = event.srcElement;
event.stopPropagation = function () {
event.cancelBubble = true;
};
event.preventDefault = function () {
event.returnValue = false;
};
return event;
},
// 事件绑定唯一标识符
eventId : 0,
// 跨浏览器现代事件绑定: 注册事件
loginEvent : function (elementNode, eventName, method) {
if (typeof elementNode.addEventListener != 'undefined') { // W3C
elementNode.addEventListener(eventName, method, false);
} else if (typeof elementNode.attachEvent != 'undefined') { // IE 6/7/8
if (typeof elementNode.hashTable != 'object') elementNode.hashTable = {};
if (typeof elementNode.hashTable[eventName] != 'object') elementNode.hashTable[eventName] = [];
var events = elementNode.hashTable[eventName];
for (var i = 0; i < events.length; i ++) {
if (events[i] == method) return false;
}
events[this.eventId ++] = method;
var _this = this;
elementNode['on' + eventName] = function () {
var event = _this.eventMatch(window.event);
for (var i = 0; i < events.length; i ++) {
if (typeof events[i] == 'function') events[i].call(this, event);
}
};
}
},
// 跨浏览器现代事件绑定: 注销事件
logoutEvent : function (elementNode, eventName, method) {
if (typeof elementNode.removeEventListener != 'undefined') { // W3C
elementNode.removeEventListener(eventName, method, false);
} else if (typeof elementNode.detachEvent != 'undefined') { // IE 6/7/8
if (typeof elementNode.hashTable == 'object' && typeof elementNode.hashTable[eventName] == 'object') {
var events = elementNode.hashTable[eventName];
for (var i = 0; i < events.length; i ++) {
if (events[i] == method) delete events[i];
}
}
}
},
// 跨浏览器鼠标滚轮事件
mousewheel : function (elementNode, method, mode) {
if (elementNode == window) elementNode = document; // IE 6/7/8
if (typeof elementNode.onmousewheel != 'undefined') { // Not Firefox
mode ? this.loginEvent(elementNode, 'mousewheel', method) : this.logoutEvent(elementNode, 'mousewheel', method);
} else { // Firefox
mode ? this.loginEvent(elementNode, 'DOMMouseScroll', method) : this.logoutEvent(elementNode, 'DOMMouseScroll', method);
}
},
// 跨浏览器 HTML DOM 加载
htmlLoaded : function (method) {
if ((browserDetect.opera && browserDetect.browser.version < 9)
||
(browserDetect.firefox && browserDetect.browser.version < 3)
||
(browserDetect.engine.name == 'WebKit' && browserDetect.engine.version < 525)) { // low version W3C
var timer = setTimeout(function () {
clearTimeout(timer);
/interactive|loading|complete/i.test(document.readyState) ? method() : timer = setTimeout(arguments.callee, 1);
}, 1);
} else if (!browserDetect.ie || browserDetect.browser.version > 8) { // current W3C
var _this = this;
this.loginEvent(document, 'DOMContentLoaded', function () {
_this.logoutEvent(document, 'DOMContentLoaded', arguments.callee);
method();
});
} else if (browserDetect.ie && browserDetect.browser.version < 9) { // IE 6/7/8
var timer = setTimeout(function () {
try {
clearTimeout(timer);
document.documentElement.doScroll('top');
method();
} catch (error) {
timer = setTimeout(arguments.callee, 1);
}
}, 1);
}
},
// 跨浏览器获取元素从属关系(间接从属+直接从属)
getContains : function (elementNode, targetNode) {
if (typeof targetNode.compareDocumentPosition != 'undefined') { // W3C
return targetNode.compareDocumentPosition(elementNode) == 20;
} else if (typeof targetNode.contains != 'undefined') { // IE 6/7/8
return targetNode.contains(elementNode);
}
},
// 跨浏览器获取与设置滚动条x轴
scrollLeft : function (x) {
if (browserDetect.engine.name == 'WebKit') { // Chrome / Safari
if (typeof x != 'undefined') { // 设置
document.body.scrollLeft = x;
} else { // 获取
return document.body.scrollLeft;
}
} else { // Not Chrome / Safari
if (typeof x != 'undefined') { // 设置
document.documentElement.scrollLeft = x;
} else { // 获取
return document.documentElement.scrollLeft;
}
}
},
// 跨浏览器获取与控制滚动条y轴
scrollTop : function (y) {
if (browserDetect.engine.name == 'WebKit') { // Chrome / Safari
if (typeof y != 'undefined') { // 设置
document.body.scrollTop = y;
} else { // 获取
return document.body.scrollTop;
}
} else { // Not Chrome / Safari
if (typeof y != 'undefined') { // 设置
document.documentElement.scrollTop = y;
} else { // 获取
return document.documentElement.scrollTop;
}
}
},
// 跨浏览器获取网页x轴可视区域尺寸
getWindowWidth : function () {
if (typeof window.innerWidth != 'undefined') { // W3C
return window.innerWidth;
} else if (typeof document.documentElement.clientWidth != 'undefined') { // IE 6/7/8
return document.documentElement.clientWidth;
}
},
// 跨浏览器获取网页y轴可视区域尺寸
getWindowHeight : function () {
if (typeof window.innerHeight != 'undefined') { // W3C
return window.innerHeight;
} else if (typeof document.documentElement.clientHeight) { // IE 6/7/8
return document.documentElement.clientHeight;
}
},
// IE 专属: 浏览器外捕获鼠标按下
setCaptureIE : function (elementNode) {
if (typeof elementNode.setCapture != 'undefined') { // IE
elementNode.setCapture();
}
},
// IE 专属: 浏览器外捕获鼠标弹起
releaseCaptureIE : function (elementNode) {
if (typeof elementNode.releaseCapture != 'undefined') { // IE
elementNode.releaseCapture();
}
}
};
/*
源码作者: 石不易(Louis Shi)
联系方式: http://www.shibuyi.net
===================================================================================
程序名称: 浏览器嗅探器 BETA 3.0
版本迭代: 无
功能总数: 4 个
功能介绍:
1. 支持浏览器品牌嗅探
2. 支持浏览器名称/版本嗅探
3. 支持浏览器引擎名称/版本嗅探
4. 支持浏览器隶属平台名称/版本嗅探
*/
(function () {
window.browserDetect = {
ie : false,
firefox : false,
chrome : false,
safari : false,
opera : false,
other : false,
browser : {
name : '',
version : ''
},
engine : {
name : '',
version : ''
},
system : {
name : '',
version : ''
}
};
var info = navigator.userAgent;
var system = navigator.platform;
/*
Browser pattern
*/
// check IE
var patternIE = /MSIE\s([\d\.]+)/i;
var patternHighIE = /rv:([\d\.]+)/i;
// check Firefox
var patternFirefox = /Firefox\/([\d\.]+)/i;
// check Chrome
var patternChrome = /Chrome\/([\d\.]+)/i;
// check Safari
var patternSafari = /Safari\/([\d\.]+)/i;
// check Opera
var patternOpera = /Opera\/([\d\.]+)/i;
/*
Engine pattern
*/
// check Trident
var patternTrident = /Trident\/([\d\.]+)/i;
// check Gecko
var patternGecko = /Gecko\/(\d+)/i;
// check WebKit
var patternWebKit = /AppleWebKit\/([\d\.]+)/i;
// check Presto
var patternPresto = /Presto\/([\d\.]+)/i;
/*
System pattern
*/
// check Windows
var patternWindows = /Windows\sNT\s([\d\.]+)/i;
var patternWin = /Win/i;
// check Linux
var patternLinux = /Linux/i;
// check Unix
var patternUnix = /X11/i;
// check Mac
var patternMac = /Mac/i;
/*
Check browser
*/
if ((low = patternIE.test(info)) || (high = patternTrident.test(info))) { // IE
browserDetect.ie = true;
browserDetect.browser.name = 'Internet Explorer';
browserDetect.engine.name = 'Trident';
if (low) { // IE 6 - 10
browserDetect.browser.version = parseFloat(patternIE.exec(info)[1]);
} else if (high) { // IE 11+
browserDetect.browser.version = parseFloat(patternHighIE.exec(info)[1]);
}
if (browserDetect.browser.version >= 6.0) {
switch (browserDetect.browser.version) { // engine version
case 6.0 :
browserDetect.engine.version = 2.0;
break;
case 7.0 :
browserDetect.engine.version = 3.0;
break;
default :
browserDetect.engine.version = parseFloat(patternTrident.exec(info)[1]);
}
} else {
browserDetect.engine.version = '2.0-';
}
} else if (patternFirefox.test(info)) { // Firefox
browserDetect.firefox = true;
browserDetect.browser.name = 'Firefox';
browserDetect.browser.version = parseFloat(patternFirefox.exec(info)[1]);
} else if (patternChrome.test(info)) { // Chrome
browserDetect.chrome = true;
browserDetect.browser.name = 'Chrome';
browserDetect.browser.version = parseFloat(patternChrome.exec(info)[1]);
} else if (patternSafari.test(info)) { // Safari
browserDetect.safari = true;
browserDetect.browser.name = 'Safari';
var patternVersion = /Version\/([\d\.]+)/i;
if (patternVersion.test(info)) { // high version
browserDetect.browser.version = parseFloat(patternVersion.exec(info)[1]);
} else { // low version
browserDetect.browser.version = parseFloat(patternSafari.exec(info)[1]);
}
} else if (patternOpera.test(info)) { // Opera
browserDetect.opera = true;
browserDetect.browser.name = 'Opera';
var patternVersion = /Version\/([\d\.]+)/i;
if (patternVersion.test(info)) { // high version
browserDetect.browser.version = parseFloat(patternVersion.exec(info)[1]);
} else { // low version
browserDetect.browser.version = parseFloat(patternOpera.exec(info)[1]);
}
} else { // Other
browserDetect.other = true;
browserDetect.browser.name = 'Other';
browserDetect.browser.version = 'Unknown';
}
/*
Check Engine
*/
if (patternTrident.test(info)) { // Trident
browserDetect.engine.name = 'Trident';
browserDetect.engine.version = parseFloat(patternTrident.exec(info)[1]);
} else if (patternGecko.test(info)) { // Gecko
browserDetect.engine.name = 'Gecko';
var patternVersion = /rv:([\d\.]+)/i;
if (patternVersion.test(info)) { // high version
browserDetect.engine.version = parseFloat(patternVersion.exec(info)[1]);
} else { // low version
browserDetect.engine.version = parseFloat(patternGecko.exec(info)[1]);
}
} else if (patternWebKit.test(info)) { // WebKit
browserDetect.engine.name = 'WebKit';
browserDetect.engine.version = parseFloat(patternWebKit.exec(info)[1]);
} else if (patternPresto.test(info)) { // Presto
browserDetect.engine.name = 'Presto';
browserDetect.engine.version = parseFloat(patternPresto.exec(info)[1]);
} else { // Other
if (browserDetect.other) {
browserDetect.engine.name = 'Other';
browserDetect.engine.version = 'Unknown';
}
}
/*
Check System
*/
if (patternWindows.test(info)) { // Windows
browserDetect.system.version = parseFloat(patternWindows.exec(info)[1]);
switch (browserDetect.system.version) {
case 5.0 :
browserDetect.system.name = 'Windows 2000';
break;
case 5.1 :
browserDetect.system.name = 'Windows XP';
break;
case 5.2 :
browserDetect.system.name = 'Windows Server 2003 / Windows Server 2003 R2';
break;
case 6.0 :
browserDetect.system.name = 'Windows Vista / Windows Server 2008';
break;
case 6.1 :
browserDetect.system.name = 'Windows 7 / Windows Server 2008 R2';
break;
case 6.2 :
browserDetect.system.name = 'Windows 8 / Windows Server 2012 / Windows Phone 8';
break
case 6.3 :
browserDetect.system.name = 'Windows 8.1 / Windows Server 2012 R2';
break;
default :
browserDetect.system.name = 'Windows';
}
} else if (patternWin.test(system)) { // Windows(low version browser)
browserDetect.system.name = 'Windows';
browserDetect.system.version = 'Unknown';
} else if (patternLinux.test(system)) { // Linux
browserDetect.system.name = 'Linux';
browserDetect.system.version = 'Unknown';
} else if (patternUnix.test(system)) { // Unix
browserDetect.system.name = 'Unix';
browserDetect.system.version = 'Unknown';
} else if (patternMac.test(system)) { // Mac
browserDetect.system.name = 'Mac';
browserDetect.system.version = 'Unknown';
} else { // Other
browserDetect.system.name = 'Other';
browserDetect.system.version = 'Unknown';
}
})();
/*
源码作者: 石不易(Louis Shi)
联系方式: http://www.shibuyi.net
===================================================================================
特效插件: 元素隐藏
特效插件: 元素显示
特效插件: 鼠标移入移出(下拉菜单)
*/
$().plugins(['hide', 'show', 'hover'], [function () {
this.css('display', 'none');
return this;
}, function () {
this.css('display', 'block');
return this;
}, function (overMethod, outMethod) {
this.nodeEvent('mouseover', overMethod);
this.nodeEvent('mouseout', outMethod);
return this;
}]);
/*
源码作者: 石不易(Louis Shi)
联系方式: http://www.shibuyi.net
===================================================================================
特效插件: 元素居中
*/
$().plugins('center', function () {
var windowRectangle = Base.getWindowRectangle();
var scroll = Base.scroll();
var innerRectangle = null, x = 0, y = 0;
for (var i = 0; i < this.elements.length; i ++) {
Base.absolute(this.elements[i]);
innerRectangle = Base.getInnerRectangle(this.elements[i]);
x = (windowRectangle.width - innerRectangle.width) / 2;
y = (windowRectangle.height - innerRectangle.height) / 2;
if (x < 0) x = 0;
if (y < 0) y = 0;
$(this.elements[i]).css(['left = ' + (x + scroll.x) + 'px', 'top = ' + (y + scroll.y) + 'px']);
}
return this;
});
/*
源码作者: 石不易(Louis Shi)
联系方式: http://www.shibuyi.net
===================================================================================
特效插件: 遮罩锁屏
特效插件: 清除遮罩
*/
$().plugins(['lock', 'unlock'], [function () {
var screen = null;
if ((screen = $('#screen').firstNode()) != this.info) {
if (Base.trim($(Base.comment(screen)).html()) != '') {
Base.removeElement(screen);
screen = Base.addElement('div', 'id = screen');
}
} else {
screen = Base.addElement('div', 'id = screen');
}
var scroll = Base.scroll();
$('html').css('overflow', 'hidden');
Base.scroll(scroll.x, scroll.y);
var windowRectangle = Base.getWindowRectangle();
Base.absolute(screen);
$(screen).css([
'width = ' + windowRectangle.width + 'px',
'height = ' + windowRectangle.height + 'px',
'left = ' + scroll.x + 'px',
'top = ' + scroll.y + 'px',
'backgroundColor = black',
'zIndex = 9998',
'opacity = 0.4', // W3C
'filter = alpha(opacity = 40)' // IE 6/7/8
]).show();
Base.fixed(); // 修正 Bug
return this;
}, function () {
var screen = null;
if ((screen = $('#screen').firstNode()) == this.info) return this;
var scroll = Base.scroll();
$('html').css('overflow', 'auto');
Base.scroll(scroll.x, scroll.y);
$(screen).hide();
return this;
}]);
/*
源码作者: 石不易(Louis Shi)
联系方式: http://www.shibuyi.net
===================================================================================
特效插件: 元素拖拽
*/
$().plugins('drag', function () {
var selector = null, childs = [];
for (var j = 0; j < this.elements.length; j ++) {
if (arguments.length != 0) {
for (var i = 0; i < arguments.length; i ++) {
if ((selector = $(this.elements[j]).selector(arguments[i]).getNodes()) == this.info) continue;
childs.push(selector);
}
}
if (childs.length == 0) childs.push(this.elements[j]);
var targetNode = this.elements[j];
Base.absolute(targetNode);
var down = function (event) {
var scroll = Base.scroll();
var outerRectangle = Base.getOuterRectangle(targetNode);
var fixedX = (event.clientX + scroll.x) - outerRectangle.left;
var fixedY = (event.clientY + scroll.y) - outerRectangle.top;
var windowRectangle = Base.getWindowRectangle();
var innerRectangle = Base.getInnerRectangle(targetNode);
Tool.setCaptureIE(targetNode); // 兼容 IE Bug
var move = function (event) {
var x = (event.clientX + scroll.x) - fixedX;
var y = (event.clientY + scroll.y) - fixedY;
var minX = scroll.x, minY = scroll.y, maxX = 0, maxY = 0;
maxX = (windowRectangle.width + scroll.x) - innerRectangle.width;
maxY = (windowRectangle.height + scroll.y) - innerRectangle.height;
if (x < minX) x = minX; else if (x > maxX) x = maxX;
if (y < minY) y = minY; else if (y > maxY) y = maxY;
$(targetNode).css(['left = ' + x + 'px', 'top = ' + y + 'px']);
};
var up = function () {
Tool.releaseCaptureIE(targetNode); // 兼容 IE Bug
$(document).nodeEvent('mousemove', move, false);
$(document).nodeEvent('mouseup', up, false);
};
$(document).nodeEvent('mousemove', move);
$(document).nodeEvent('mouseup', up);
};
for (var k = 0; k < childs.length; k ++) {
if (childs[k] instanceof Array) { // 集群
for (var l = 0; l < childs[k].length; l ++) {
$(childs[k][l]).nodeEvent('mousedown', down);
}
} else { // 单一
$(childs[k]).nodeEvent('mousedown', down);
}
}
}
return this;
});
/*
源码作者: 石不易(Louis Shi)
联系方式: http://www.shibuyi.net
===================================================================================
特效插件: 禁止元素溢出可视区
*/
$().plugins('overflow', function () {
var windowRectangle = Base.getWindowRectangle();
var scroll = Base.scroll();
var minX = scroll.x, minY = scroll.y, maxX = 0, maxY = 0, x = 0, y = 0;
var innerRectangle = null, outerRectangle = null;
for (var i = 0; i < this.elements.length; i ++) {
Base.absolute(this.elements[i]);
innerRectangle = Base.getInnerRectangle(this.elements[i]);
outerRectangle = Base.getOuterRectangle(this.elements[i]);
x = outerRectangle.left;
y = outerRectangle.top;
maxX = (windowRectangle.width + scroll.x) - innerRectangle.width;
maxY = (windowRectangle.height + scroll.y) - innerRectangle.height;
if (x < minX) x = minX; else if (x > maxX) x = maxX;
if (y < minY) y = minY; else if (y > maxY) y = maxY;
$(this.elements[i]).css(['left = ' + x + 'px', 'top = ' + y + 'px']);
}
return this;
});
关于 BETA 3.0 测试版核心源码与实例演示的获取请移动至官网下载！
感谢大家积极评测给予意见！
CNBlogs 博客：http://www.cnblogs.com/shibuyi/
CSDN 博客：http://blog.csdn.net/louis_shi/
ITeye 博客：http://shibuyi.iteye.com/
相关推荐
JavaScript 封装库：BETA 4.0 版
intel appframework3.0测试版 jqmobi3.0测试版 App Framework 3.0和前面的版本比较有很大的变动。当本项目于2011开启之后，一直聚焦于修正系统的bug（比如安卓平台上的 CSS3 变换）、提供一个可靠的 scrolling ...
百度地图离线版3.0，添加卫星地图
大华摄像头视频监控OCX控件 WEB3.0.接口说明 DEMO源码 终于测试成功了，web3.0通过这些文档调用没问题。JavaScript
vue3.0实现下拉菜单的封装 vue3.0出来已经有段时间的了，也与必要开始研究它了！ 先看下我们要实现的效果 很常见的展开显示菜单项的内容，在vue3.0里面怎么开发，这里样式我们用的是bootstrap的默认样式 思路一...
NULL 博文链接：https://cfeng-feng.iteye.com/blog/1296955
最新版Ｊａｖａｓｃｒｉｐｔ库！支持Ｃｏｏｋｉｅ、Ａｊａｘ、ＢｌｏｃｋＵＩ and so on.
这里是html5、css3.0和javascript的参考文档，包含了多个不同的版本，可以根据自己的需要下载使用。
:sparkles: 拖放编码环境样板它旨在成为一个存储库，使基于Scratch-3.0组件的GUI的使用和部署变得简单！ 它可能适用于： 开发不符合当前扩展限制的原型Scratch 3.0扩展尝试对Scratch 3.0 GUI进行调整快速部署Scratch...
javascript与actionscript3.0通信实例 兼容firewor程序
此文档包含html5.0 css3.0 javascript 都是中文版
css3.0和javascript参考手册 可以学习一下啊
HTML UI控件 推荐3款javascript封装库+UI界面控件,当然少不了鼎鼎大名的jQuery
完美的javascript+css3效果控制
arcgis for javascript 4.0beta3 api.
JavaScript经典封装,国内外 JavaScript 经典封装
vue3.0手动封装分页组件的方法 本文实例为大家分享了vue3.0手动封装分页组件的具体代码，供大家参考，具体内容如下 1.父组件引入 src/views/goods/components/goods-comment.vue <!-- page表示初始化分页时，...
本资源包含html5手册、CSS2.0和CSS3.0手册、JavaScript手册。非常适合前端开发工程师们参考~~
vue3.0实现复选框组件的封装 本文实例为大家分享了vue3.0实现复选框组件封装的具体代码，供大家参考，具体内容如下 大致步骤： 实现组件本身的选中与不选中效果 实现组件的v-model指令 改造成 @vueuse/core ...
Action script 3.0 编程高清晰版电子书