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

最新推荐文章于 2025-04-21 20:37:22 发布

最新推荐文章于 2025-04-21 20:37:22 发布 · 187 阅读

文章标签：

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

    1<!doctype html>

<htmllang="en"> 

<head> 

<metacharset="utf-8"/> 

<title>jQuery UI Demos</title> 

<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 

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

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

<script> 

$(function () { 

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

}); 

</script> 

</head> 

<body> 

<divid="slider"></div> 

    17

</body> 

</html>

多个滑块选择值域

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

    1 range:true 

    2min: 0,

    3max: 500,

    4values: [ 75, 300 ],

完整代码如下：

    1<!doctype html>

<htmllang="en"> 

<head> 

<metacharset="utf-8"/> 

<title>jQuery UI Demos</title> 

<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 

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

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

<script> 

$(function () { 

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

range: true, 

min: 0, 

max: 500, 

values: [75, 300], 

slide: function (event, ui) { 

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

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

} 

}); 

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

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

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

}); 

</script> 

</head> 

<body> 

    28

<p> 

<labelfor="amount">Price range:</label> 

<inputtype="text"id="amount" 

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

font-weight: bold;" /> 

</p> 

    35

<divid="slider-range"></div> 

    37

    38

</body> 

</html>