zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    selenium 资料
    SpringMVC上传文件总结
    java 获取当天(今日)零点零分零秒
    存储过程实例基于postgersql
    为webService添加Interceptor(拦截器)
    spring+redis实例(二)
    hibernate字段映射枚举类型
    WordPress 在Ubuntu下安装插件、主题输入FTP后无法创建目录
    spring + redis 实例(一)
    mybatis字段映射枚举类型
  • 原文地址:https://www.cnblogs.com/siceblue/p/1661700.html
Copyright © 2011-2022 走看看