0

ページにスライダーがあり、ユーザーがスライドすると (分単位)、現在の選択の「きれいな」バージョンが表示されるように設定したいと考えています。たとえば、スライダーが「60」にある場合は「1 時間」と表示され、「65」にある場合は「1 時間 5 分」と表示されます。

最善のアプローチは何ですか？MaskedEditExtender コントロールのカスタム マスクである場合、どうすればこれを実現できますか? C# でコード ビハインドを作成しましたが、マウスを離したときにコードを変更するのではなく、スライダー自体が動いているときにコードを変更したくありません。

うまくいけば、私は理にかなっています！前もって感謝します。:)

現在のスライダーは次のとおりです。

        <div class="controlColumn">                    
            <asp:TextBox  ID="Slider1"  runat="server" Width="400px"  AutoPostBack="True"></asp:TextBox>
            <ajaxToolkit:SliderExtender runat="server" ID="sPrepTime" Minimum="0" Maximum="1440" Decimals="0" Steps="288" TargetControlID="Slider1" BoundControlID="Slider1_BoundControl" Orientation="Horizontal"></ajaxToolkit:SliderExtender>
            <asp:TextBox  ID="Slider1_BoundControl"  runat="server" Width="100px" OnTextChanged="Slider1_BoundControl_TextChanged" TextMode="Number" AutoPostBack="True"></asp:TextBox>
            <asp:Label ID="lblPrepTime" runat="server"></asp:Label>
        </div>

マウスがスライダーの選択を停止すると、OnTextChanged がトリガーされます。

アップデート

必要なものを AJAX スライダーで動作させることができませんでしたが、以下に提供されている JavaScript を使用して Jquery UI スライダーに移動しました。私のjqueryコードは次のとおりです。

$(function() {       
    $( "#slider" ).slider({            
        value:0,            
        min: 0,            
        max: 1440,            
        step: 5,            
        slide: function( event, ui ) {                
            $("#MainContent_amount2").val(ui.value);
            $('#MainContent_lblPrepTime').text(minutesToText(ui.value));

        }        
    });        
    $("#MainContent_amount2").val($("#slider").slider("value"));
});

Jquery UI の詳細については、http: //jqueryui.com/slider/#defaultをご覧ください。

4

1 に答える 1

1

テキスト解析コードにJavaScript番号を提供できます

function minutesToText(val) {
    var hours = parseInt(val / 60,10),
        minutes, hourText = '',
        minuteText = '';
    if(hours >= 1) {
        minutes = val - (hours * 60);
        hourText = hours + ' hour' + pluralize(hours)+', '

    } else {
        minutes = val;
    }
    minuteText = minutes+ ' minute' + pluralize(minutes);
    return hourText + minuteText;
}

function pluralize(num) {
    return num == 1 ? '' : 's'
}

私はajaxToolkitにあまり詳しくないので、asp.Netがこのカスタムメソッドをどのように登録するかわかりません。手動コードを使用して初期化する場合は、かなり簡単です

デモ：http：//jsfiddle.net/4UBJM/2/

于 2013-01-02T01:40:34.940 に答える