1 /* 2 源码作者: 石不易(Louis Shi) 3 联系方式: http://www.shibuyi.net 4 =================================================================================================== 5 程序名称: JavaScript 封装库 BETA 1.0 版 6 迭代版本: Prototype 7 功能总数: 44 个 8 新增总数: 30 个 9 删除总数: 0 个 10 追加功能: 11 1. 元素隐藏与显示 12 2. 表单 value 属性获取 13 3. 实现 mouseover / mouseout / mousemove / mousedown / mouseup / scroll / resize / load / mousewheel 等事件 14 4. 实现 元素居中 / 下拉菜单 / 元素拖拽 / 遮罩锁屏 / 禁止溢出 等特效 15 ... 16 优化功能: 17 1. 实现元素节点直传 18 2. 完善 id 多节点获取 19 3. 完善 css 设置, 支持滤镜 20 4. 完善 class 选择器, 支持多选择器添加和移除 21 5. 完善 rule 样式规则, 支持多规则的添加和移除 22 6. 实现二级子方法 23 7. 实现代码分层至 Tool 工具库 24 ... 25 删除功能: 26 无 27 */ 28 29 // 实例化封装库 30 function $(_this) { 31 return new Base(_this); 32 } 33 34 // 封装库构造方法 35 function Base(_this) { 36 this.elements = []; // 初始化元素列表 37 if (typeof _this == ‘object‘) this.elements.push(_this); 38 } 39 40 // 获取元素节点 41 Base.prototype.getNodes = function () { 42 if (this.elements.length == 0) return ‘暂无任何元素节点‘; 43 if (this.elements.length == 1) return this.elements[0]; 44 return this.elements; 45 }; 46 47 // 获取 id 元素节点 48 Base.prototype.getId = function (id) { 49 if (id instanceof Array) { // 集群 50 for (var i = 0; i < id.length; i ++) { 51 this.getId(id[i]); 52 } 53 } else { // 单个 54 var node = {}; 55 node = document.getElementById(id); 56 if (!node) return this; 57 for (var i = 0; i < this.elements.length; i ++) { 58 if (this.elements[i] == node) return this; 59 } 60 this.elements.push(node); 61 } 62 return this; 63 }; 64 65 // 获取 name 元素节点 66 Base.prototype.getName = function (name, positionId) { 67 var nodes = {}; 68 if (typeof positionId != ‘undefined‘) { // 局部 69 nodes = $().getTagName(‘*‘, positionId).getNodes(); 70 } else { // 全局 71 nodes = document.getElementsByName(name); 72 } 73 for (var i = 0; i < nodes.length; i ++) { 74 if (nodes[i].name == name) this.elements.push(nodes[i]); 75 } 76 return this; 77 }; 78 79 // 获取 tagName 元素节点 80 Base.prototype.getTagName = function (tagName, positionId) { 81 var nodes = {}; 82 if (typeof positionId != ‘undefined‘) { // 局部 83 nodes = $().getId(positionId).getNodes().getElementsByTagName(tagName); 84 } else { // 全局 85 nodes = document.getElementsByTagName(tagName); 86 } 87 for (var i = 0; i < nodes.length; i ++) { 88 this.elements.push(nodes[i]); 89 } 90 return this; 91 }; 92 93 // 获取 class 元素节点 94 Base.prototype.getClass = function (className, positionId) { 95 var nodes = {}, results = []; 96 if (typeof positionId != ‘undefined‘) { // 局部 97 nodes = $().getTagName(‘*‘, positionId); 98 results = $().getClass.hasClass.call(nodes, className); 99 } else { // 全局 100 nodes = $().getTagName(‘*‘); 101 results = $().getClass.hasClass.call(nodes, className); 102 } 103 nodes = nodes.getNodes(); 104 for (var i = 0; i < results.length; i ++) { 105 if (results[i]) this.elements.push(nodes[i]); 106 } 107 return this; 108 }; 109 110 // getClass 附属方法: 检测 class 111 Base.prototype.getClass.hasClass = function (className) { 112 var results = []; 113 for (var i = 0; i < this.elements.length; i ++) { 114 results.push((new RegExp(‘(^|\\s+)‘ + className + ‘(\\s+|$)‘)).test(this.elements[i].className)); 115 } 116 return results; 117 }; 118 119 // 获取与设置 innerHTML(双标记) 120 Base.prototype.html = function (text) { 121 if (typeof text != ‘undefined‘) { // 设置 122 for (var i = 0; i < this.elements.length; i ++) { 123 this.elements[i].innerHTML = text; 124 } 125 } else { // 获取 126 var html = []; 127 for (var i = 0; i < this.elements.length; i ++) { 128 html.push(this.elements[i].innerHTML); 129 } 130 if (html.length == 1) return html[0]; 131 return html; 132 } 133 return this; 134 }; 135 136 // 获取与设置 value(表单) 137 Base.prototype.value = function (text) { 138 if (typeof text != ‘undefined‘) { // 设置 139 for (var i = 0; i < this.elements.length; i ++) { 140 if (typeof this.elements[i].value != ‘undefined‘) this.elements[i].value = text; 141 } 142 } else { // 获取 143 var value = []; 144 for (var i = 0; i < this.elements.length; i ++) { 145 if (typeof this.elements[i].value != ‘undefined‘) value.push(this.elements[i].value); 146 } 147 if (value.length == 1) return value[0]; 148 return value; 149 } 150 return this; 151 }; 152 153 // 获取与设置 CSS 154 Base.prototype.css = function (cssKey, cssValue) { 155 if (typeof cssValue != ‘undefined‘ || cssKey instanceof Array) { // 设置 156 if (cssKey instanceof Array) { // 集群 157 var _cssKey = ‘‘, _cssValue = ‘‘, pattern = /^\s*([a-z]+)\s*=\s*([\w#=\s\(\.\)\-\‘\"\/\\]+)\s*$/i; 158 for (var i = 0; i < cssKey.length; i ++) { 159 if (pattern.test(cssKey[i])) { 160 _cssKey = pattern.exec(cssKey[i])[1]; 161 _cssValue = pattern.exec(cssKey[i])[2]; 162 for (var j = 0; j < this.elements.length; j ++) { 163 this.elements[j].style[_cssKey] = _cssValue; 164 } 165 } 166 } 167 } else { // 单个 168 for (var i = 0; i < this.elements.length; i ++) { 169 this.elements[i].style[cssKey] = cssValue; 170 } 171 } 172 } else { // 获取 173 var css = [], _cssValue = ‘‘; 174 for (var i = 0; i < this.elements.length; i ++) { 175 _cssValue = Tool.getStyle(this.elements[i], cssKey); 176 if (typeof _cssValue != ‘undefined‘) css.push(_cssValue); 177 } 178 if (css.length == 1) return css[0]; 179 return css; 180 } 181 return this; 182 }; 183 184 // 添加 class 185 Base.prototype.addClass = function (className) { 186 if (className instanceof Array) { // 集群 187 for (var i = 0; i < className.length; i ++) { 188 this.addClass(className[i]); 189 } 190 } else { // 单个 191 var results = this.getClass.hasClass.call(this, className); 192 var space = ‘‘; 193 for (var i = 0; i < results.length; i ++) { 194 if (this.elements[i].className != ‘‘) space = ‘ ‘; 195 if (!results[i]) this.elements[i].className += space + className; 196 } 197 } 198 return this; 199 }; 200 201 // 移除 class 202 Base.prototype.removeClass = function (className) { 203 if (className instanceof Array) { // 集群 204 for (var i = 0; i < className.length; i ++) { 205 this.removeClass(className[i]); 206 } 207 } else { // 单个 208 var results = this.getClass.hasClass.call(this, className); 209 for (var i = 0; i < results.length; i ++) { 210 if (results[i]) this.elements[i].className = this.elements[i].className.replace(new RegExp(‘(^|\\s)‘ + className + ‘(\\s|$)‘), ‘‘); 211 } 212 } 213 return this; 214 }; 215 216 // 添加 rule 217 Base.prototype.addRule = function (ruleName, ruleText, positionIndex, sheetIndex) { 218 if (ruleName instanceof Array) { // 集群 219 if (!ruleText instanceof Array || ruleName.length != ruleText.length) return this; 220 for (var i = 0; i < ruleName.length; i ++) { 221 this.addRule(ruleName[i], ruleText[i], positionIndex, sheetIndex); 222 } 223 } else { // 单个 224 var rule = this.addRule.checkRule(positionIndex, sheetIndex); 225 if (typeof rule.sheetObject != ‘undefined‘) { 226 if ((positionIndexMax = Tool.getRules(rule.sheetObject).length) < rule.positionIndex) rule.positionIndex = positionIndexMax; 227 Tool.addRule(rule.sheetObject, ruleName, ruleText, rule.positionIndex); 228 } 229 } 230 return this; 231 }; 232 233 // addRule 附属方法: rule 容错处理 234 Base.prototype.addRule.checkRule = function (positionIndex, sheetIndex, positionLength) { 235 if (typeof positionIndex == ‘undefined‘ || isNaN(positionIndex)) positionIndex = 0; 236 if (typeof sheetIndex == ‘undefined‘ || isNaN(sheetIndex)) sheetIndex = 0; 237 if (typeof positionLength == ‘undefined‘ || isNaN(positionLength)) positionLength = 1; 238 return { 239 positionIndex : positionIndex, 240 positionLength : positionLength, 241 sheetObject : document.styleSheets[sheetIndex] 242 } 243 }; 244 245 // 删除 rule 246 Base.prototype.removeRule = function (positionIndex, positionLength, sheetIndex) { 247 var rule = this.addRule.checkRule(positionIndex, sheetIndex, positionLength); 248 if ((positionIndexMax = Tool.getRules(rule.sheetObject).length) <= rule.positionIndex || (positionIndexMax - rule.positionIndex) < rule.positionLength) return this; 249 for (var i = 0; i < rule.positionLength; i ++) { 250 Tool.removeRule(rule.sheetObject, rule.positionIndex); 251 } 252 return this; 253 }; 254 255 // 显示元素 256 Base.prototype.show = function () { 257 for (var i = 0; i < this.elements.length; i ++) { 258 $(this.elements[i]).css(‘display‘, ‘block‘); 259 } 260 return this; 261 }; 262 263 // 隐藏元素 264 Base.prototype.hide = function () { 265 for (var i = 0; i < this.elements.length; i ++) { 266 $(this.elements[i]).css(‘display‘, ‘none‘); 267 } 268 return this; 269 }; 270 271 // 鼠标 click 事件 272 Base.prototype.click = function (method) { 273 if (method instanceof Function) { 274 for (var i = 0; i < this.elements.length; i ++) { 275 this.elements[i].onclick = function (eventObject) { 276 method.call(this, Tool.getEvent(eventObject)); 277 }; 278 } 279 } 280 return this; 281 }; 282 283 // 鼠标 mouseover 事件 284 Base.prototype.mouseover = function (method) { 285 if (method instanceof Function) { 286 for (var i = 0; i < this.elements.length; i ++) { 287 this.elements[i].onmouseover = function (eventObject) { 288 method.call(this, Tool.getEvent(eventObject)); 289 }; 290 } 291 } 292 return this; 293 }; 294 295 // 鼠标 mouseout 事件 296 Base.prototype.mouseout = function (method) { 297 if (method instanceof Function) { 298 for (var i = 0; i < this.elements.length; i ++) { 299 this.elements[i].onmouseout = function (eventObject) { 300 method.call(this, Tool.getEvent(eventObject)); 301 }; 302 } 303 } 304 return this; 305 }; 306 307 // 鼠标 mousedown 事件 308 Base.prototype.mousedown = function (method) { 309 if (method instanceof Function) { 310 for (var i = 0; i < this.elements.length; i ++) { 311 this.elements[i].onmousedown = function (eventObject) { 312 method.call(this, Tool.getEvent(eventObject)); 313 }; 314 } 315 } 316 return this; 317 }; 318 319 // 鼠标 mousemove 事件 320 Base.prototype.mousemove = function (method) { 321 if (method instanceof Function) { 322 for (var i = 0; i < this.elements.length; i ++) { 323 this.elements[i].onmousemove = function (eventObject) { 324 method.call(this, Tool.getEvent(eventObject)); 325 }; 326 } 327 } 328 return this; 329 }; 330 331 // 鼠标 mouseup 事件 332 Base.prototype.mouseup = function (method) { 333 if (method instanceof Function) { 334 for (var i = 0; i < this.elements.length; i ++) { 335 this.elements[i].onmouseup = function (eventObject) { 336 method.call(this, Tool.getEvent(eventObject)); 337 }; 338 } 339 } 340 return this; 341 }; 342 343 // 鼠标 mousewheel 事件 344 Base.prototype.mousewheel = function (method) { 345 if (method instanceof Function) { 346 for (var i = 0; i < this.elements.length; i ++) { 347 Tool.mousewheelEvent(this.elements[i], method); 348 } 349 } 350 return this; 351 }; 352 353 // 元素 load 事件 354 Base.prototype.load = function (method) { 355 if (method instanceof Function) { 356 for (var i = 0; i < this.elements.length; i ++) { 357 this.elements[i].onload = function (eventObject) { 358 method.call(this, Tool.getEvent(eventObject)); 359 }; 360 } 361 } 362 return this; 363 }; 364 365 // 元素 scroll 事件 366 Base.prototype.scroll = function (method) { 367 if (method instanceof Function) { 368 for (var i = 0; i < this.elements.length; i ++) { 369 this.elements[i].onscroll = function (eventObject) { 370 method.call(this, Tool.getEvent(eventObject)); 371 }; 372 } 373 } 374 return this; 375 }; 376 377 // 窗口 resize 事件 378 Base.prototype.resize = function (method) { 379 if (method instanceof Function) { 380 window.onresize = function (eventObject) { 381 method.call(this, Tool.getEvent(eventObject)); 382 }; 383 } 384 return this; 385 }; 386 387 // 鼠标 hover 特效 388 Base.prototype.hover = function (overMethod, outMethod) { 389 this.mouseover(overMethod); 390 this.mouseout(outMethod); 391 return this; 392 }; 393 394 // 元素居中显示特效 395 Base.prototype.center = function () { 396 var innerRectangle = Tool.getInnerRectangle(); 397 var rectangle = {}, fixedX = 0, fixedY = 0, minX = 0, minY = 0, maxX = 0, maxY = 0; 398 for (var i = 0; i < this.elements.length; i ++) { 399 this.center.absolutePosition(this.elements[i]); 400 rectangle = this.center.getRectangle(this.elements[i]); 401 maxX = innerRectangle.innerWidth - rectangle.width; 402 maxY = innerRectangle.innerHeight - rectangle.height; 403 fixedX = maxX / 2; 404 fixedY = maxY / 2; 405 if (fixedX < minX) { 406 fixedX = minX; 407 } else if (fixedX > maxX) { 408 fixedX = maxX; 409 } 410 if (fixedY < minY) { 411 fixedY = minY; 412 } else if (fixedY > maxY) { 413 fixedY = maxY; 414 } 415 $(this.elements[i]).css([‘left = ‘ + fixedX + ‘px‘, ‘top = ‘ + fixedY + ‘px‘]); 416 } 417 return this; 418 }; 419 420 // center 隶属方法: 获取元素长度 421 Base.prototype.center.getRectangle = function (elementNode) { 422 var _this = $(elementNode); 423 var width = _this.css(‘width‘); 424 var height = _this.css(‘height‘); 425 var display = _this.css(‘display‘); 426 if (display != ‘none‘ || width == ‘auto‘ || height == ‘auto‘) { 427 _this.show(); 428 width = elementNode.offsetWidth; 429 height = elementNode.offsetHeight; 430 } 431 width = this.split(width, ‘px‘); 432 height = this.split(height, ‘px‘); 433 return { 434 width : width, 435 height : height 436 } 437 }; 438 439 // center 隶属方法: 裁剪字符串 440 Base.prototype.center.split = function (string, pattern) { 441 if (typeof string == ‘string‘) { 442 if (string.indexOf(pattern) != -1) string = string.replace(pattern, ‘‘); 443 } 444 return string; 445 }; 446 447 // center 隶属方法: 元素设置绝对定位 448 Base.prototype.center.absolutePosition = function (elementNode) { 449 if ($(elementNode).css(‘position‘) != ‘absolute‘) { 450 $(elementNode).css([‘position = absolute‘, ‘left = 0‘, ‘top = 0‘]); 451 } 452 }; 453 454 // 屏幕遮罩特效: 锁屏 455 Base.prototype.lock = function () { 456 var screenLock = $().getId(‘screen_lock‘).getNodes(); // 获取锁屏节点 457 // 锁屏节点智能生成 458 if (typeof screenLock == ‘object‘) { // 存在 459 this.lock.comment(screenLock); // 清除注释 460 if (this.lock.trim($(screenLock).html()).length != 0) { 461 this.lock.deleteElement(‘id = screen_lock‘); 462 screenLock = this.lock.createElement(‘div‘, ‘id = screen_lock‘); 463 } 464 } else { // 不存在 465 screenLock = this.lock.createElement(‘div‘, ‘id = screen_lock‘); // 创建锁屏节点 466 } 467 468 $(document.documentElement).css(‘overflow‘, ‘hidden‘); 469 Tool.scrollInitialization(); 470 var innerRectangle = Tool.getInnerRectangle(); 471 this.center.absolutePosition(screenLock); 472 var _this = $(screenLock); 473 // 锁屏样式 474 _this.css([ 475 ‘width = ‘ + innerRectangle.innerWidth + ‘px‘, 476 ‘height = ‘ + innerRectangle.innerHeight +‘px‘, 477 ‘backgroundColor = black‘, 478 ‘opacity = 0.4‘, // W3C 透明效果 479 ‘filter = alpha(opacity = 40)‘, // IE 6/7/8 透明效果 480 ‘zIndex = 10‘ 481 ]).show(); 482 // IE 6/7/8 与 Chrome 鼠标滚轮 BUG 处理 483 _this.mousedown(function () { // 禁用 IE 6/7/8 鼠标默认行为 484 _this.mousemove(function (eventObject) { 485 Tool.preventEventDefault(eventObject); 486 }); 487 _this.mouseup(function () { 488 _this.mousedown(function () { 489 return null; 490 }); 491 _this.mouseup(function () { 492 return null; 493 }); 494 }); 495 }); 496 497 _this.mousewheel(function (eventObject) { // Chrome 禁用鼠标滚轮 498 Tool.preventEventDefault(eventObject); 499 }); 500 501 return this; 502 }; 503 504 // 屏幕遮罩特效: 销锁 505 Base.prototype.unlock = function () { 506 var screenLock = $().getId(‘screen_lock‘).getNodes(); 507 if (typeof screenLock == ‘object‘) { 508 $(screenLock).hide(); 509 $(document.documentElement).css(‘overflow‘, ‘auto‘); 510 } 511 return this; 512 }; 513 514 // lock 隶属方法: 匹配元素属性 515 Base.prototype.lock.matchAttribute = function (pattern, attribute, elementNode) { 516 if (pattern.test(attribute)) { 517 var attributeKey = pattern.exec(attribute)[1]; 518 var attributeValue = pattern.exec(attribute)[2]; 519 if (attributeKey == ‘class‘) attributeKey = ‘className‘; 520 if (typeof elementNode == ‘object‘) elementNode[attributeKey] = attributeValue; 521 return { 522 attributeKey : attributeKey, 523 attributeValue : attributeValue 524 } 525 } 526 }; 527 528 // lock 隶属方法: 创建元素 529 Base.prototype.lock.createElement = function (elementName, attribute, html, parentElement) { 530 if (typeof parentElement == ‘undefined‘) parentElement = document.body; 531 var elementNode = document.createElement(elementName); 532 if (typeof attribute != ‘undefined‘) { 533 var pattern = /^\s*([a-z]+)\s*=\s*([\w\-\s\.\\\/\=\(\)]+)\s*$/i; 534 if (attribute instanceof Array) { 535 for (var i = 0; i < attribute.length; i ++) { 536 this.matchAttribute(pattern, attribute[i], elementNode); 537 } 538 } else { 539 this.matchAttribute(pattern, attribute, elementNode); 540 } 541 } 542 if (typeof html == ‘string‘) { 543 $(elementNode).html(html); 544 } 545 parentElement.appendChild(elementNode); 546 return elementNode; 547 }; 548 549 // lock 隶属方法: 删除元素 550 Base.prototype.lock.deleteElement = function (attribute) { 551 if (typeof attribute != ‘undefined‘) { 552 if (attribute instanceof Array) { 553 for (var i = 0; i < attribute.length; i ++) { 554 this.deleteElement(attribute[i]); 555 } 556 } else { 557 var pattern = /^\s*(id|class|className|name)\s*=\s*([\w\-\s\.\\\/\=\(\)]+)\s*$/i; 558 var nodes = [], parentElement = {}; 559 if (pattern.test(attribute)) { 560 arrtibuteObject = $().lock.matchAttribute(pattern, attribute); 561 switch (arrtibuteObject.attributeKey) { 562 case ‘id‘ : 563 nodes = $().getId(arrtibuteObject.attributeValue).getNodes(); 564 break; 565 566 case ‘name‘: 567 nodes = $().getName(arrtibuteObject.attributeValue).getNodes(); 568 break; 569 570 case ‘className‘ : 571 nodes = $().getClass(arrtibuteObject.attributeValue).getNodes(); 572 break; 573 } 574 } else { // tagName 575 nodes = $().getTagName(attribute).getNodes(); 576 } 577 if (nodes instanceof Array) { 578 for (var i = 0; i < nodes.length; i ++) { 579 parentElement = nodes[i].parentNode; 580 if (typeof parentElement == ‘undefined‘) continue; 581 parentElement.removeChild(nodes[i]); 582 } 583 } else { 584 parentElement = nodes.parentNode; 585 if (typeof parentElement == ‘undefined‘) return false; 586 parentElement.removeChild(nodes); 587 } 588 } 589 } 590 }; 591 592 // lock 隶属方法: 清除字符串首位空格 593 Base.prototype.lock.trim = function (string) { 594 var leftPattern = /^([\s ]+)/; 595 var rightPattern = /([\s ]+)$/; 596 if (leftPattern.test(string)) string = string.replace(leftPattern, ‘‘); 597 if (rightPattern.test(string)) string = string.replace(rightPattern, ‘‘); 598 return string; 599 }; 600 601 // lock 隶属方法: 清除元素内部注释 602 Base.prototype.lock.comment = function (elementNode) { 603 if (elementNode.id != ‘‘) var nodes = $().getTagName(‘!‘, elementNode.id).getNodes(); // IE 6/7/8 604 if (typeof nodes != ‘object‘) nodes = elementNode.childNodes; // W3C 605 for (var i = 0; i < nodes.length; i ++) { 606 if (nodes[i].nodeType == 8) elementNode.removeChild(nodes[i]); 607 } 608 return elementNode; 609 }; 610 611 // lock 隶属方法: 清除元素内部空白文本节点 612 Base.prototype.lock.spaceNode = function (elementNode) { 613 var nodes = elementNode.childNodes; 614 for (var i = 0; i < nodes.length; i ++) { 615 if (nodes[i].nodeType == 3 && /^([ \s]+)$/.test(nodes[i].nodeValue)) elementNode.removeChild(nodes[i]); 616 } 617 return elementNode; 618 }; 619 620 // 元素拖拽特效 621 Base.prototype.drag = function (mode) { 622 if (typeof mode == ‘undefined‘) mode = true; 623 this.mousedown(function (eventObject) { 624 // 拖拽模式选择: true 拖拽元素自身、false 拖拽父级元素 625 var _this = mode ? this : this.parentNode; 626 627 $().lock.comment(_this); 628 if ($().lock.trim($(_this).html()).length == 0) Tool.preventEventDefault(eventObject); // 兼容 Firefox 低版本拖拽 BUG 629 630 // 设置绝对定位 631 $().center.absolutePosition(_this); 632 633 // 捕获鼠标当前坐标 634 var mouseX = eventObject.clientX; 635 var mouseY = eventObject.clientY; 636 637 // 获取元素外边距 638 var outerRectangle = $().drag.getOuterRectangle(_this); 639 640 // 获取固定距离 641 var fixedX = mouseX - outerRectangle.outerX; 642 var fixedY = mouseY - outerRectangle.outerY; 643 644 var innerRectangle = Tool.getInnerRectangle(); 645 var rectangle = $().center.getRectangle(_this); 646 647 // 设置容错距离 648 var minX = 0, minY = 0, maxX = 0, maxY = 0; 649 maxX = innerRectangle.innerWidth - rectangle.width; 650 maxY = innerRectangle.innerHeight - rectangle.height; 651 652 // 兼容 IE 6/7/8 拖拽 BUG 653 Tool.setCaptureIE(_this); 654 655 $(document).mousemove(function (eventObject) { 656 // 捕获鼠标当前坐标 657 mouseX = eventObject.clientX; 658 mouseY = eventObject.clientY; 659 660 // 获取元素位置 661 var moveX = mouseX - fixedX; 662 var moveY = mouseY - fixedY; 663 664 if (moveX < minX) { 665 moveX = minX; 666 } else if (moveX > maxX) { 667 moveX = maxX; 668 } 669 670 if (moveY < minY) { 671 moveY = minY; 672 } else if (moveY > maxY) { 673 moveY = maxY; 674 } 675 676 $(_this).css([‘left = ‘ + moveX + ‘px‘, ‘top = ‘ + moveY + ‘px‘]); 677 }); 678 $(document).mouseup(function () { 679 // 兼容 IE 6/7/8 拖拽 BUG 680 Tool.releaseCaptureIE(_this); 681 $(document).mousemove(function () { 682 return null; 683 }); 684 return null; 685 }); 686 }); 687 return this; 688 }; 689 690 // drag 隶属方法: 获取元素外边距 691 Base.prototype.drag.getOuterRectangle = function (elementNode) { 692 var _this = $(elementNode); 693 var outerX = _this.css(‘left‘); 694 var outerY = _this.css(‘top‘); 695 var display = _this.css(‘display‘); 696 697 if (display != ‘none‘ || outerX == ‘auto‘ || outerY == ‘auto‘) { 698 _this.show(); 699 outerX = elementNode.offsetLeft; 700 outerY = elementNode.offsetTop; 701 } 702 703 outerX = _this.center.split(outerX, ‘px‘); 704 outerY = _this.center.split(outerY, ‘px‘); 705 706 return { 707 outerX : outerX, 708 outerY : outerY 709 } 710 }; 711 712 // 防止元素溢出 713 Base.prototype.overflow = function () { 714 var innerRectangle = Tool.getInnerRectangle(); 715 var outerRectangle = {}, rectangle = {}, minX = 0, minY = 0, maxX = 0, maxY = 0; 716 for (var i = 0; i < this.elements.length; i ++) { 717 this.center.absolutePosition(this.elements[i]); 718 outerRectangle = this.drag.getOuterRectangle(this.elements[i]); 719 rectangle = this.center.getRectangle(this.elements[i]); 720 maxX = innerRectangle.innerWidth - rectangle.width; 721 maxY = innerRectangle.innerHeight - rectangle.height; 722 723 if (outerRectangle.outerX < minX) { 724 outerRectangle.outerX = minX; 725 } else if (outerRectangle.outerX > maxX) { 726 outerRectangle.outerX = maxX; 727 } 728 if (outerRectangle.outerY < minY) { 729 outerRectangle.outerY = minY; 730 } else if (outerRectangle.outerY > maxY) { 731 outerRectangle.outerY = maxY; 732 } 733 734 $(this.elements[i]).css([‘left = ‘ + outerRectangle.outerX + ‘px‘, ‘top = ‘ + outerRectangle.outerY + ‘px‘]); 735 } 736 return this; 737 };
1 /* 2 源码作者: 石不易(Louis Shi) 3 联系方式: http://www.shibuyi.net 4 =================================================================================================== 5 程序名称: JavaScript 工具库(跨浏览器兼容) BETA 1.0 版 6 迭代版本: 无 7 功能总数: 17 个 8 功能介绍: 9 1. 实现获取计算样式 10 2. 样式规则添加和移除 11 3. 获取事件对象 event 12 4. 取消事件默认行为与冒泡处理 13 5. 现代事件绑定添加和移除 14 ... 15 */ 16 var Tool = { 17 18 // 跨浏览器获取计算后的样式 19 getStyle : function (elementNode, cssKey) { 20 if (typeof window.getComputedStyle != ‘undefined‘) { // W3C 21 return window.getComputedStyle(elementNode, null)[cssKey]; 22 } else if (typeof elementNode.currentStyle != ‘undefined‘) { // IE 6/7/8 23 return elementNode.currentStyle[cssKey]; 24 } 25 }, 26 27 // 跨浏览器添加 rule 28 addRule : function (sheetObject, ruleName, ruleText, positionIndex) { 29 if (typeof sheetObject.insertRule != ‘undefined‘) { // W3C 30 sheetObject.insertRule(ruleName + ‘ {‘ + ruleText + ‘}‘, positionIndex); 31 } else if (typeof sheetObject.addRule != ‘undefined‘) { // IE 6/7/8 32 sheetObject.addRule(ruleName, ruleText, positionIndex); 33 } 34 }, 35 36 // 跨浏览器移除 rule 37 removeRule : function (sheetObject, positionIndex) { 38 if (typeof sheetObject.deleteRule != ‘undefined‘) { // W3C 39 sheetObject.deleteRule(positionIndex); 40 } else if (typeof sheetObject.removeRule != ‘undefined‘) { // IE 6/7/8 41 sheetObject.removeRule(positionIndex); 42 } 43 }, 44 45 // 跨浏览器获取rule集合 46 getRules : function (sheetObject) { 47 if (typeof sheetObject.cssRules != ‘undefined‘) { // W3C 48 return sheetObject.cssRules; 49 } else if (typeof sheetObject.rules != ‘udnefined‘) { // IE 6/7/8 50 return sheetObject.rules; 51 } 52 }, 53 54 // 数组排序 55 sort : function () { 56 return { 57 minToMax : function (min, max) { // 正序: 从小到大排序 58 if (min < max) { 59 return -1; 60 } else if (min > max) { 61 return 1; 62 } else { 63 return 0; 64 } 65 }, 66 maxToMin : function (min, max) { // 倒序: 从大到小排序 67 if (min < max) { 68 return 1; 69 } else if (min > max) { 70 return -1; 71 } else { 72 return 0; 73 } 74 } 75 } 76 }, 77 78 // 跨浏览器获取 event 对象 79 getEvent : function (eventObject) { 80 if (typeof eventObject == ‘object‘) return eventObject; // W3C 81 return window.event; // IE 6/7/8 82 }, 83 84 // 跨浏览器获取事件绑定所属元素引用 85 getEventTarget : function (eventObject) { 86 eventObject = this.getEvent(eventObject); 87 if (typeof eventObject.target != ‘undefined‘) { // W3C 88 return eventObject.target; 89 } else if (typeof eventObject.srcElement != ‘undefined‘) { // IE 6/7/8 90 return eventObject.srcElement; 91 } 92 }, 93 94 // 跨浏览器取消事件默认行为 95 preventEventDefault : function (eventObject) { 96 eventObject = this.getEvent(eventObject); 97 if (typeof eventObject.cancelable != ‘undefined‘ && typeof eventObject.preventDefault != ‘undefined‘) { // W3C 98 if (eventObject.cancelable) eventObject.preventDefault(); 99 } else { // IE 6/7/8 100 eventObject.returnValue = false; 101 } 102 }, 103 104 // 跨浏览器取消事件冒泡 105 cancelEventPropagation : function (eventObject) { 106 eventObject = this.getEvent(eventObject); 107 if (typeof eventObject.bubbles != ‘undefined‘ && typeof eventObject.stopPropagation != ‘undefined‘) { // W3C 108 if (eventObject.bubbles) eventObject.stopPropagation(); 109 } else if (typeof eventObject.cancelBubble != ‘undefined‘) { // IE 6/7/8 110 eventObject.cancelBubble = true; 111 } 112 }, 113 114 // 事件名称容错处理 115 checkEventName : function (eventName) { 116 if (typeof eventName == ‘string‘ && eventName.indexOf(‘on‘) == 0) eventName = eventName.substring(2, eventName.length); 117 return eventName; 118 }, 119 120 // 跨浏览器现代事件绑定: 注册事件 121 loginEvent : function (elementNode, eventName, method) { 122 eventName = this.checkEventName(eventName); 123 if (typeof elementNode.addEventListener != ‘undefined‘) { // W3C 124 elementNode.addEventListener(eventName, method, false); 125 } else if (typeof elementNode.attachEvent != ‘undefined‘) { // IE 6/7/8 126 elementNode.attachEvent(‘on‘ + eventName, method); 127 } 128 }, 129 130 // 款浏览器现代事件绑定: 注销事件 131 logoutEvent : function (elementNode, eventName, method) { 132 eventName = this.checkEventName(eventName); 133 if (typeof elementNode.removeEventListener != ‘undefined‘) { // W3C 134 elementNode.removeEventListener(eventName, method, false); 135 } else if (typeof elementNode.detachEvent != ‘undefined‘) { // IE 6/7/8 136 elementNode.detachEvent(‘on‘ + eventName, method); 137 } 138 }, 139 140 // 跨浏览器绑定鼠标滚轮事件 141 mousewheelEvent : function (elementNode, method) { 142 if (typeof elementNode.onmousewheel != ‘undefined‘) { // 非 Firefox 143 elementNode.onmousewheel = function (eventObject) { 144 method.call(this, Tool.getEvent(eventObject)); 145 }; 146 } else { // Firefox 147 this.loginEvent(elementNode, ‘DOMMouseScroll‘, method); 148 } 149 }, 150 151 // 跨浏览器获取网页可视区长度 152 getInnerRectangle : function () { 153 var width = 0; height = 0; 154 if (typeof window.innerWidth != ‘undefined‘ && typeof window.innerHeight != ‘undefined‘) { // W3C 155 width = window.innerWidth; 156 height = window.innerHeight; 157 } else { // IE 6/7/8 158 width = document.documentElement.clientWidth; 159 height = document.documentElement.clientHeight; 160 } 161 return { 162 innerWidth : width, 163 innerHeight : height 164 } 165 }, 166 167 // 跨浏览器滚动条重置 168 scrollInitialization : function () { 169 document.documentElement.scrollTop = 0; // 非 Chrome / Safari 170 document.documentElement.scrollLeft = 0; // 非 Chrome / Safari 171 document.body.scrollTop = 0; // Chrome / Safari 172 document.body.scrollLeft = 0; // Chrome / Safari 173 }, 174 175 // IE 浏览器独占: 监听鼠标点击 176 setCaptureIE : function (elementNode) { 177 if (typeof elementNode.setCapture != ‘undefined‘) { 178 elementNode.setCapture(); 179 } 180 }, 181 182 // IE 浏览器独占: 监听释放鼠标 183 releaseCaptureIE : function (elementNode) { 184 if (typeof elementNode.releaseCapture != ‘undefined‘) { 185 elementNode.releaseCapture(); 186 } 187 } 188 };
关于 BETA 1.0 原型版核心源码与实例演示的获取请移动至官网下载！
感谢大家积极评测给予意见！
CNBlogs 博客：http://www.cnblogs.com/shibuyi/
CSDN 博客：http://blog.csdn.net/louis_shi/
ITeye 博客：http://shibuyi.iteye.com/