4

jQuery または jQuery-UI の変更は、プラグインjquery.illuminate.0.7と互換性がありません

プラグインjquery.illuminate.0.7、chrome 30、firefox 22、および IE 10 で動作します。それは使用しています

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

しかし、jQuery と jQuery-UI のバージョンを変更すると、illuminate プラグインのデモが 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>

私は何を試しましたか

エラーが発生する場所を確認するために、illuminate プラグインのソース コードを調べました。メソッドには、次の$.cssHooks.boxShadowBlurjs が含まれています。

$.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 行目を参照)。

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

私の質問

  • jQuery.js または jQuery-ui で、$.css(...)失敗の原因となる可能性のある重大な変更が発生しましたか?
  • プラグインを jquery および jquery-ui (1.10.3) の最新 (または少なくとも 1.9.1) バージョンと互換性を持たせるにはどうすればよいですか?

これまでの更新とポインター

ユーザー 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>

ユーザーの Sumraiは、非推奨の に関係がある可能性があると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 ....

curCSSそのため、jQuery 1.9.1 は引き続きcssHooks.opacity. プラグイン illuminate は、cssHooks: に別のプロパティを追加します$.cssHooks.boxShadowBlur。しかし、私が知る限り、このメソッドは とは何の関係もありませんcssHooks.opacity。したがって、curCSS効果はありません。

4

1 に答える 1

2

まあ、それにはデバッグが必要でした。

問題は、illuminate が jQuery が box-shadow プロパティをサポートしていないと想定していることですが、新しい jQuery バージョンはサポートしています。つまり、ベンダー プレフィックスが利用できない場合 (最新の FireFox にはありません)、無限ループまたは未定義のプロパティが発生します。幸いなことに、illuminate は、使用に起因BoxShadowする無限ループの代わりに、未定義のプロパティを使用しboxShadowました (私が知ったように、いくつかのブラウザーがハングする原因となりました)。

それが問題です、修正は何ですか?問題のあるコードを illuminate から取り除きます。のすべてのケースsupport.boxShadowを単に'boxShadow'に変更し、cssHooks.boxShadowブロックを削除する必要があります。最初に設定したビットを削除することもできますsupport.boxShadow

私のテスト ケースはここにあります: http://jsfiddle.net/JbTcs/2/で、FireFox と Chrome で動作し、IE10 で動作します。illuminate の固定ソース コードは次のとおりです。

/*
 * 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);
于 2013-08-04T15:42:18.600 に答える