jQuery 浏览器扩展中的滑块在 firefox 中不起作用
jQuery Slider in a browser extension not working in firefox
我正在创建一个浏览器扩展,我在其中使用 jQuery Range2DSlider 插件 v1.0.5。如果安装在 Chrome 中,Slider 可以工作,但不能在 firefox 中工作。 firefox 中显示的错误消息是
Warning: Argument 1 of Node.appendChild does not implement interface
Node. Function-name: appAPI.message.addListener User callback
当滑块运行器附加到滑块框时会发生此错误。 Range2DSlider插件中追加runner的代码如下
// create runners
var $runner;
for(i=0;i<_this.values.length;i++){
if( !_this.$runners[i] ){
_this.$runners.push($runner = $('<div class="xdsoft_range2dslider_runner xdsoft_range2dslider_runner'+i+'"></div>'));
$runner.append($inrunner = $('<input type="button">'));
$runner[0].ranges = [];
$runner.addClass('xdsoft_range2dslider_'+_this.options.runnerClassSkin.xd(i));
!function(i){
$inrunner
.on('focus',function(){
$('.xdsoft_range2dslider_active').removeClass('xdsoft_range2dslider_active');
$(this).parent().addClass('xdsoft_range2dslider_active');
})
.on('keydown',function( event ){
var relX = _this.values[i][0],
relY = _this.values[i][1],
ax = _this.options.allowAxisMove.xd(0,'both');
switch( event.which ){
case ARROWUP:
if( ax=='both'||ax=='y' ){
relY+=_this.options.stepOnKey.xd(1);
}
break;
case ARROWDOWN:
if( ax=='both'||ax=='y' ){
relY-=_this.options.stepOnKey.xd(1);
}
break;
case ARROWRIGHT:
if( ax=='both'||ax=='x' ){
relX+=_this.options.stepOnKey.xd(0);
}
break;
case ARROWLEFT:
if( ax=='both'||ax=='x' ){
relX-=_this.options.stepOnKey.xd(0);
}
break;
default: return true;
}
setValue(_this,i,relX,relY);
event.stopPropagation();
event.preventDefault();
});
}(i);
}else{
for(var t=0;t<_this.$runners[i][0].ranges.length;t++)
_this.$runners[i][0].ranges[t].rect.remove();
_this.$runners[i][0].ranges = [];
}
}
// for second init remove extra sliders
for(i=_this.values.length;i<_this.$runners.length;i++){
_this.$runners[i].remove();
}
_this.$runners.length = _this.values.length;
if( $.isArray(_this.options.showRanges)&&_this.options.showRanges.length&&_this.values.length>1 ){
var range,$range ;
for(i=0;i< _this.options.showRanges.length;i++){
rangeBetween = _this.options.showRanges.xd(i);
if( rangeBetween && $.isArray(rangeBetween) && rangeBetween.length && rangeBetween[0]!=rangeBetween[1] && _this.$runners[rangeBetween[0]] && _this.$runners[rangeBetween[1]] ){
$range = $('<div class="xdsoft_range2dslider_range xdsoft_range2dslider_range'+i+'"></div>');
_this.$runners[rangeBetween[0]][0].ranges.push({rect:$range,rb:rangeBetween});
_this.$runners[rangeBetween[1]][0].ranges.push({rect:$range,rb:rangeBetween});
_this.$sliderBox.append($range);
$range.on('mousedown',function(e){
e.stopPropagation();
});
}
}
}
_this.$sliderBox
.css({
height:_this.options.height,
width:_this.options.width
})
.append(_this.$runners);
如有任何帮助,我们将不胜感激。提前致谢
这里的 _this.$runners 是一个 jQuery 对象。 append 方法只接受 DOM 个元素。将 jQuery 对象更改为 DOM 元素即可。
_this.$sliderBox
.css({
height:_this.options.height,
width:_this.options.width
})
.append(_this.$runners[0]);
此代码现在有效
我正在创建一个浏览器扩展,我在其中使用 jQuery Range2DSlider 插件 v1.0.5。如果安装在 Chrome 中,Slider 可以工作,但不能在 firefox 中工作。 firefox 中显示的错误消息是
Warning: Argument 1 of Node.appendChild does not implement interface Node. Function-name: appAPI.message.addListener User callback
当滑块运行器附加到滑块框时会发生此错误。 Range2DSlider插件中追加runner的代码如下
// create runners
var $runner;
for(i=0;i<_this.values.length;i++){
if( !_this.$runners[i] ){
_this.$runners.push($runner = $('<div class="xdsoft_range2dslider_runner xdsoft_range2dslider_runner'+i+'"></div>'));
$runner.append($inrunner = $('<input type="button">'));
$runner[0].ranges = [];
$runner.addClass('xdsoft_range2dslider_'+_this.options.runnerClassSkin.xd(i));
!function(i){
$inrunner
.on('focus',function(){
$('.xdsoft_range2dslider_active').removeClass('xdsoft_range2dslider_active');
$(this).parent().addClass('xdsoft_range2dslider_active');
})
.on('keydown',function( event ){
var relX = _this.values[i][0],
relY = _this.values[i][1],
ax = _this.options.allowAxisMove.xd(0,'both');
switch( event.which ){
case ARROWUP:
if( ax=='both'||ax=='y' ){
relY+=_this.options.stepOnKey.xd(1);
}
break;
case ARROWDOWN:
if( ax=='both'||ax=='y' ){
relY-=_this.options.stepOnKey.xd(1);
}
break;
case ARROWRIGHT:
if( ax=='both'||ax=='x' ){
relX+=_this.options.stepOnKey.xd(0);
}
break;
case ARROWLEFT:
if( ax=='both'||ax=='x' ){
relX-=_this.options.stepOnKey.xd(0);
}
break;
default: return true;
}
setValue(_this,i,relX,relY);
event.stopPropagation();
event.preventDefault();
});
}(i);
}else{
for(var t=0;t<_this.$runners[i][0].ranges.length;t++)
_this.$runners[i][0].ranges[t].rect.remove();
_this.$runners[i][0].ranges = [];
}
}
// for second init remove extra sliders
for(i=_this.values.length;i<_this.$runners.length;i++){
_this.$runners[i].remove();
}
_this.$runners.length = _this.values.length;
if( $.isArray(_this.options.showRanges)&&_this.options.showRanges.length&&_this.values.length>1 ){
var range,$range ;
for(i=0;i< _this.options.showRanges.length;i++){
rangeBetween = _this.options.showRanges.xd(i);
if( rangeBetween && $.isArray(rangeBetween) && rangeBetween.length && rangeBetween[0]!=rangeBetween[1] && _this.$runners[rangeBetween[0]] && _this.$runners[rangeBetween[1]] ){
$range = $('<div class="xdsoft_range2dslider_range xdsoft_range2dslider_range'+i+'"></div>');
_this.$runners[rangeBetween[0]][0].ranges.push({rect:$range,rb:rangeBetween});
_this.$runners[rangeBetween[1]][0].ranges.push({rect:$range,rb:rangeBetween});
_this.$sliderBox.append($range);
$range.on('mousedown',function(e){
e.stopPropagation();
});
}
}
}
_this.$sliderBox
.css({
height:_this.options.height,
width:_this.options.width
})
.append(_this.$runners);
如有任何帮助,我们将不胜感激。提前致谢
这里的 _this.$runners 是一个 jQuery 对象。 append 方法只接受 DOM 个元素。将 jQuery 对象更改为 DOM 元素即可。
_this.$sliderBox
.css({
height:_this.options.height,
width:_this.options.width
})
.append(_this.$runners[0]);
此代码现在有效