📌  相关文章
📜  jQWidgets jqxRangeSelector 完整参考(1)

📅  最后修改于: 2023-12-03 15:16:56.191000             🧑  作者: Mango

jQWidgets jqxRangeSelector 完整参考

简介

jQWidgets jqxRangeSelector 是一款基于 jQuery 的 JavaScript 图表插件，用于创建交互式的范围选择器（Range Selector）控件。该插件可以轻松地创建水平或垂直方向的范围选择器，支持使用滑块或鼠标进行选择。它可以使用各种数据源来绑定数据，包括本地数组、远程服务、JSON 对象等。并且，它提供了丰富的 API 和事件，使得开发者可以按需定制范围选择器以满足自己的需求。

特性
  • 支持水平和垂直方向的范围选择器。
  • 可通过鼠标或滑块选择范围。
  • 可通过 API 设置和获取范围选择器的各种属性，如最小值、最大值、步长、默认范围等。
  • 可通过事件实现范围选择器的交互和响应。
  • 支持多种数据源，如本地数组、远程服务、JSON 对象等。
  • 提供了丰富的主题和样式，可适配不同的应用场景。
安装

jQWidgets jqxRangeSelector 可以通过多种方式安装和使用，包括：

  • 直接下载 jqwidgets 的整体包，在其中找到 jqxRangeSelector.js 和相应的 CSS 样式文件。
  • 使用 npm 进行安装，npm install jqwidgets-ng。
  • 使用 bower 进行安装，bower install jqwidgets。
使用

jQWidgets jqxRangeSelector 的使用相对简单，以下是一个基本的示例：

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets Range Selector Basic Example</title>
    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="styles/jqx.arctic.css" type="text/css" />
    <script src="scripts/jquery-3.5.1.min.js"></script>
    <script src="scripts/jqxcore.js"></script>
    <script src="scripts/jqxbuttons.js"></script>
    <script src="scripts/jqxscrollbar.js"></script>
    <script src="scripts/jqxrangeselector.js"></script>
    <script>
        $(document).ready(function () {
            // create jqxRangeSelector
            $('#jqxRangeSelector').jqxRangeSelector({
                width: 600,
                height: 80,
                min: 0,
                max: 100,
                range: { from: 20, to: 80 }
            });
        });
    </script>
</head>
<body>
    <div id="jqxRangeSelector"></div>
</body>
</html>

这里使用了 Arctic 主题，定义的范围选择器的宽度为 600，高度为 80，最小值为 0，最大值为 100，范围默认从 20 到 80。

具体的 API 和事件可以参考 jQWidgets jqxRangeSelector 的官方文档。

价格

jQWidgets jqxRangeSelector 是商业性质的图表插件，需要付费购买授权。授权包括以下几种：

  • 单个开发者授权：$199
  • 2~5 开发者授权：$699
  • 6~10 开发者授权：$1299
  • 企业开发者授权：$3999

同时，该插件提供了免费试用版，可以在非商业性质的应用中免费使用，但有一些功能限制。

总结

jQWidgets jqxRangeSelector 是一款易于使用且功能强大的范围选择器控件，可以帮助开发者快速构建具有交互性和可视化特点的应用程序。除商业授权外，该插件还提供了免费试用版和丰富的文档和示例，可以供开发者快速入手。