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

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

jQWidgets jqxRating完整参考

jQWidgets jqxRating是一款用于创建自定义等级评分表单控件的javascript插件。通过此插件，您可以轻松地为网站或应用程序添加一个高度定制的等级评分表单控件。

开始使用

要使用jQWidgets jqxRating插件，您需要将以下文件导入到您的HTML文件中：

<link rel="stylesheet" href="https://cdn.jqwidgets.com/jquery-widgets/11.0.0/jqwidgets/styles/jqx.base.css">
<script src="https://cdn.jqwidgets.com/jquery-widgets/11.0.0/jqwidgets/jqxcore.js"></script>
<script src="https://cdn.jqwidgets.com/jquery-widgets/11.0.0/jqwidgets/jqxrating.js"></script>

然后，在您的HTML文件中添加以下标记：

<div id="jqxRating"></div>

最后，在您的Javascript文件中添加以下代码：

$(document).ready(function () {
    $('#jqxRating').jqxRating({ 
        width: 350, 
        height: 35, 
        theme: 'darkblue' 
    });
});
可用选项

jQWidgets jqxRating插件具有多个可选选项，可用于自定义等级评分表单控件。以下是可用选项的完整列表：

| 选项名 | 数据类型 | 默认值 | 描述 | | ------ | -------- | ------ | ---- | | width | Number/String | 'auto' | 控件的宽度。 | | height | Number/String | 'auto' | 控件的高度。 | | disabled | Boolean | false | 控件是否禁用。 | | value | Number | 0 | 控件的值。 | | count | Number | 5 | 控件的等级数量。 | | itemWidth | Number/String | 'auto' | 控件的每个等级的宽度。 | | itemHeight | Number/String | 'auto' | 控件的每个等级的高度。 | | itemDisabled | Boolean | false | 控件中所有等级是否都禁用。 | | theme | String | 'default' | 控件使用的主题名称。 |

方法

jQWidgets jqxRating插件也提供了多个方法，可用于操作等级评分表单控件。以下是可用方法的完整列表：

| 方法名 | 描述 | | ------ | ---- | | destroy() | 从DOM中删除并销毁等级评分表单控件。 | | getValue() | 获取控件的当前值。 | | setValue(value) | 设置控件的值。 | | disable() | 禁用等级评分表单控件。 | | enable() | 启用等级评分表单控件。 |

事件

jQWidgets jqxRating插件还支持多个事件，可用于在操作等级评分表单控件时执行特定的功能。以下是可用事件的完整列表：

| 事件名 | 描述 | | ------ | ---- | | valueChanged | 当控件的值发生更改时触发。 |

示例

以下是一个完整的jQWidgets jqxRating控件示例，其中包含了几个常用的选项、方法和事件：

<!DOCTYPE html>
<html>

<head>
  <title>jQWidgets jqxRating 示例</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jqwidgets.com/jquery-widgets/11.0.0/jqwidgets/styles/jqx.base.css">
  <script src="https://cdn.jqwidgets.com/jquery-widgets/11.0.0/jqwidgets/jqxcore.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery-widgets/11.0.0/jqwidgets/jqxrating.js"></script>
</head>

<body>

  <div id="jqxRating"></div>

  <script>
    $(document).ready(function () {
        $('#jqxRating').jqxRating({ 
            width: 350, 
            height: 35, 
            theme: 'darkblue' 
        });
        
        $('#jqxRating').on('valueChanged', function (event) {
            alert('您的评分为：' + event.value);
        });
    });
  </script>

</body>

</html>

此示例将创建一个宽度为350个像素、高度为35个像素的等级评分表单控件，并在评分改变时弹出一个警报提示框。

参考文献