Javascript 在 jQuery UI 中使用 bootstrap-slider
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26691018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using bootstrap-slider with jQuery UI
提问by Matt
I want to use bootrap-sliderwith jQuery UI. I am following the documentation and loaded the plugin code after loading the Bootstrap CSS and jQuery.
我想在jQuery UI 中使用bootrap-slider。我正在关注文档并在加载 Bootstrap CSS 和 jQuery 后加载插件代码。
However, the slider is not getting initialized - the <input>remains as it is, and I don't see any error in browser console.
但是，滑块没有初始化 -<input>保持原样，我在浏览器控制台中没有看到任何错误。
Following is the code:
以下是代码：
<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>
Could you please tell me what is wrong?
你能告诉我有什么问题吗？
回答by T J
The issue is that jQuery UI also has a slider widgetinitialized using slider()method, So there is a namespace collision.
问题是 jQuery UI 也有一个使用方法初始化的滑块小部件slider()，因此存在命名空间冲突。
If you want to use the bootstrap slider alone, you can download custom jQuery ui without the slider widget from the download page.
如果您想单独使用引导滑块，您可以从下载页面下载没有滑块小部件的自定义 jQuery ui 。
Or if you want to use both, initialize the bootstrap slider like:
或者，如果您想同时使用两者，请初始化引导滑块，如：
$('#ex1').bootstrapSlider({
formatter: function(value) {
return 'Current value: ' + value;
}
});
This is because, according to the following code:
这是因为，根据以下代码：
if($) { // line number 1192
var namespace = $.fn.slider ? 'bootstrapSlider' : 'slider';
$.bridget(namespace, Slider);
}
The author is checking whether another plugin with the name sliderexists in the namespace, if it exists, the slider will be assigned the name bootstrapSlider
作者正在检查命名空间中是否存在另一个名为滑块的插件，如果存在，滑块将被分配名称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" />回答by rishiAgar
Rearranging script files and removing jquery-ui.min.js makes it work.
重新排列脚本文件并删除 jquery-ui.min.js 使其工作。
<html>
<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>
<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' 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>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style type="text/css">
#ex1Slider .slider-selection {
background: #BABABA;
}
</style>
</body>
</html>
