Slider扩展器控件可以将TextBox控件变成一个滑动条，让用户以鼠标拖动的方式输入某个范围内的值。
示例运行效果：
图(1)
图(2)
SliderDemo.aspx代码示例：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SliderDemo.aspx.cs" Inherits="Chapter08_SliderDemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Slider Demo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.valueBox
{
border:1px solid #555;
width:30px;
float:left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<div class="demoheading">网页上的滑动条</div>
请输入一个0-200之间的数字：
<asp:TextBox ID="sliderValue" CssClass="valueBox" runat="server"></asp:TextBox>
<asp:TextBox ID="slider" runat="server"></asp:TextBox>
<ajaxToolkit:SliderExtender ID="se" runat="server"
TargetControlID="slider"
BoundControlID="sliderValue"
Minimum="0"
Maximum="200"
Decimals="1"
Length="200"
EnableHandleAnimation="true" />
<!--
TargetControlID：该扩展器目标TextBox控件的ID，即将要被“升级”为滑动条的TextBox的ID
BoundControlID：与该滑动条绑定的另一个TextBox或Label的ID。滑动条的当前值会显示在这个TextBox
或Label中。若该属性设置为某个TextBox，则修改该TextBox中的值也会反过来更新滑块
的位置。这也正是“绑定”的含义所在。
Minimum：滑动范围的最小值
Maximum：滑动范围的最大值
Decimals：滑动条所能够选择的小数位数
Steps：滑动条的最小增量
Length：滑动条的高度(水平滑动条)或长度(垂直滑动条)
Orientation：滑动条的方向，可选Horizontal(水平)和Vertical(垂直)
HandleCssClass：滑块将应用的CSS Class
HandleImageUrl：表示滑块的图片的URL
RailCssClass：滑轨将应用的CSS Class
EnableHandleAnimation：若该属性设置为true，则当用户手工修改该滑动条绑定的TextBox中的数值时，
滑动将以动画的形式连续地移动到滑动条的相应位置。
-->
</form>
</body>
</html>
示例运行效果：
图(1)
图(2)
SliderDemo.aspx代码示例：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SliderDemo.aspx.cs" Inherits="Chapter08_SliderDemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Slider Demo</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .valueBox {
border:1px solid #555; width:30px; float:left; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="sm" runat="server" /> <div class="demoheading">网页上的滑动条</div> 请输入一个0-200之间的数字： <asp:TextBox ID="sliderValue" CssClass="valueBox" runat="server"></asp:TextBox> <asp:TextBox ID="slider" runat="server"></asp:TextBox> <ajaxToolkit:SliderExtender ID="se" runat="server" TargetControlID="slider" BoundControlID="sliderValue" Minimum="0" Maximum="200" Decimals="1" Length="200" EnableHandleAnimation="true" /> <!-- TargetControlID：该扩展器目标TextBox控件的ID，即将要被“升级”为滑动条的TextBox的ID BoundControlID：与该滑动条绑定的另一个TextBox或Label的ID。滑动条的当前值会显示在这个TextBox 或Label中。若该属性设置为某个TextBox，则修改该TextBox中的值也会反过来更新滑块 的位置。这也正是“绑定”的含义所在。 Minimum：滑动范围的最小值 Maximum：滑动范围的最大值 Decimals：滑动条所能够选择的小数位数 Steps：滑动条的最小增量 Length：滑动条的高度(水平滑动条)或长度(垂直滑动条) Orientation：滑动条的方向，可选Horizontal(水平)和Vertical(垂直) HandleCssClass：滑块将应用的CSS Class HandleImageUrl：表示滑块的图片的URL RailCssClass：滑轨将应用的CSS Class EnableHandleAnimation：若该属性设置为true，则当用户手工修改该滑动条绑定的TextBox中的数值时， 滑动将以动画的形式连续地移动到滑动条的相应位置。 --> </form></body></html>
扫一扫
7149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
