問題描述
插件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模板網！