3

PHP とスクリプト言語は初めてです。スライダーの最小値と最大値を使用してスライダーを設定しようとしています。スライダーを動かしても最小値と最大値が表示されるようにしたい。これは私がこれまでに持っているコードです。

<?php     
$i = 1;
while (++$i <= $_SESSION['totalcolumns']) {
    $range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];
    echo '<input type="text"
                 data-slider="true"
                 data-slider-range="', $range, '"
                 data-slider-step="1"/>';
}
?>

上記のコードは、以下のようにスライダーを表示します。

画像

上記のコードでは、最小値と最大値が表示されることを期待して、以下の行を追加してみました。

data-slider-min = "',$_SESSION["min-column-$i"],'" 
data-slider-max = "',$_SESSION["max-column-$i"], '"

ただし、上記の行は、スライダーの左側と右側に最小値と最大値を表示しません。これらの値は、j​​avascript (スライダーの範囲値) を使用して設定されていると思います。これは私がこれまでに持っているJavaScriptコードです。

<script>
$("[data-slider]")
    .each(function () {
    var input = $(this);
    $("<span>")
        .addClass("output")
        .insertAfter($(this));
    })
    .bind("slider:ready slider:changed", function (event, data) {
    $(this)
        .nextAll(".output:first")
        .html(data.value.toFixed(3));
    });
</script>

スライダーの左右に最小値と最大値を表示する方法を教えてください。

4

1 に答える 1

2

このスタイルの CSS 内の最初の場所:

[class^=slider] { display: inline-block; margin-bottom: 30px; }
.range, .output {
    color: #888;
    font-size: 14px;
    margin: 0 5px 0 5px;
    vertical-align: top;
}

JavaScript を次のように変更する必要があります。

<script>
    $("[data-slider]")
        .each(function () {
            var range;
            var input = $(this);
            $("<span>").addClass("output")
                .insertAfter(input);
            range = input.data("slider-range").split(",");
            $("<span>").addClass("range")
                .html(range[0])
                .insertBefore(input);
            $("<span>").addClass("range")
                .html(range[1])
                .insertAfter(input);
        })
        .bind("slider:ready slider:changed", function (event, data) {
            $(this).nextAll(".output:first")
                .html(data.value.toFixed(2));
        });
</script>

このスライダーの後、このスクリーンショットのようになります: JQuery-Simple-Slider
PS : この例では、この質問のコードとdata.csvを使用します。
更新: この例の完全なコード: pastebin リンク.

于 2013-10-04T09:26:13.603 に答える