0

私のアプリケーションでは、jquery-uiスライダーを使用しています。ユーザーはスライダーの値を 1 (月) から 60 (月) に変更できます。実際には 1 ～ 60 は月です。11 以降の新しい要件に従って、スライダーの値を 1 (年)、2 (年) などに変更する必要があります。私の懸念は次のとおりです。値の測定値を変更するこの種のスライダーを使用できますか? はいの場合は、例を教えてください。

これが私の情報源です。

$(".slider").slider({
        animate: true,
        range: "min",
        value: 1,
        min: 1,
        max: 60,
        step: 1
});
4

1 に答える 1

2

これはそのままでは不可能ですが、

私はここであなたのために働くフィドルを作りましたhttp://jsfiddle.net/JFJKP/

HTML:

<div class="slider"></div>
<br/>
<div class='showAltValue'>Click to Show Alt Value</div>

JS:

$(".slider").slider({
    animate: true,
    range: "min",
    value: 1,
    min: 1,
    max: 60,
    altValue: 'Nothing Selected',
    step: 1,
    change: function (event, ui) {
        value = ui.value;
        years = Math.floor(value / 12);
        months = value % 12 // value modulus of 12 gives remainder

        if (years > 1) {
            yearString = 'years';
        } else {
            yearString = 'year';
        }

        if (months > 1 && months != 0) {
            monthString = 'months';
        } else {
            monthString = 'month';
        }
        // Now format the output.
        if (years == 0) {
            altValue = months + ' ' + monthString;
        } else {
            if (months == 0) {
                //dont' show months
                altValue = years + ' ' + yearString;
            } else {
                altValue = years + ' ' + yearString + ' ' + months + ' ' + monthString;
            }
        }
        // Now alert the altValue
        alert(altValue);
        // You can now use this as a label Value somewhere and even store it as a slider attribute as such
        $(event.target).slider("option", "altValue", altValue);
    }
});

$('.showAltValue').click(function () {
    alert($('.slider').slider("option", "altValue"));
});

これにより、少なくとも正しい軌道に乗るはずです。

于 2013-10-28T11:39:45.793 に答える