插件照亮了与jQuery 1.9.1或jQuery-UI 1.10.3不兼容的0.7-> TypeError:$ .css(...)未定义 [英] plugin illuminate 0.7 incompatible to jQuery 1.9.1 or jQuery-UI 1.10.3 -> TypeError: $.css(...) is undefined

查看：78
本文介绍了插件照亮了与jQuery 1.9.1或jQuery-UI 1.10.3不兼容的0.7-> TypeError:$ .css(...)未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

jquery.illuminate.0.7 插件 .它使用

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>

我尝试了什么

我浏览了illuminate插件的源代码以查看错误发生的位置.方法$.cssHooks.boxShadowBlur包含以下js:

What have i tried

I looked through the source code of the illuminate plugin to see where the error occurs. The method $.cssHooks.boxShadowBlur contains this 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(...)失败的重大更改
  • 我如何做才能使插件与jquery和jquery-ui(1.10.3)的最新(或至少1.9.1)版本兼容

    • My Question

    • Did any breaking change occur in jQuery.js or jQuery-ui that could be responsible for $.css(...) failing
    • what can i do to make the plugin compatible to the latest (or at least 1.9.1) version of jquery and 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 有关.我在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.

      推荐答案

      嗯，这需要进行一些调试.

      Whew, well that took some debugging.

      问题是，照亮假设jQuery不支持box-shadow属性，但是较新的jQuery版本支持.这意味着当供应商前缀不可用时(最新的FireFox中没有)，您将获得无限循环或未定义的属性.幸运的是，光照具有一个未定义的属性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);

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆