1
我设置了一些样式,使jQuery滑块看起来不错。用于UI滑块处理程序的图像。 我在IE和谷歌浏览器中工作正常。但它在Safari和Firefox中无法正常工作。
我试图fiddle它,并检查在不同的浏览器中的小提琴输出。它工作得很好。
定制的jQuery滑块给不同的浏览器输出奇怪的结果
我不明白为什么它不起作用,如果相同的源代码运行在我的桌面上(在broweres Safari和Firefox)。我想这个脚本可能被调用在错误的地方。我试图调用脚本尽管不同的地方。
输出在不同浏览器**
**谷歌浏览器 火狐 Safari浏览器 这里是我的代码:
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.vUiSliderWrapper{
overflow:hidden;
}
.vUiSlider{
height:7px;
background-image:-ms-linear-gradient(top, #b9b9b9,#e0e0e0);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType="0",startColorStr="#b9b9b9",endColorStr="#e0e0e0");
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#e0e0e0)) !important;
background: -moz-linear-gradient(top,#b9b9b9,#e0e0e0) !important;
}
.vUiSlider .ui-slider-handle{
border:none;
background:url('http://s14.postimage.org/wo9hknojx/slider_handles.png') 0 -27px no-repeat;
width:20px;
height:17px;
outline: none;
}
.vUiSlider .ui-slider-handle:hover{
background-position:0 -4px;
}
.vUiSlider .ui-slider-range{
border-radius:4px;
background-image:-ms-linear-gradient(top, #04adff,#0083c1);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType="0",startColorStr="#04adff",endColorStr="#0083c1");
background: -webkit-gradient(linear, left top, left bottom, from(#04adff), to(#0083c1)) !important;
background: -moz-linear-gradient(top,#04adff,#0083c1) !important;
}
#sld1 .vUiSlider{
width:200px;
}
</style>
</head>
<body>
<span id="sld1" class="vUiSliderWrapper">
<div class="vUiSlider"></div>
<input type="text" role="data"/>
</span>
<span id="sld2" class="vUiSliderWrapper">
<div class="vUiSlider"></div>
<input type="text" role="data"/>
</span>
<script>
$(document).ready(function(){
$('.vUiSliderWrapper .vUiSlider').slider({
range: "min",
min:0,
max:100,
value:3,
animate: true,
slide:function(event, ui){
$(this).siblings('input[role="data"]').val(ui.value);
}
});
});
</script>
</body>
</html>