JQuery UI 插件原理分析(一)<jquery.ui.core.js>

因项目需要用到JQuery UIsorttable插件,抽空分析了下JQuery UI 的实现方式.

JQuery 为最新1.4.1版本

jquery.ui.core.js 仅对此做了简单的汉语注释

1 /*!
2 * jQuery UI 1.8rc1
3 *
4 * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
5 * Dual licensed under the MIT (MIT-LICENSE.txt)
6 * and GPL (GPL-LICENSE.txt) licenses.
7 *
8 * http://docs.jquery.com/UI
9 */
10 ;jQuery.ui || (function($) {
11
12  var isFF2 = $.browser.mozilla && (parseFloat($.browser.version) < 1.9);
13
14  //Helper functions and ui object
15  $.ui = {
16 version: "1.8rc1",
17
18 // $.ui.plugin is deprecated. Use the proxy pattern instead.
19 plugin: {
20 add: function(module, option, set) {
21 var proto = $.ui[module].prototype;
22 for(var i in set) {
23 proto.plugins[i] = proto.plugins[i] || [];
24 proto.plugins[i].push([option, set[i]]);
25 }
26 },
27 call: function(instance, name, args) {
28 var set = instance.plugins[name];
29 if(!set || !instance.element[0].parentNode) { return; }
30
31 for (var i = 0; i < set.length; i++) {
32 if (instance.options[set[i][0]]) {
33 set[i][1].apply(instance.element, args);
34 }
35 }
36 }
37 },
38
39 //判断节点a是否包含节点b (关于compareDocumentPosition和contains 用法见 http://www.cnblogs.com/siceblue/archive/2010/02/02/1661833.html)
40 //与16按位于的原因是,如果包含 值为20 即返回true; 如果不包含值为 0 即返回false
41 contains: function(a, b) {
42 return document.compareDocumentPosition
43 ? a.compareDocumentPosition(b) & 16
44 : a !== b && a.contains(b);
45 },
46
47 //判断元素的sroll 在top或者left方向是是否有滚动
48 hasScroll: function(el, a) {
49
50 //If overflow is hidden, the element might have extra content, but the user wants to hide it
51 if ($(el).css('overflow') == 'hidden') { return false; }
52
53 var scroll = (a && a == 'left') ? 'scrollLeft' : 'scrollTop',
54 has = false;
55
56 if (el[scroll] > 0) { return true; }
57
58 // TODO: determine which cases actually cause this to happen 确定是那种情况引起这种情况发生
59 // if the element doesn't have the scroll set, see if it's possible to
60 // set the scroll
61 el[scroll] = 1;
62 has = (el[scroll] > 0);
63 el[scroll] = 0;
64 return has;
65 },
66
67 //确定x坐标是否在元素内部
68 //x:要确认的坐标;reference:参考坐标;size:元素宽度
69 isOverAxis: function(x, reference, size) {
70 //Determines when x coordinate is over "b" element axis
71 return (x > reference) && (x < (reference + size));
72 },
73
74 //确定x、y坐标是否同事在元素内部
75 //x、y:坐标;top、left:元素坐标;height、width:元素宽高
76 isOver: function(y, x, top, left, height, width) {
77 //Determines when x, y coordinates is over "b" element
78 return $.ui.isOverAxis(y, top, height) && $.ui.isOverAxis(x, left, width);
79 },
80
81 keyCode: {
82 BACKSPACE: 8,
83 CAPS_LOCK: 20,
84 COMMA: 188,
85 CONTROL: 17,
86 DELETE: 46,
87 DOWN: 40,
88 END: 35,
89 ENTER: 13,
90 ESCAPE: 27,
91 HOME: 36,
92 INSERT: 45,
93 LEFT: 37,
94 NUMPAD_ADD: 107,
95 NUMPAD_DECIMAL: 110,
96 NUMPAD_DIVIDE: 111,
97 NUMPAD_ENTER: 108,
98 NUMPAD_MULTIPLY: 106,
99 NUMPAD_SUBTRACT: 109,
100 PAGE_DOWN: 34,
101 PAGE_UP: 33,
102 PERIOD: 190,
103 RIGHT: 39,
104 SHIFT: 16,
105 SPACE: 32,
106 TAB: 9,
107 UP: 38
108 }
109 };
110
111 //jQuery plugins
112 $.fn.extend({
113 _focus: $.fn.focus,
114 //设置元素焦点(delay:延迟时间)
115 focus: function(delay, fn) {
116 return typeof delay === 'number'
117 ? this.each(function() {
118 var elem = this;
119 setTimeout(function() {
120 $(elem).focus();
121 (fn && fn.call(elem));
122 }, delay);
123 })
124 : this._focus.apply(this, arguments);
125 },
126
127 //设置元素支持被选择
128 enableSelection: function() {
129 return this
130 .attr('unselectable', 'off')
131 .css('MozUserSelect', '')
132 .unbind('selectstart.ui');
133 },
134
135 //设置元素不支持被选择
136 disableSelection: function() {
137 return this
138 .attr('unselectable', 'on')
139 .css('MozUserSelect', 'none')
140 .bind('selectstart.ui', function() { return false; });
141 },
142
143 //获取设置滚动属性的 父元素
144 scrollParent: function() {
145 var scrollParent;
146 if(($.browser.msie && (/(static|relative)/).test(this.css('position'))) || (/absolute/).test(this.css('position'))) {
147 scrollParent = this.parents().filter(function() {
148 return (/(relative|absolute|fixed)/).test($.curCSS(this,'position',1)) && (/(auto|scroll)/).test($.curCSS(this,'overflow',1)+$.curCSS(this,'overflow-y',1)+$.curCSS(this,'overflow-x',1));
149 }).eq(0);
150 } else {
151 scrollParent = this.parents().filter(function() {
152 return (/(auto|scroll)/).test($.curCSS(this,'overflow',1)+$.curCSS(this,'overflow-y',1)+$.curCSS(this,'overflow-x',1));
153 }).eq(0);
154 }
155
156 return (/fixed/).test(this.css('position')) || !scrollParent.length ? $(document) : scrollParent;
157 },
158
159 //设置或获取元素的垂直坐标
160 zIndex: function(zIndex) {
161 //zIndex存在时设置
162 if (zIndex !== undefined) {
163 return this.css('zIndex', zIndex);
164 }
165
166 //zIndex不存在时获取
167 var elem = this[0];
168 while (elem && elem.style) {
169 // IE returns 0 when zIndex is not specified
170 // other browsers return an empty string
171 // we ignore the case of nested elements with an explicit value of 0
172 // <div style="z-index: -10;"><div style="z-index: 0;"></div></div>
173 if (elem.style.zIndex !== '' && elem.style.zIndex !== 0) {
174 return +elem.style.zIndex;
175 }
176 elem = elem.parentNode;
177 }
178
179 return 0;
180 }
181 });
182
183
184 //Additional selectors
185 //jQuery.expr[":"] = jQuery.expr.filters; 扩展jQuery.expr.filters 的筛选方法,在jquery-1.4.1.js中有其他方法
186 $.extend($.expr[':'], {
187 data: function(elem, i, match) {
188 return !!$.data(elem, match[3]);
189 },
190
191 focusable: function(element) {
192 var nodeName = element.nodeName.toLowerCase(),
193 tabIndex = $.attr(element, 'tabindex');
194 return (/input|select|textarea|button|object/.test(nodeName)
195 ? !element.disabled
196 : 'a' == nodeName || 'area' == nodeName
197 ? element.href || !isNaN(tabIndex)
198 : !isNaN(tabIndex))
199 // the element and all of its ancestors must be visible
200 // the browser may report that the area is hidden
201 && !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;
202 },
203
204 tabbable: function(element) {
205 var tabIndex = $.attr(element, 'tabindex');
206 return (isNaN(tabIndex) || tabIndex >= 0) && $(element).is(':focusable');
207 }
208 });
209
210 })(jQuery);
211
原文地址:https://www.cnblogs.com/siceblue/p/1661700.html