Slider 示例

右侧的水平方向的 Slider 最大值为 +100,最小值为 -100,右侧的数字表示其指针表现的位置, 而且页面用户可指定的拖动值被指定为五个离散点, 分别为 -100,-50,0,+50,+100。可以尝试拖动 Slider 上的指针。
右侧的水平方向的 Slider 最大值为 100,最小值为 0,其值可以被显示在最右侧的 TextBox 中, 同时你也可以尝试在 TextBox 中修改其数值,你会发现 Slider 中的表示位置同样会改变。(当焦点离开 TextBox 的时候,才会触发)
同样,我们可以改变 Slider 的一些属性,当你把鼠标停留在右侧的 Slider 上的时候, 你会发现其将显示 Slider 当前表示的值,和一些相关信息。

 Slider 概述

Slider 控件是一个可以扩展 ASP.Net TextBox 控件,将其变得可以让页面用户用拖动滚动条的方式指定一个数值的控件。 其表现方式可以是水平方向或者垂直方向,可以指定其表示数值的范围,也可以指定其中值的“离散”距离。

如果开发人员没有为一个 Slider 控件指定任何的参数,它默认的数值范围是 0 到 100。 Slider 的表现形式可以用其 Css 样式进行指定,另外也可以为其指定当其滑动时候所采用的动画形式,让页面用户有更好的用户体验。

当一个 Slider 上指定的值被改变的时候,它可以触发整个页面或者部分的页面提交(采用 UpdatePanel 的形式), 开发人员也可以采用一个 TextBox 控件纪录 Slider 中表示的值。

Slider 表示的值也可以采用其它的 TextBox 或者 Label 控件进行表示,如果采用了 TextBox 的形式, Slider 的表示的值也可以通过 TextBox 进行改变。

当 Slider 需要触发页面提交事件的时候,该事件将在页面用户放开拖动鼠标的时候发生,但是当把 Slider 中的 RaiseChangeOnlyOnMouseUp 设置为 false 的时候, 当其值一旦发生改变,就会触发页面提交事件。

Slider 的提示属性允许开发人员为它指定自定义的 Tooltip 信息(当鼠标停留在上面的时候显示的提示信息),其中可以采用一个用 {0} 表示的 Slider 当前标志的数值。


 Slider 属性

Slider 控件属性将被初始化如下面的示例代码所示,斜体属性为可选属性。

<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server"
    TargetControlID="Slider1"
    Minimum="-100"
    Maximum="100"
    BoundControlID="Slider1_BoundControl"
    Steps="5" />
<ajaxToolkit:SliderExtender ID="SliderExtender2" runat="server"
    TargetControlID="Slider2"
    BoundControlID="Slider2_BoundControl"
    Orientation="Vertical"
    EnableHandleAnimation="true" />
  • Minimum - 最小值
  • Maximum - 最大值
  • Decimals - 小数位数
  • Steps - 用一个整数表示的切分 Slider 控件表示的值的“离散”点的份数
  • Value - 当前标示的值
  • EnableHandleAnimation - 是否允许以动画表示用户拖动
  • HandleAnimationDuration - 用微秒表示的动画显示时间
  • RailCssClass - Slider 控件轨迹的 Css 样式
  • HandleCssClass - Slider 拖动点的 Css 样式
  • HandleImageURL - 以图片表示 Slider 拖动点的图片路径指向
  • Length - Slider 的长度,并不一定表示水平长度,如果以垂直展示的 Slider 将表示其高度
  • BoundControlID - 以数值方式表示其当前值的控件 ID,可以是 TextBox 或者 Label 控件
  • RaiseChangeOnlyOnMouseUp - 如果设置为 True 只有当拖动的结束的时候,也就是鼠标按键被放开的时候才触发页面其值变换事件。
  • TooltipText - 显示的 Tooltip 提示,也就是鼠标停留在 Slider 控件上方出现的提示信息。 其中可以采用一个 {0} 表示 Slider 当前标示的值。

 Slider 提示
  • 当页面被刚被显示的时候 Slider 控件将被显示成一个 TextBox 而后瞬间将改变成 Slider 控件,这一点可能会造成页面用户的异议, 但是这一点也可以在 JavaScript 被关闭的浏览器中起到一定的作用。如果我们将 TextBox.Style.Display 设置成 none 可以解决这个问题。
  • 由于在IE 6 中不支持 inline 元素,因而,在 IE 6 会造成 Slider 控件的轨迹显示不正常。
  • 如果想自定义 Slider 的 Css 样式,建议设置其轨迹的 Position 属性为 Relative,其滑动点的 Position 为 Absolute。 如果只是简单的想改变一下滑动点的外观,最简单的方法就是用一个图片来表示其滑动点。

 相关问题

尚未纪录和本示例相关的问题,你可以直接在这里添加本示例的相关问题


登录本站,提出问题。一分钟注册

 Internet 相关资源

登录本站,添加新的资源。一分钟注册


Copyright © 2007 AJAXASP.NET.CN 保留所有权利. 赞助本站