jQWidgets jqxRangeSelector 改变事件

jQWidgets是一个功能强大的JavaScript UI库，包含了各种UI组件，其中包括jqxRangeSelector。jqxRangeSelector是一种范围选择器，可用于选择时间范围、数值范围等。

本文将介绍如何使用jqxRangeSelector组件，以及如何处理其改变事件。

jqxRangeSelector组件

首先，需要在网页中引入jQWidgets库和jqxRangeSelector组件的相应文件。

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

在网页中添加一个div元素，并对其使用jqxRangeSelector组件。

<div id="myRangeSelector"></div>
<script>
    $(document).ready(function () {

        $('#myRangeSelector').jqxRangeSelector({
            width: 400,
            height: 100,
            range: { from: new Date(2019, 0, 1), to: new Date(2019, 11, 31) }
        });
    });
</script>

以上代码将创建一个宽400像素、高100像素的范围选择器，并设置其可选范围为2019年1月1日至2019年12月31日。

改变事件

jqxRangeSelector组件会触发两个改变事件：change和rangeChanging。change事件在范围选择器的值改变后触发一次，而rangeChanging事件则在用户拖动范围选择器滑块时连续触发。

以下代码通过change事件监听范围选择器的值改变，将所选范围输出至控制台。

<div id="myRangeSelector"></div>
<script>
    $(document).ready(function () {

        var rangeSelector = $('#myRangeSelector').jqxRangeSelector({
            width: 400,
            height: 100,
            range: { from: new Date(2019, 0, 1), to: new Date(2019, 11, 31) }
        });

        // 监听change事件
        rangeSelector.on('change', function (event) {
            console.log('选择的范围：' + event.args.from.toString() + ' 至 ' + event.args.to.toString());
        });
    });
</script>

以上代码定义了一个rangeSelector变量，用于获取jqxRangeSelector组件。然后，通过on方法监听change事件，并在改变后将所选范围输出至控制台。

结论

本文介绍了如何使用jQWidgets的jqxRangeSelector组件以及处理其改变事件。通过上述方法，开发人员可以自由应用jqxRangeSelector组件，实现范围选择的功能。