一个网页,使用一个别人的拖动滑块变动数值的小东西后,整个网面的文字图片等都无法选择了。
求高手帮助看一下。JS里代码如下
(function($){var themes=[];$.fn.slidy=function(options){var defaultOptions={width:168,maxval:12,minval:1,interval:1,scale:20,numberOfValue:0,finishedCallback:null,moveCallback:null,defaultValue:null,theme:{image:'themes/blue.png',width:168,height:36}}
$.extend(defaultOptions,options);defaultOptions.width=defaultOptions.theme.width;var cacheImage=document.createElement('img');cacheImage.src=defaultOptions.theme.image;themes.push(cacheImage)
defaultOptions.theme.height=defaultOptions.theme.height/2;this.each(function(){var slider=$(this);$('<div class="value"></div><div class="cursor"></div>').appendTo(slider);slider.css({overflow:'hidden',position:'relative','background-repeat':'no-repeat','background-image':"url('"+cacheImage.src+"')",'height':defaultOptions.theme.height+'px','width':defaultOptions.theme.width+'px'});$('div',slider).css({margin:'0px',padding:'0px','background-repeat':'no-repeat'})
$('.value',slider).css({top:'0px',position:'absolute','z-index':'1','background-repeat':'no-repeat','background-position':'0px -'+defaultOptions.theme.height+'px',left:'-95px','background-image':"url('"+cacheImage.src+"')",'height':defaultOptions.theme.height+'px','width':defaultOptions.theme.width+'px'})
$('.cursor',slider).css({top:'0px',position:'absolute','z-index':2,'background-repeat':'no-repeat','background-position':'0px -'+(2*defaultOptions.theme.height)+'px',left:'0px','background-image':"url('"+cacheImage.src+"')",'height':defaultOptions.theme.height+'px','width':defaultOptions.theme.width+'px'})
var aSlider={width:106,maxval:10,minval:10,interval:0.5,scale:20,numberOfValue:0,clickedOnCursor:false,currentValue:1,previousValue:0,isCalled:false,finishedCallback:null,moveCallback:null,init:function(options){this.width=options.width;this.maxval=options.maxval;this.minval=options.minval;this.interval=options.interval;this.finishedCallback=options.finishedCallback;this.moveCallback=options.moveCallback;this.numberOfValue=this.maxval/this.interval;this.scale=this.width/this.numberOfValue;if(options.defaultValue==null){this.setValue(options.minval/this.interval);}else{this.setValue(options.defaultValue/this.interval);}
$(document).mouseup(function(){aSlider.clickedOnCursor=false;if(!aSlider.isCalled){aSlider.finishedCallback&&aSlider.finishedCallback.call(this,aSlider.currentValue*aSlider.interval);aSlider.isCalled=true;}}).mousemove(function(e){e.preventDefault();e.stopPropagation();aSlider.handleCursor(e);});$('.cursor',slider).mouseup(function(){aSlider.clickedOnCursor=false;}).mousedown(function(e){e.preventDefault();aSlider.clickedOnCursor=true;});},handleCursor:function(e){if(aSlider.clickedOnCursor){var sliderOffest=$(slider).offset();var pos=[];pos[0]=e.pageX-sliderOffest.left;var valueLevelAtCurosor=Math.floor(pos[0]*this.numberOfValue/this.width);this.currentValue=valueLevelAtCurosor<=1?1:valueLevelAtCurosor;this.currentValue=this.currentValue>=this.numberOfValue?this.numberOfValue:this.currentValue;if(this.previousValue!=this.currentValue){this.setValue(this.currentValue);this.previousValue=this.currentValue;}}},setValue:function(value){this.currentValue=value;aSlider.moveCallback&&aSlider.moveCallback.call(this,aSlider.currentValue*aSlider.interval);var newLeftPos=aSlider.width-Math.floor(value*this.scale);if(newLeftPos>=(-aSlider.width+this.scale)){}
$('.value',slider).css({'left':'-'+newLeftPos+'px'});aSlider.isCalled=false;}}
aSlider.init(defaultOptions);});}})(jQuery);
HTML源码如下:
<div class="container">
<div id="rating-22"></div>
<div>我要 <INPUT id=ps_num class=inp value=1 align=absMiddle size=3 name=ps_num> 件</div>
<p>
<script type="text/javascript">
$(document).ready(function () {
$('#rating-22').slidy({
maxval: 12,
interval: 1,
defaultValue: 1,
finishedCallback: function (value) {
},
moveCallback: function (value) {
document.getElementById('ps_num').value = value;
}
});
})
</script>
</p>
</div>如何让这个JS的范围只在这个<div class="container">里。
求高手帮助看一下。JS里代码如下
(function($){var themes=[];$.fn.slidy=function(options){var defaultOptions={width:168,maxval:12,minval:1,interval:1,scale:20,numberOfValue:0,finishedCallback:null,moveCallback:null,defaultValue:null,theme:{image:'themes/blue.png',width:168,height:36}}
$.extend(defaultOptions,options);defaultOptions.width=defaultOptions.theme.width;var cacheImage=document.createElement('img');cacheImage.src=defaultOptions.theme.image;themes.push(cacheImage)
defaultOptions.theme.height=defaultOptions.theme.height/2;this.each(function(){var slider=$(this);$('<div class="value"></div><div class="cursor"></div>').appendTo(slider);slider.css({overflow:'hidden',position:'relative','background-repeat':'no-repeat','background-image':"url('"+cacheImage.src+"')",'height':defaultOptions.theme.height+'px','width':defaultOptions.theme.width+'px'});$('div',slider).css({margin:'0px',padding:'0px','background-repeat':'no-repeat'})
$('.value',slider).css({top:'0px',position:'absolute','z-index':'1','background-repeat':'no-repeat','background-position':'0px -'+defaultOptions.theme.height+'px',left:'-95px','background-image':"url('"+cacheImage.src+"')",'height':defaultOptions.theme.height+'px','width':defaultOptions.theme.width+'px'})
$('.cursor',slider).css({top:'0px',position:'absolute','z-index':2,'background-repeat':'no-repeat','background-position':'0px -'+(2*defaultOptions.theme.height)+'px',left:'0px','background-image':"url('"+cacheImage.src+"')",'height':defaultOptions.theme.height+'px','width':defaultOptions.theme.width+'px'})
var aSlider={width:106,maxval:10,minval:10,interval:0.5,scale:20,numberOfValue:0,clickedOnCursor:false,currentValue:1,previousValue:0,isCalled:false,finishedCallback:null,moveCallback:null,init:function(options){this.width=options.width;this.maxval=options.maxval;this.minval=options.minval;this.interval=options.interval;this.finishedCallback=options.finishedCallback;this.moveCallback=options.moveCallback;this.numberOfValue=this.maxval/this.interval;this.scale=this.width/this.numberOfValue;if(options.defaultValue==null){this.setValue(options.minval/this.interval);}else{this.setValue(options.defaultValue/this.interval);}
$(document).mouseup(function(){aSlider.clickedOnCursor=false;if(!aSlider.isCalled){aSlider.finishedCallback&&aSlider.finishedCallback.call(this,aSlider.currentValue*aSlider.interval);aSlider.isCalled=true;}}).mousemove(function(e){e.preventDefault();e.stopPropagation();aSlider.handleCursor(e);});$('.cursor',slider).mouseup(function(){aSlider.clickedOnCursor=false;}).mousedown(function(e){e.preventDefault();aSlider.clickedOnCursor=true;});},handleCursor:function(e){if(aSlider.clickedOnCursor){var sliderOffest=$(slider).offset();var pos=[];pos[0]=e.pageX-sliderOffest.left;var valueLevelAtCurosor=Math.floor(pos[0]*this.numberOfValue/this.width);this.currentValue=valueLevelAtCurosor<=1?1:valueLevelAtCurosor;this.currentValue=this.currentValue>=this.numberOfValue?this.numberOfValue:this.currentValue;if(this.previousValue!=this.currentValue){this.setValue(this.currentValue);this.previousValue=this.currentValue;}}},setValue:function(value){this.currentValue=value;aSlider.moveCallback&&aSlider.moveCallback.call(this,aSlider.currentValue*aSlider.interval);var newLeftPos=aSlider.width-Math.floor(value*this.scale);if(newLeftPos>=(-aSlider.width+this.scale)){}
$('.value',slider).css({'left':'-'+newLeftPos+'px'});aSlider.isCalled=false;}}
aSlider.init(defaultOptions);});}})(jQuery);
HTML源码如下:
<div class="container">
<div id="rating-22"></div>
<div>我要 <INPUT id=ps_num class=inp value=1 align=absMiddle size=3 name=ps_num> 件</div>
<p>
<script type="text/javascript">
$(document).ready(function () {
$('#rating-22').slidy({
maxval: 12,
interval: 1,
defaultValue: 1,
finishedCallback: function (value) {
},
moveCallback: function (value) {
document.getElementById('ps_num').value = value;
}
});
})
</script>
</p>
</div>如何让这个JS的范围只在这个<div class="container">里。
如<script type="text/javascript" for="container">
$(document).ready(function () {
$('#rating-22').slidy({
maxval: 12,
interval: 1,
defaultValue: 1,
finishedCallback: function (value) {
},
moveCallback: function (value) {
document.getElementById('ps_num').value = value;
}
});
}
//这里试着启用下那个事件
if($.browser.msie)//IE
$(body).bind("select","return true");
)
</script>