本文概述
- 第一种方法
- jQueryUI slide()示例1
- jQueryUI slide()示例2
- jQueryUI slide()示例3
- 第二种方法
- jQueryUI slide()示例4
句法:
你可以通过两种形式使用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..... });
【jQuery UI滑块】以下是可与该方法一起使用的不同选项的列表。
选项 | 描述 |
---|---|
animate | 如果将此选项设置为true, 则当用户直接在轴上单击时, 它将创建动画效果。默认情况下, 其值为false。 |
disabled | 如果将此选项设置为true, 它将禁用滑块。默认情况下, 其值为false。 |
max | 此选项用于指定滑块可以达到的范围的上限值, 即将手柄移到最右边(对于水平滑块)或顶部(对于垂直滑块)时表示的值。默认情况下, 其值为100。 |
min | 此选项用于指定滑块可以达到的范围的下限值-将手柄移到最左端(对于水平滑块)或底部(对于垂直滑块)时表示的值。默认情况下, 其值为0。 |
orientation | 此选项指定滑块的水平或垂直方向。默认情况下, 其值为水平。 |
range | 此选项指示滑块是否代表一个范围。默认情况下, 其值为false。 |
step | 此选项用于指定允许滑块表示的最小值和最大值之间的离散间隔。默认情况下, 其值为1。 |
value | 此选项用于指定单柄滑块的初始值。对于多个句柄(请参阅值选项), 它指定第一个句柄的值。默认情况下, 其值为1。 |
values | 此选项是数组类型, 将导致创建多个句柄并指定这些句柄的初始值。此选项应为可能值的数组, 每个句柄一个。默认情况下, 其值为null。 |
<
!doctype html>
<
html lang="en">
<
head>
<
meta http-equiv="Content-Type" content="text/html;
charset=shift_jis">
<
title>
jQuery UI Slider functionality<
/title>
<
link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<
script src="http://img.readke.com/220430/0134435557-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0134432415-1.jpg">
<
/script>
<
!-- Javascript -->
<
script>
$(function() {
$( "#slider-1" ).slider();
});
<
/script>
<
/head>
<
body>
<
!-- HTML -->
<
div id="slider-1">
<
/div>
<
/body>
<
/html>
立即测试
jQueryUI slide()示例2价值, 动画和方向的使用:
让我们以一个示例来演示jQueryUI滑块功能中选项值, 动画和方向的用法。
<
!doctype html>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
jQuery UI Slider functionality<
/title>
<
link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<
script src="http://img.readke.com/220430/0134435557-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0134432415-1.jpg">
<
/script>
<
!-- Javascript -->
<
script>
$(function() {
$( "#slider-2" ).slider({
value: 60, animate:"slow", orientation: "horizontal"
});
});
<
/script>
<
/head>
<
body>
<
!-- HTML -->
<
div id="slider-2">
<
/div>
<
/body>
<
/html>
立即测试
jQueryUI slide()示例3使用范围, 最小值, 最大值和值:
以下示例显示了jQueryUI滑块功能中选项范围, 最小值, 最大值和值的用法。
<
!doctype html>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
jQuery UI Slider functionality<
/title>
<
link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<
script src="http://img.readke.com/220430/0134435557-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0134432415-1.jpg">
<
/script>
<
!-- Javascript -->
<
script>
$(function() {
$( "#slider-3" ).slider({
range:true, min: 0, max: 500, values: [ 50, 300 ], slide: function( event, ui ) {
$( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#price" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
" - $" + $( "#slider-3" ).slider( "values", 1 ) );
});
<
/script>
<
/head>
<
body>
<
!-- HTML -->
<
p>
<
label for="price">
Price range:<
/label>
<
input type="text" id="price"
style="border:0;
color:red;
font-weight:bold;
">
<
/p>
<
div id="slider-3">
<
/div>
<
/body>
<
/html>
立即测试
第二种方法
$(selector, context).slider ("action", params)
滑块(“ action”, params)方法在滑块上指定一个动作, 例如将光标移动到新位置。此操作在第一个参数中指定为字符串(例如, “ value”表示光标的新值)。在下表中检查可以传递的操作。
以下是可与该方法一起使用的不同操作的列表:
Action | Description |
destroy | 此操作用于完全破坏元素的滑块功能。元素返回其预初始化状态。此方法不接受任何参数。 |
disable | 此操作用于禁用滑块功能。此方法不接受任何参数。 |
enable | 此操作用于启用滑块功能。此方法不接受任何参数。 |
option( optionName ) | 此操作用于检索指定的param选项的值。此选项对应于与滑块一起使用的选项之一。这里的optionName是要获取的选项的名称。 |
option | 此操作将获取一个对象, 该对象包含表示当前滑块选项哈希的键/值对。 |
option( optionName, value ) | 此操作设置与指定的optionName关联的滑块选项的值。参数optionName是要设置的选项的名称, value是要为该选项设置的值。 |
option(options) | 此操作为滑块设置一个或多个选项。参数options是要设置的选项-值对的映射。 |
value | 此操作用于检索options.value的当前值(滑块)。仅当滑块是唯一的时才使用(否则, 请使用滑块(“值”))。该签名不接受任何参数。 |
value(value) | 此操作用于设置滑块的值。 |
values | 此操作将检索options.values的当前值(数组中滑块的值)。该签名不接受任何参数。 |
values(index) | 此操作获取指定句柄的值。这里的索引是整数类型, 是句柄的从零开始的索引。 |
values( index, value ) | 该操作设置指定句柄的值。这里的index是句柄的从零开始的索引, 而value是要设置的值。 |
values(values) | 该操作设置所有句柄的值。 |
widget | 该操作返回一个包含滑块的jQuery对象。此方法不接受任何参数。 |
<
!doctype html>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
jQuery UI Slider functionality<
/title>
<
link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<
script src="http://img.readke.com/220430/0134435557-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0134432415-1.jpg">
<
/script>
<
!-- Javascript -->
<
script>
$(function() {
$( "#slider-4" ).slider({
orientation:"horizontal"
});
$( "#slider-4" ).slider('disable');
$( "#slider-5" ).slider({
orientation:"horizontal", value:50, slide: function( event, ui ) {
$( "#minval" ).val( ui.value );
}
});
$( "#minval" ).val( $( "#slider-5" ).slider( "value" ) );
});
<
/script>
<
/head>
<
body>
<
!-- HTML -->
<
div id="slider-4">
<
/div>
<
p>
<
label for="minval">
Minumum value:<
/label>
<
input type="text" id="minval"
style="border:0;
color:red;
font-weight:bold;
">
<
/p>
<
div id="slider-5">
<
/div>
<
/body>
<
/html>
立即测试
推荐阅读
- jQueryUI可排序
- jQuery UI展示
- jQuery UI选择菜单
- jQuery UI可选
- jQuery UI可调整大小
- jQuery UI removeClass
- jQuery UI进度栏
- jQuery UI菜单
- jQuery UI简介