您的位置：首页 > Web前端 > JQuery

jQuery 入门教程(38): jQuery UI Slider 示例（一）

2014-01-15 13:05 621 查看

jQuery Slider组件可以把选中的HTML元素变成滑动条UI控件，滑动条可以支持多个滑块用来设置单个值或一个值域。

基本用法

1	<!doctype html>

2	< html lang = "en" >

head

4	< meta charset = "utf-8" />

5	< title >jQuery UI Demos</ title >

6	< link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css" />

7	< script src = "scripts/jquery-1.9.1.js" ></ script >

8	< script src = "scripts/jquery-ui-1.10.1.custom.js" ></ script >

9	< script >

10	$(function () {

11	$("#slider").slider();

});

13	</ script >

</

head

body

16	< div id = "slider" ></ div >

</

body

</

html

多个滑块选择值域

Slider支持使用两个滑块来选择一个值域，通过 min,max指定大范围， values 指定当前选择的值域。

1	range: true

min: 0,

max: 500,

4	values: [ 75, 300 ],

完整代码如下：

1	<!doctype html>

2	< html lang = "en" >

head

4	< meta charset = "utf-8" />

5	< title >jQuery UI Demos</ title >

6	< link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css" />

7	< script src = "scripts/jquery-1.9.1.js" ></ script >

8	< script src = "scripts/jquery-ui-1.10.1.custom.js" ></ script >

9	< script >

10	$(function () {

11	$("#slider-range").slider({

12	range:true,

min: 0,

max: 500,

15	values: [75, 300],

16	slide: function (event, ui) {

17	$("#amount").val("$" + ui.values[0]

18	+ " - $" + ui.values[1]);

});

21	$("#amount").val("$"

22	+ $("#slider-range").slider("values", 0) +

23	" - $" + $("#slider-range").slider("values", 1));

});

25	</ script >

</

head

body

30	< label for = "amount" >Price range:</ label >

31	< input type = "text" id = "amount"

32	style="border: 0; color: #f6931f;

33	font-weight: bold;" />

</

36	< div id = "slider-range" ></ div >

</

body

</

html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航