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 回答