我有一个 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