📌  相关文章
📜  jQuery UI slider()

📅  最后修改于: 2020-11-27 02:02:41             🧑  作者: Mango

jQuery UI滑块

jQuery UI滑块用于获取一定范围内的数值。与文本输入相比，滑块的主要优点是用户无法输入无效值。他们可以使用滑块选择的每个值都是有效的。

句法：

您可以通过两种形式使用slider()方法：

$(selector, context).slider (options) Method

$(selector, context).slider ("action", params) Method

第一种方法

$(selector, context).slider (options)

滑块(选项)方法指定应将HTML元素作为滑块进行管理。在这里，options参数是一个指定滑块外观和行为的对象。

您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示：

$(selector, context).slider({option1: value1, option2: value2..... });

以下是可与该方法一起使用的不同选项的列表。

Option Description
animate If you set this option as true, it creates an animated effect when users click directly on the axis. By default its value is false.
disabled If you set this option as true, it disables the slider. By default its value is false.
max This option is used to specify the upper value of the range that the slider can attain?the value represented when the handle is moved to the far right (for horizontal sliders) or top (for vertical sliders). By default its value is 100.
min This option is used to specify the lower value of the range that the slider can attain?the value represented when the handle is moved to the far left (for horizontal sliders) or bottom (for vertical sliders). By default its value is 0.
orientation This option specifies the horizontal or vertical orientation of the slider. By default its value is horizontal.
range This option indicates whether the slider represents a range. By default its value is false.
step This option is used to specify discrete intervals between the minimum and maximum values that the slider is allowed to represent. By default its value is 1.
value This option is used to specify the initial value of a single-handle slider. In the case of multiple handles (see the values options), it specifies the value for the first handle. By default its value is 1.
values This option is of type array and causes multiple handles to be created and specifies the initial values for those handles. This option should be an array of possible values, one for each handle. By default its value is null.

jQueryUI slide()示例1

让我们以一个简单的示例来演示滑块功能，不将任何参数传递给slider()方法。



   
      
      jQuery UI Slider functionality

jQueryUI slide()示例2

价值，动画和方向的使用：

让我们以一个示例来演示jQueryUI滑块函数中选项值，动画和方向的用法。



   
      
      jQuery UI Slider functionality

jQueryUI slide()示例3

范围，最小值，最大值和值的使用：

以下示例显示了jQueryUI滑块函数中选项范围，最小值，最大值和值的用法。



   
      
      jQuery UI Slider functionality

第二种方法

$(selector, context).slider ("action", params)

滑块(“ action”，params)方法在滑块上指定一个动作，例如将光标移动到新位置。此操作在第一个参数中指定为字符串(例如，“ value”以指示光标的新值)。在下表中检查可以传递的操作。

以下是可与该方法一起使用的不同操作的列表：

Action Description
destroy This action is used to destroy the slider functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.
disable This action is used to disable the slider functionality. This method does not accept any arguments.
enable This action is used to enable the slider functionality. This method does not accept any arguments.
option( optionName ) This action is used to retrieve the value of the specified param option. This option corresponds to one of those used with slider (options). Here optionName is the name of the option to get.
option This action gets an object containing key/value pairs representing the current slider options hash.
option( optionName, value ) This action sets the value of the slider option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.
option(options) This action sets one or more options for the slider. The argument options is a map of option-value pairs to be set.
value This action is used to retrieve the current value of options.value (the slider). It is used only if the slider is unique (if not, use slider (“values”)). This signature does not accept any arguments.
value(value) This action is used to set the value of the slider.
values This action retrieves the current value of options.values (the value of the sliders in an array). This signature does not accept any arguments.
values(index) This action gets the value for the specified handle. Here index is of type integer and is a zero-based index of the handle.
values( index, value ) This action sets the value for the specified handle. Here index is the zero-based index of the handle and value is the value to set.
values(values) This action sets the value for all the handles.
widget This action returns a jQuery object containing the slider. This method does not accept any arguments.

jQueryUI slide()示例4

让我们以一个示例来演示上表中的操作。在此示例中，我们使用disable()和value()方法。



   
      
      jQuery UI Slider functionality