使用带有 jQuery UI 的引导滑块答案

【问题标题】：Using bootstrap-slider with jQuery UI使用带有 jQuery UI 的引导滑块
【发布时间】：2014-11-01 15:56:14
【问题描述】：

我想在 jQuery UI 中使用 bootrap-slider。在加载 Bootstrap CSS 和 jQuery 之后，我正在关注文档并加载插件代码。

但是，滑块没有被初始化 - <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>

你能告诉我有什么问题吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap jquery-ui bootstrap-slider

【解决方案1】：

问题是 jQuery UI 也有一个 slider widget 使用 slider() 方法初始化，所以存在命名空间冲突。

如果您想单独使用引导滑块，您可以从the download page 下载不带滑块小部件的自定义 jQuery ui。

或者如果你想同时使用这两个，初始化引导滑块：

$('#ex1').bootstrapSlider({
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});

这是因为，根据如下代码：

if($) { // line number 1192
    var namespace = $.fn.slider ? 'bootstrapSlider' : 'slider';
    $.bridget(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" />

【讨论】：

优秀的答案。谢谢你。我想奖励你的答案，但我可以在 13 小时内完成。
嗨@TJ，我面临同样的问题，我尝试使用“.bootstrapSlider”而不是“.slider”，但似乎没有任何改变，因此我只剩下空文本框......你能帮我解决这个问题吗？
@NishiBangar 你用的是同一个插件吗？如果有，是哪个版本？如果您可以创建一个在线演示来演示该问题，那么检查问题所在会更容易......
@TJ，这里是code sample。
@NishiBangar 您正在使用 AngularJS，这是一个完全不同的问题...您应该为滑块创建一个 AngularJS directive（可能已经有一个）而不是尝试在控制器中初始化。

【解决方案2】：

重新排列脚本文件并删除 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>

【讨论】：

感谢回复，但我需要 jquery ui 库