【问题标题】:plugin illuminate 0.7 incompatible to jQuery 1.9.1 or jQuery-UI 1.10.3 -> TypeError: $.css(...) is undefined插件照亮 0.7 与 jQuery 1.9.1 或 jQuery-UI 1.10.3 不兼容 -> TypeError: $.css(...) is undefined
【发布时间】:2013-08-04 12:50:31
【问题描述】:

jQuery 或 jQuery-UI 中的更改与插件不兼容 jquery.illuminate.0.7

插件jquery.illuminate.0.7 工作in chrome 30, firefox 22 and IE 10。它使用

  • jquery_1.6.1.min.js
  • jquery-ui_1.8.13.min.js
  • jquery.illuminate.0.7.js

但是改变 jQuery 和 jQuery-UI 的版本是 causes the demo of the illuminate plugin to only work in chrome 30。演示使用

  • jquery_1.9.1.js 和
  • jquery-ui_1.10.3.js
  • jquery.illuminate.0.7.js

在 Firefox 22 中会导致以下错误:

TypeError: $.css(...) is undefined pointing to jquery.illuminate.0.7.js:223 

HTML 和 js 代码

<script>
window.onload = function(){
    $("#illuminate").illuminate({
        'intensity': '0.3',
        'color': '#98cb00',
        'blink': 'true',
        'blinkSpeed': '1200',
        'outerGlow': 'true',
        'outerGlowSize': '30px',
        'outerGlowColor': '#98cb00'
    });
};
</script>

相关的html只是按钮

<button type="submit" class="btn" id="illuminate" >submit</button>

我尝试了什么

我查看了Illumination插件的源代码,看看错误发生在哪里。方法$.cssHooks.boxShadowBlur包含这个js:

$.cssHooks.boxShadowBlur = {
     get: function ( elem, computed, extra ) {
        return $.css(elem, support.boxShadow).split(rWhitespace)[5];
     },
     set: function( elem, value ) {     
              elem.style[ support.boxShadow ] = 
                 insert_into($.css(elem, support.boxShadow), value, 5);                
     }
};

jquery still contains a matching function的github页面(见第111行):

jQuery.fn.extend({
  css: function( name, value ) { ....

我的问题

  • 在 jQuery.js 或 jQuery-ui 中是否发生了任何可能导致 $.css(...) 失败的重大更改
  • 如何使插件与最新(或至少 1.9.1)版本的 jquery 和 jquery-ui (1.10.3) 兼容

到目前为止的更新和指针

用户 Dave 询问我如何加载 javascript 库。我按以下顺序同步加载它们:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="jquery.illuminate.0.7.js"></script>

用户Sumurai指出it could have to do with the deprecated curCSS。我在 jQuery 1.9.1 中找到了以下代码:

jQuery.extend({
// Add in style property hooks for overriding the default
// behavior of getting and setting a style property
cssHooks: {
   opacity: {
         get: function( elem, computed ) {
        if ( computed ) {
        // We should always get a number back from opacity
        var ret = curCSS( elem, "opacity" );
        return ret === "" ? "1" : ret;
        }//if
     }//get
   }//opacity
},//cssHooks
    // more properties for jQuery.extend ....

所以 jQuery 1.9.1 仍然使用curCSS 作为cssHooks.opacity。插件Illuminate向cssHooks添加了另一个属性:$.cssHooks.boxShadowBlur。但据我所知,这种方法与cssHooks.opacity 无关。因此curCSS 应该无效。

【问题讨论】:

  • 我查看了照明插件jquery.illuminate.0.7.jsjquery-ui-1.10.3 的源代码,找不到curCSS 的任何用途。只有在jquery_1.9.1.js 中使用了curCSS。所以很难理解为什么会触发它。你能详细说明一下吗?
  • 如何加载脚本?同步?按什么顺序?
  • 嗯,使用 FireBug 断点单步执行他们的代码,我突然想到我以前从未见过 $.css(elem,blah) 语法。应该是$(elem).css(blah)。也许它使用的语法已被弃用?
  • 我认为它可能报告了 other .css 调用之一。除非您全部更改。

标签: javascript jquery jquery-ui jquery-plugins


【解决方案1】:

哇,这需要一些调试。

问题在于,Illumination 假设 jQuery 不支持 box-shadow 属性,但较新的 jQuery 版本支持。这意味着当供应商前缀不可用(它们不在最新的 FireFox 中)时,您将获得无限循环或未定义的属性。幸运的是,Illumination 使用了一个未定义的属性 BoxShadow,而不是使用 boxShadow 产生的无限循环(正如我发现的那样,这导致了几次浏览器挂起)。

这就是问题所在,解决方法是什么?从照明中删除有问题的代码。所有support.boxShadow 的情况都应更改为简单的'boxShadow',并删除cssHooks.boxShadow 块。您还可以删除首先设置support.boxShadow 的位。

我的测试用例在这里:http://jsfiddle.net/JbTcs/2/ 并在 FireFox 和 Chrome 中工作,我被告知 IE10。 光照的固定源代码为:

/*
 * jQuery Illuminate v0.7 - http://www.tonylea.com/
 *
 * Illuminate elements in jQuery, Function takes the background color of an element
 * and illuminates the element.
 *
 * TERMS OF USE - jQuery Illuminate
 * 
 * Open source under the BSD License. 
 *
 * Currently incompatible with FireFox v.4
 * 
 * Copyright © 2011 Tony Lea
 * All rights reserved.
 * 
 * Redistribution and use in source and binary forms, with or without modification,     
 * are permitted provided that the following conditions are met:
 * 
 * Redistributions of source code must retain the above copyright notice, this list of 
 * conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright notice, this list 
 * of conditions and the following disclaimer in the documentation and/or other materials 
 * provided with the distribution.
 * 
 * Neither the name of the author nor the names of contributors may be used to endorse 
 * or promote products derived from this software without specific prior written permission.
 * 
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
 * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
 * OF THE POSSIBILITY OF SUCH DAMAGE. 
 *
 * modified version
 *
 */
(function($){
$.fn.illuminate = function(options) {
    var defaults = {
        intensity: '0.05',
        color: '',
        blink: 'true',
        blinkSpeed: '600',
        outerGlow: 'true',
        outerGlowSize: '30px',
        outerGlowColor: ''
    };
    var options = $.extend(defaults, options);
    var original_color = '';
    var new_color = '';
    var dead = false;
    $.fn.illuminateDie = function() {
        dead = true;
        options.intensity = '0.05';
        options.color = '';
        options.blink = 'true';
        options.blinkSpeed = '600';
        options.outerGlow = 'true';
        options.outerGlowSize = '30px';
        options.outerGlowColor = '';
        $(this).css({'boxShadow': '0px 0px 0px', 'background-color': "#" + original_color});
    }
    function toggleIllumination(obj, original_color, new_color, outerGlow) {
        if(rgb2hex(obj.css('background-color')).toUpperCase() == original_color.toUpperCase()) {    

            obj.animate({"background-color": "#" + new_color, 'boxShadowBlur': outerGlow }, parseInt(options.blinkSpeed), 
                function(){
                    if(!dead)
                        toggleIllumination($(this), original_color, new_color, outerGlow);
                });
        }
        if(rgb2hex(obj.css('background-color')).toUpperCase() == new_color.toUpperCase()) { 
            obj.animate({"background-color": "#" + original_color, 'boxShadowBlur': '0px' }, parseInt(options.blinkSpeed), 
                function(){
                    if(!dead)
                        toggleIllumination($(this), original_color, new_color, outerGlow);
                });
        }
    }
    function colorAdd(hex, percent) {
        percentHex = parseInt(Math.round(parseFloat(percent)*16));
        return hexAdd(hex[0], percentHex) + hexAdd(hex[1], percentHex) + hexAdd(hex[2], percentHex) + hexAdd(hex[3], percentHex) + hexAdd(hex[4], percentHex) + hexAdd(hex[5], percentHex);
    }
    function hexAdd(val, val2) {
        result = parseInt(val, 16) + val2;
        if(result > 15) return 'F';
        return result.toString(16).toUpperCase();
    }
    function rgb2hex(rgb) {
        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        function hex(x) {
            return ("0" + parseInt(x).toString(16)).slice(-2);
        }
        return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
    }
    return this.each(function() {
        obj = $(this);
        if(obj.is("input")){
            if(obj.css('border') == ''){ obj.css('border', 'none') };
        }
        dead = false;
        original_color = rgb2hex(obj.css('background-color'));
        if(options.color == ''){
            new_color = colorAdd(original_color, options.intensity);
        } else {
            new_color = options.color.replace('#', '');
        }
        var BlurColor = '';
        if(options.outerGlowColor == ''){
            BlurColor = new_color;
        } else {
            BlurColor = options.outerGlowColor.replace('#', '');
        }
        obj.css('boxShadow','0px 0px 0px #'+BlurColor);
        var firstColor = '';
        var firstBlur = '';
        if(options.blink == 'true'){
            firstColor = original_color;
            firstBlur = '0px';
        } else {
            firstColor = new_color;
            firstBlur = options.outerGlowSize;
        }
        var outerGlow = '';
        if(options.outerGlow == 'true'){
            outerGlow = options.outerGlowSize;
        } else {
            outerGlow = '0px';
        }
        obj.animate({"background-color": "#" + firstColor, 'boxShadowBlur': firstBlur }, parseInt(options.blinkSpeed), 
            function(){
                if(options.blink == 'true')
                    toggleIllumination($(this), original_color, new_color, outerGlow);
            });
    });
};
var div = document.createElement('div'),
    divStyle = div.style,
    support = $.support,
    rWhitespace = /\s/,
    rParenWhitespace = /\)\s/;
div = null;
function insert_into(string, value, index) {
    var parts  = string.split(rWhitespace);
    parts[index] = value;
    return parts.join(" ");
}
$.cssHooks.boxShadowBlur = {
    get: function ( elem, computed, extra ) {
        return $.css(elem, 'boxShadow').split(rWhitespace)[5];
    },
    set: function( elem, value ) {
        elem.style[ 'boxShadow' ] = insert_into($.css(elem, 'boxShadow'), value, 5);
    }
};
$.fx.step[ "boxShadowBlur" ] = function( fx ) {
    $.cssHooks[ "boxShadowBlur" ].set( fx.elem, fx.now + fx.unit );
};
})(jQuery);

【讨论】:

  • 我添加了一条注释。以供将来参考,这样的东西可以保留为 cmets;如果您需要修复某些内容以使其在(例如)IE10 中工作,则编辑该帖子是相关的。未来的用户如果想了解更多,可以随时查看 cmets。
猜你喜欢
  • 1970-01-01
  • 2014-09-09
  • 2019-09-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多