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
  • 相关阅读:
    CodeForces 659F Polycarp and Hay
    CodeForces 713C Sonya and Problem Wihtout a Legend
    CodeForces 712D Memory and Scores
    CodeForces 689E Mike and Geometry Problem
    CodeForces 675D Tree Construction
    CodeForces 671A Recycling Bottles
    CodeForces 667C Reberland Linguistics
    CodeForces 672D Robin Hood
    CodeForces 675E Trains and Statistic
    CodeForces 676D Theseus and labyrinth
  • 原文地址:https://www.cnblogs.com/siceblue/p/1661700.html
Copyright © 2011-2022 走看看