滑块在浏览器中显示像盒子一样但在小提琴中工作正常（在控制台中没有错误显示）
我正在实现Slider，它在Fiddle (Working)中正常工作，但在浏览器中实现时显示类似框。以下是它在浏览器中显示的图片
。
code.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Multiple sliders</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="jquery-ui.css">
<!-- <script src="jquery-1.10.2.js"></script> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css" >
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<div class = "row">
<div class = "col-md-12">
<div class="wrapper4">
<p style = "text-align:center">
Subject Skill
</p>
<input id="ex16" data-slider-id='ex16Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" style="width: 100%; text-align:center;"/>
</div>
</div>
<div class = "col-md-12">
<div class = "col-md-4">
<div class="wrapper">
<hr />
<p>
Technical / Analytical
</p>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="1" style="text-align: center"/>
<hr />
<input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex4" data-slider-id='ex4Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex5" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex17" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex18" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
</div>
</div>
<div class = "col-md-4">
<div class="wrapper">
<hr />
<p>
Problem Solving
</p>
<input id="ex6" data-slider-id='ex6Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="1" />
<hr />
<input id="ex7" data-slider-id='ex7Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex8" data-slider-id='ex8Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex9" data-slider-id='ex9Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex10" data-slider-id='ex10Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
</div>
</div>
<div class = "col-md-4">
<hr />
<div class="wrapper">
<p>
Communication
</p>
<input id="ex11" data-slider-id='ex11Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="1" />
<hr />
<input id="ex12" data-slider-id='ex12Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex13" data-slider-id='ex13Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex14" data-slider-id='ex14Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex15" data-slider-id='ex15Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
</div>
</div>
</div>
</body>
</html>
sli.js
<script>
$('#ex1').slider({
value : 26,
formatter: function(value) {
return 'ABCD: ' + value;
}
});
$('#ex2').slider({
value : 2,
tooltip_position:'bottom',
reversed : true,
formatter: function(value) {
return 'A: ' + value;
}
});
$('#ex3').slider({
value : 6,
reversed : true,
formatter: function(value) {
return 'B: ' + value;
}
});
$('#ex4').slider({
value : 8,
reversed : true,
formatter: function(value) {
return 'C: ' + value;
}
});
$('#ex5').slider({
value : 4,
reversed : true,
formatter: function(value) {
return 'D: ' + value;
}
});
$('#ex17').slider({
value : 2,
reversed : true,
formatter: function(value) {
return 'D: ' + value;
}
});
$('#ex18').slider({
value : 5,
reversed : true,
formatter: function(value) {
return 'D: ' + value;
}
});
$('#ex6').slider({
value : 24,
formatter: function(value) {
return 'EFGH: ' + value;
}
});
$('#ex7').slider({
value : 9,
reversed : true,
formatter: function(value) {
return 'E: ' + value;
}
});
$('#ex8').slider({
value : 5,
reversed : true,
formatter: function(value) {
return 'F: ' + value;
}
});
$('#ex9').slider({
value : 3,
reversed : true,
formatter: function(value) {
return 'G: ' + value;
}
});
$('#ex10').slider({
value : 7,
reversed : true,
formatter: function(value) {
return 'H: ' + value;
}
});
$('#ex11').slider({
value : 34,
formatter: function(value) {
return 'EFGH: ' + value;
}
});
$('#ex12').slider({
value : 8,
reversed : true,
formatter: function(value) {
return 'E: ' + value;
}
});
$('#ex13').slider({
value : 5,
reversed : true,
formatter: function(value) {
return 'F: ' + value;
}
});
$('#ex14').slider({
value : 10,
reversed : true,
formatter: function(value) {
return 'G: ' + value;
}
});
$('#ex15').slider({
value : 11,
reversed : true,
formatter: function(value) {
return 'H: ' + value;
}
});
$('#ex16').slider({
value : 84,
formatter: function(value) {
return 'ABCDEFGH: ' + value;
}
});
// If you want to change slider using Sub-Skills
$("#ex2,#ex3,#ex4,#ex5,#ex17,#ex18").on("slide", function() {
$('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue')+ $('#ex17').slider('getValue')+ $('#ex18').slider('getValue'));
});
// If you want to change slider using Sub-Skills
$("#ex7,#ex8,#ex9,#ex10").on("slide", function() {
$('#ex6').slider('setValue', $('#ex7').slider('getValue') + $('#ex8').slider('getValue')+ $('#ex9').slider('getValue')+ $('#ex10').slider('getValue'));
});
// If you want to change slider using Sub-Skills
$("#ex12,#ex13,#ex14,#ex15").on("slide", function() {
$('#ex11').slider('setValue', $('#ex12').slider('getValue') + $('#ex13').slider('getValue')+ $('#ex14').slider('getValue')+ $('#ex15').slider('getValue'));
});
// If you want to change slider using Main Skills
$("#ex2,#ex3,#ex4,#ex5,#ex7,#ex8,#ex9,#ex10,#ex12,#ex13,#ex14,#ex15").on("slide", function() {
$('#ex16').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue')+ $('#ex7').slider('getValue')+ $('#ex8').slider('getValue')+ $('#ex9').slider('getValue')+ $('#ex10').slider('getValue')+ $('#ex12').slider('getValue')+ $('#ex13').slider('getValue')+ $('#ex14').slider('getValue')+ $('#ex15').slider('getValue'));
});
控制台中没有错误，我已经包含了几乎所有必要的文件，包括css。但仍然只有盒子可见而不是滑块。
请你指出，可能是错误，因为我在相当露水的日子里挣扎着。
1 个答案:
答案 0 :(得分：0)
尝试在Chrome上运行此代码，对我来说工作正常
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Multiple sliders</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css" >
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>
<script>
$(document).ready(function(){
$('#ex1').slider({
value : 26,
formatter: function(value) {
return 'ABCD: ' + value;
}
});
$('#ex2').slider({
value : 2,
tooltip_position:'bottom',
reversed : true,
formatter: function(value) {
return 'A: ' + value;
}
});
$('#ex3').slider({
value : 6,
reversed : true,
formatter: function(value) {
return 'B: ' + value;
}
});
$('#ex4').slider({
value : 8,
reversed : true,
formatter: function(value) {
return 'C: ' + value;
}
});
$('#ex5').slider({
value : 4,
reversed : true,
formatter: function(value) {
return 'D: ' + value;
}
});
$('#ex17').slider({
value : 2,
reversed : true,
formatter: function(value) {
return 'D: ' + value;
}
});
$('#ex18').slider({
value : 5,
reversed : true,
formatter: function(value) {
return 'D: ' + value;
}
});
$('#ex6').slider({
value : 24,
formatter: function(value) {
return 'EFGH: ' + value;
}
});
$('#ex7').slider({
value : 9,
reversed : true,
formatter: function(value) {
return 'E: ' + value;
}
});
$('#ex8').slider({
value : 5,
reversed : true,
formatter: function(value) {
return 'F: ' + value;
}
});
$('#ex9').slider({
value : 3,
reversed : true,
formatter: function(value) {
return 'G: ' + value;
}
});
$('#ex10').slider({
value : 7,
reversed : true,
formatter: function(value) {
return 'H: ' + value;
}
});
$('#ex11').slider({
value : 34,
formatter: function(value) {
return 'EFGH: ' + value;
}
});
$('#ex12').slider({
value : 8,
reversed : true,
formatter: function(value) {
return 'E: ' + value;
}
});
$('#ex13').slider({
value : 5,
reversed : true,
formatter: function(value) {
return 'F: ' + value;
}
});
$('#ex14').slider({
value : 10,
reversed : true,
formatter: function(value) {
return 'G: ' + value;
}
});
$('#ex15').slider({
value : 11,
reversed : true,
formatter: function(value) {
return 'H: ' + value;
}
});
$('#ex16').slider({
value : 84,
formatter: function(value) {
return 'ABCDEFGH: ' + value;
}
});
// If you want to change slider using Sub-Skills
$("#ex2,#ex3,#ex4,#ex5,#ex17,#ex18").on("slide", function() {
$('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue')+ $('#ex17').slider('getValue')+ $('#ex18').slider('getValue'));
});
// If you want to change slider using Sub-Skills
$("#ex7,#ex8,#ex9,#ex10").on("slide", function() {
$('#ex6').slider('setValue', $('#ex7').slider('getValue') + $('#ex8').slider('getValue')+ $('#ex9').slider('getValue')+ $('#ex10').slider('getValue'));
});
// If you want to change slider using Sub-Skills
$("#ex12,#ex13,#ex14,#ex15").on("slide", function() {
$('#ex11').slider('setValue', $('#ex12').slider('getValue') + $('#ex13').slider('getValue')+ $('#ex14').slider('getValue')+ $('#ex15').slider('getValue'));
});
// If you want to change slider using Main Skills
$("#ex2,#ex3,#ex4,#ex5,#ex7,#ex8,#ex9,#ex10,#ex12,#ex13,#ex14,#ex15").on("slide", function() {
$('#ex16').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue')+ $('#ex7').slider('getValue')+ $('#ex8').slider('getValue')+ $('#ex9').slider('getValue')+ $('#ex10').slider('getValue')+ $('#ex12').slider('getValue')+ $('#ex13').slider('getValue')+ $('#ex14').slider('getValue')+ $('#ex15').slider('getValue'));
});
});
</script>
</head>
<body>
<div class = "row">
<div class = "col-md-12">
<div class="wrapper4">
<p style = "text-align:center">
Subject Skill
</p>
<input id="ex16" data-slider-id='ex16Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" style="width: 100%; text-align:center;"/>
</div>
</div>
<div class = "col-md-12">
<div class = "col-md-4">
<div class="wrapper">
<hr />
<p>
Technical / Analytical
</p>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="1" style="text-align: center"/>
<hr />
<input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex4" data-slider-id='ex4Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex5" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex17" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex18" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
</div>
</div>
<div class = "col-md-4">
<div class="wrapper">
<hr />
<p>
Problem Solving
</p>
<input id="ex6" data-slider-id='ex6Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="1" />
<hr />
<input id="ex7" data-slider-id='ex7Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex8" data-slider-id='ex8Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex9" data-slider-id='ex9Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex10" data-slider-id='ex10Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
</div>
</div>
<div class = "col-md-4">
<hr />
<div class="wrapper">
<p>
Communication
</p>
<input id="ex11" data-slider-id='ex11Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="1" />
<hr />
<input id="ex12" data-slider-id='ex12Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex13" data-slider-id='ex13Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex14" data-slider-id='ex14Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
<input id="ex15" data-slider-id='ex15Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
</div>
</div>
</div>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？