文本框自定义掩码

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滑块，但移动到Jquery UI滑块使用下面提供的javascript。我的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将注册这个自定义方法。如果使用手动代码初始化将相当简单

演示:http://jsfiddle.net/4UBJM/2/