设置AJAX Slider绑定控件号格式

时间:2012-12-17 05:06:51

标签: asp.net ajax

我有一个AJAX Slider Extender,它有一个有界控件,asp文本框工作正常,拖动滑块时值会发生变化。现在我的问题是,有没有办法在滑动时操纵限制为滑块的texbox的内容。例如,我的滑块设置为最小值1,最大值100现在我希望从1到9在有界文本框中显示为01,02,03 ...依此类推。下面是滑块控件的片段代码。

<tr>
                    <td class="label">
                        Call Start:
                    </td>
                    <td>
                        <asp:ImageButton ID="CallStart" ImageUrl="~/images/Icons/32/telephone.png" runat="server"
                            OnClientClick="show(); return false;" />
                        <asp:TextBox ID="tbxCallStart" runat="server" Enabled="false" BackColor="White" />
                        <div id="pnlCallStart" style="display: none;">
                            <table>
                                <tr>
                                    <td>
                                        <asp:TextBox ID="txtCallStartHours" runat="server" Width="20px" Enabled="false" BackColor="White"
                                            Style="text-align: center;"></asp:TextBox>
                                        :
                                        <asp:TextBox ID="txtCallStartMinutes" runat="server" Width="20px" Enabled="false"
                                            BackColor="White" Style="text-align: center;"></asp:TextBox>
                                        <asp:RadioButton ID="rdoAM" runat="server" GroupName="time" Text="AM" />
                                        <asp:RadioButton ID="rdoPM" runat="server" GroupName="time" Text="PM" />
                                        <asp:Button ID="btnDoneStart" runat="server" Text="Done" OnClientClick="getCallStartTime();"
                                            OnClick="btnDoneStart_Clicked" />
                                        <asp:HiddenField ID="hidCallStart" runat="server" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <table>
                                            <tr>
                                                <td>
                                                    Hours :
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="tbxDummy" runat="server"></asp:TextBox>
                                                    <ajax:SliderExtender ID="sldeHours" runat="server" TargetControlID="tbxDummy" BoundControlID="txtCallStartHours"
                                                        Minimum="1" Maximum="12" Steps="12">
                                                    </ajax:SliderExtender>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Minutes :
                                                </td>
                                                <td>
                                                    <ajax:SliderExtender ID="sldeMinutes" runat="server" TargetControlID="tbxDummy" BoundControlID="txtCallStartMinutes"
                                                        Minimum="0" Maximum="59" Steps="60">
                                                    </ajax:SliderExtender>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>

                        <script type="text/javascript">
                            function show() {
                                document.getElementById('pnlCallStart').style.display = 'block';
                                document.getElementById('<%=txtCallStartHours.ClientID %>').value =
                                    document.getElementById('<%=txtCallStartHours.ClientID %>').value;
                                document.getElementById('<%=txtCallStartMinutes.ClientID %>').value =
                                    formatTime(document.getElementById('<%=txtCallStartMinutes.ClientID %>').value);
                                document.getElementById('<%=tbxCallStart.ClientID %>').style.display = 'none';
                            }
                            function formatTime(value) {
                                if (value < 9)
                                    return "0" + value;
                                else
                                    return value;
                            }
                            function getCallStartTime() {
                                document.getElementById('pnlCallStart').style.display = 'none';
                                document.getElementById('<%=hidCallStart.ClientID%>').value =
                                document.getElementById('<%=txtCallStartHours.ClientID%>').value;
                                document.getElementById('<%=tbxCallStart.ClientID %>').style.display = 'block';
                            }
                        </script>

                    </td>
                </tr>

TIA

0 个答案:

没有答案