插件照亮 0.7 与 jQuery 1.9.1 或 jQuery-UI 1.10.3 不兼容

问题描述

插件jquery.illuminate.0.7 工作在 chrome 30、firefox 22 和 IE 10 中.它使用

The plugin jquery.illuminate.0.7 works in chrome 30, firefox 22 and IE 10. It uses

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

但是更改 jQuery 和 jQuery-UI 的版本 导致照明插件的演示仅适用于 chrome 30.演示使用

But changing the version of jQuery and jQuery-UI the causes the demo of the illuminate plugin to only work in chrome 30. The demo uses

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

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

In firefox 22 it causes the following error:

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只是按钮

The relevant html is only the button

<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的github页面还是包含匹配函数(见第 111 行):

The github page of jquery still contains a matching function (see line 111):

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

我的问题

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

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

User Dave asked how i load the javascript libraries. I load them synchronously in the following order:

<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 指出 这可能与已弃用的 curCSS 有关/a>.我在 jQuery 1.9.1 中找到了以下代码:

User Sumurai pointed out that it could have to do with the deprecated curCSS. I found the following code in 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.该插件为 cssHooks 添加了另一个属性:$.cssHooks.boxShadowBlur.但据我所知，此方法与 cssHooks.opacity 无关.因此 curCSS 应该没有效果.

So jQuery 1.9.1 still uses curCSS for the cssHooks.opacity. The plugin illuminate adds another property to cssHooks: $.cssHooks.boxShadowBlur. But as far as i can tell this method has nothing to do with cssHooks.opacity. Therefore the curCSS should have no effect.

推荐答案

哇，这需要一些调试.

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

The problem is that illuminate assumes that jQuery doesn't support the box-shadow property, but the newer jQuery version does. That means that when vendor prefixes aren't available (which they aren't in the latest FireFox), you get either an infinite loop or an undefined property. Fortunately illuminate went with an undefined property BoxShadow instead of the infinite loop which would have come from using boxShadow (as I found out, leading to several browser hangs).

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

So that's the problem, what's the fix? Strip the offending code from illuminate. All cases of support.boxShadow should be changed to simply 'boxShadow', and the cssHooks.boxShadow block removed. You can also delete the bit which sets support.boxShadow in the first place.

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

My test case is here: http://jsfiddle.net/JbTcs/2/ and works in FireFox and Chrome, and I'm told IE10. The fixed source code for illuminate is:

/*
 * 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);

这篇关于插件照亮 0.7 与 jQuery 1.9.1 或 jQuery-UI 1.10.3 不兼容 ->类型错误:$.css(...) 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！