jQuery Slider滑块组件的用法（附带实例）

滑块（Slider）主要用来拖动手柄选择一个数值。基本的滑块是水平的，有一个单一的手柄，可以用鼠标或箭头键对手柄进行左右拖动。

滑块部件（Slider Widget）会在初始化时创建带有 CSS class 名称为 ui-slider-handle 的手柄元素，用户可以通过在初始化之前创建并追加元素，同时向元素添加 CSS class 名称 ui-slider-handle 来指定自定义的手柄元素。它只会创建匹配 value/values 长度所需数量的手柄元素。例如，如果指定 values：[1，5，18]，且创建了一个自定义手柄元素，则插件将创建其他两个手柄元素。

滑块部件使用 jQuery UI CSS 框架来定义它的外观和感观的样式。如果需要使用滑块指定的样式，则可以使用如下 CSS class 名称：

ui-slider：滑块的轨道。该元素会根据滑块的方向额外带有一个 CSS class 名称 ui-slider-horizontal 或 ui-slider-vertical。
ui-slider-handle：滑块手柄。
ui-slider-range：当设置 range 选项时使用的已选范围。如果 range 选项值设置为"min"或"max"，则该元素会额外带有一个 CSS class 名称 ui-slider-range-min 或 ui-slider-range-max。

【实例】通过组合 3 个滑块实现一个简单的 RGB（Red Green Blue，三原色）颜色选择器。程序开发步骤如下：
1) 新建一个 index.html 文件。

2) 将 jQuery UI 文件夹 jquery-ui-1.13.2.custom 和 index.html 放在一起。

3) 使用 VS Code 打开 index.html 文件，在 index.html 文件中编写如下代码，实现通过拖动滑块改变 RGB 颜色选择器的值，从而改变总体颜色的功能：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery/jquery.js"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
<title>滑块（Slider）的使用</title>
<style>
#red, #green, #blue {
    float: left;
    clear: left;
    width: 300px;
    margin: 15px;
}
#swatch {
    width: 120px;
    height: 100px;
    margin-top: 18px;
    margin-left: 350px;
    background-image: none;
}
#red .ui-slider-range { background: #ef2929; }
#red .ui-slider-handle { border-color: #ef2929; }
#green .ui-slider-range { background: #8ae234; }
#green .ui-slider-handle { border-color: #8ae234; }
#blue .ui-slider-range { background: #729fcf; }
#blue .ui-slider-handle { border-color: #729fc; }
</style>
<script>
function hexFromRGB(r, g, b) {
    var hex = [
        r.toString( 16 ),
        g.toString( 16 ),
        b.toString( 16 )
    ];
    $.each( hex,function( nr, val ) {
        if ( val.length === 1 ){
            hex[ nr ] = "0" + val;
        }
    });
    return hex.join( "" ).toUpperCase();
}
function refreshSwatch() {
    var red = $( "#red" ).slider( "value" ),
        green = $( "#green" ).slider( "value" ),
        blue = $( "#blue" ).slider( "value" ),
        hex = hexFromRGB( red, green, blue );
    $( "#swatch" ).css( "background-color", "#" + hex );
}
$(function() {
    $( "#red, #green, #blue" ).slider({
        orientation: "horizontal",
        range: "min",
        max: 255,
        value: 127,
        slide: refreshSwatch,
        change: refreshSwatch
    });
    $( "#red" ).slider( "value", 255 );
    $( "#green" ).slider( "value", 140 );
    $( "#blue" ).slider( "value", 60 );
});
</script>
</head>
<body class="ui-widget-content" style="border:0;">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
    <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
    <span>颜色选择器</span>
</p>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
</body>
</html>

使用 Chrome 浏览器运行 index.html 文件，在网页中拖动表示红色、绿色和蓝色的 3 个滑块，右侧的总体颜色会实时变化，效果如下图所示。

图：滑块的应用实例

jQuery Slider滑块组件的用法（附带实例）

相关文章