0

Eyecon の Bootstrap レンジ スライダーは、複数のスライダーを重ねて描画します。ここで実際のバグを参照してください: http://jsfiddle.net/GqMHM/

著者のサイトからソース コードを取得しました。このサイトの例も同様です: http://www.qualitylink.com.br/slider/slider.html

私の人生では、すべてのテスト環境でこの css バグが発生する理由がわかりません。

<!-- Notice this exact example works perfectly@ http://www.qualitylink.com.br/slider/slider.html -->
<html>
<head>
    <meta charset="utf-8">
    <title>Slider</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://www.qualitylink.com.br/slider/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://www.qualitylink.com.br/slider/css/bootstrap.slider.css">
    <script type="text/javascript" src="http://www.qualitylink.com.br/slider/js/jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            $('.slider').slider({
                min: 5,
                max: 500,
                step: 5,
                value: [5,200]
            });
            $('.tooool').tooltip();
        });
    </script>
</head>
<body>
    <!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
        </div>

        <div class="modal-body">
            <br><br>

            <div class="slider slider-horizontal" style="width: 220px;">
                <div class="slider-track"><div class="slider-selection" style="left: 0%; width: 27.272727272727273%;"></div>
                <div class="slider-handle round" style="left: 0%;"></div>
                <div class="slider-handle round" style="left: 27.272727272727273%;"></div>
            </div>
            <div class="tooltip top" style="top: -24px; left: 5.5px;">
                <div class="tooltip-arrow"></div><div class="tooltip-inner">5 : 140</div>
            </div>
            <input type="text" class="slider" style="">
        </div>

            <br><br>
        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>

    <script src="http://www.qualitylink.com.br/slider/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://www.qualitylink.com.br/slider/js/bootstrap.slider.js"></script>
</body>
</html>
4

1 に答える 1

2

あなたの質問からあなたが何をしようとしているのかを判断するのは少し難しいですが、ここにあなたが期待していたものだと思われるあなたのフィドルのフォークがあります.

http://jsfiddle.net/Aq6fu/

唯一の変更点は次のとおりhtmlです。元のフィドルに追加した余分なマークアップをすべて削除しました。

<input type="text" class="slider" style="" />

私はここで推測していますが、ソースを表示する代わりに、google chrome で要素を検査し、元の html マークアップの代わりに生成されたマークアップをコピーしたのかもしれません。

元のマークアップにはクラスを持つ要素が1 つしかありません.sliderが、生成されたマークアップにはクラスを持つ要素が2 つ.sliderあります。

質問のリンクのソースを表示する場合 - ソースの表示: http://www.qualitylink.com.br/slider/slider.html -htmlそのページに余分なマークアップがすべて含まれていないことがわかります。質問。繰り返しますが、追加のマークアップは、DOM を操作した後にプラグインによって生成されるものです。元のソースではありませんhtml。

を呼び出している場合 $('.slider').slider({、プラグインは複数の要素に対して呼び出されますが、これはおそらく意図したものではありません。

于 2013-05-31T03:20:07.553 に答える