web-dev-qa-db-ja.com

jQuery UIでbootstrap-sliderを使用する

bootrap-slider を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>

何が悪いのか教えて頂けませんか？

javascriptjquerytwitter-bootstrapjquery-uibootstrap-slider
13
Matt

問題は、jQuery UIにも sliderウィジェット がslider()メソッドを使用して初期化されているため、名前空間の競合が発生することです。

bootstrapスライダーのみを使用する場合は、スライダーウィジェットなしでカスタムjQuery UIを ダウンロードページ からダウンロードできます。

または、両方を使用する場合は、bootstrapスライダーを次のように初期化します。

$('#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" />
53
T J