Question

我的页面上有一个滑块，我想设置它，以便当用户滑动时（以分钟为单位），它会显示当前选择的“漂亮”版本。因此，例如，如果滑块处于'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

Answer 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将如何注册这个自定义方法。如果使用手动代码进行初始化将是相当直接的

DEMO：http://jsfiddle.net/4UBJM/2/

AJAX Masked Textbox自定义蒙版

1 个答案: