Использование бутстрап-слайдера с jQuery UI

Я хочу использовать bootrap-слайдер с jQuery UI. Я следую за документацией и загрузил код плагина после загрузки 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>

Не могли бы вы сказать мне, что не так?

Источник

2 ответа

Решение

Проблема в том, что в jQuery UI также есть виджет-слайдер, инициализированный с помощью slider() метод, так что есть столкновение пространства имен.

Если вы хотите использовать только слайдер начальной загрузки, вы можете загрузить пользовательский интерфейс jQuery без виджета слайдера со страницы загрузки.

Или, если вы хотите использовать оба, инициализируйте ползунок начальной загрузки как:

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

Это потому, что согласно следующему коду:

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

Источник

Изменение порядка файлов сценариев и удаление 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>
Источник
Другие вопросы по тегам