我想使用 bootrap-slider与 jQuery 用户界面。我按照文档并在加载 Bootstrap CSS 和 jQuery 后加载了插件代码。
但是， slider 没有被初始化 - <input>保持原样，我在浏览器控制台中没有看到任何错误。
代码如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="./slider/bootstrap-slider.css" media="all" />
<script src="./slider/bootstrap-slider.js"></script>
</head>
<body>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
<script type="text/javascript">
// With JQuery
$('#ex1').slider({
formatter: function(value) {
return 'Current value: ' + value;
}
});
</script>
</body>
你能告诉我哪里出了问题吗？
最佳答案
问题是 jQuery UI 也有一个 slider widget使用slider()方法初始化，所以存在命名空间冲突。
如果您想单独使用 Bootstrap slider ，您可以从the download page 下载不带 slider 小部件的自定义jQuery ui。 .
或者如果您想同时使用两者，请像这样初始化 Bootstrap slider :
$('#ex1').bootstrapSlider({
formatter: function(value) {
return 'Current value: ' + value;
}
});
这是因为，根据下面的代码:
if($) { // line number 1192
var namespace = $.fn.slider ? 'bootstrapSlider' : 'slider';
$.bridget(namespace, Slider);
}
作者正在检查 namespace 中是否存在另一个名为slider 的插件，如果存在， slider 将被分配名称bootstrapSlider
$('#ex1').bootstrapSlider({
formatter: function(value) {
return 'Current value: ' + value;
}
});#ex1Slider .slider-selection {
background: #BABABA;
}<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://raw.githack.com/seiyria/bootstrap-slider/master/css/bootstrap-slider.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://raw.githack.com/seiyria/bootstrap-slider/master/js/bootstrap-slider.js"></script>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />关于javascript - 将 bootstrap-slider 与 jQuery UI 结合使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26691018/