使用带有jQuery UI的bootstrap-slider [英] Using bootstrap-slider with jQuery UI
问题描述
我想在jQuery UI中使用 bootrap-slider 。我在加载Bootstrap CSS和jQuery后遵循文档并加载了插件代码。
I want to use bootrap-slider with jQuery UI. I am following the documentation and loaded the plugin code after loading the Bootstrap CSS and jQuery.
但是，滑块未初始化 - < ;输入> 保持原样，我在浏览器控制台中看不到任何错误。
However, the slider is not getting initialized - the <input> remains as it is, and I don't see any error in browser console.
以下是代码：
<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?
推荐答案
问题是jQuery UI还使用<$ c初始化了滑块小部件 $ c> slider（）方法，所以存在命名空间冲突。
The issue is that jQuery UI also has a slider widget initialized using slider() method, So there is a namespace collision.
如果你想单独使用bootstrap滑块，你可以下载自定义jQuery ui没有来自下载页面的滑块小部件。
If you want to use the bootstrap slider alone, you can download custom jQuery ui without the slider widget from the download page.
或者如果你想同时使用两者，初始化引导滑块如：
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);
}
作者正在检查是否有另一个名为 slider的插件存在于命名空间中，如果存在，滑块将被分配名称 bootstrapSlider
The author is checking whether another plugin with the name slider exists in the namespace, if it exists, the slider will be assigned the name 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" />
这篇关于使用带有jQuery UI的bootstrap-slider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
