JQWidgets jqxFormattedInput 完整参考(1)

📌 相关文章

📜 JQWidgets jqxFormattedInput 完整参考(1)

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

JQWidgets jqxFormattedInput 完整参考

JQWidgets jqxFormattedInput是一个用于输入格式转换和校验的jQuery插件。你可以使用jqxFormattedInput创建一个格式化和校验用户输入的表单控件。下面是JQWidgets jqxFormattedInput的完整参考，包含了所有可用的选项和方法。

安装

JQWidgets jqxFormattedInput可以通过npm或者CDN方式进行安装。

使用npm

npm install jqwidgets-scripts --save

使用CDN

<!--必要的JavaScript文件-->
<script type="text/javascript" src="https://jqwidgets.com/jquery-widgets-documentation/jqwidgets/styles/jqx.base.css"></script>
<script type="text/javascript" src="https://jqwidgets.com/jquery-widgets-documentation/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/jquery-widgets-documentation/jqwidgets/jqxformattedinput.js"></script>

使用方法

初始化jqxFormattedInput

$("#format").jqxFormattedInput({
    width: '250px', 
    height: '25px', 
    radix: 'binary', 
    value: '0010 1010 1111 1001', 
    spinButtons: true, 
    dropDown: true, 
    dropDownWidth: '250px', 
    dropDownHeight: '250px' 
});

配置选项

| 选项 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | width | string/number | null | jqxFormattedInput的宽度。 | | height | string/number | null | jqxFormattedInput的高度。 | | radix | string | "decimal" | 对于数字，可选的进制数量是：2，8，10(默认)和16。对于日期，可选的选项是"days"，"months"和"years"。 | | value | string | "" | 格式化的值。 | | decimalSeparator | string | "." | 小数点分隔符。 | | groupSeparator | string | "," | 数字分组分隔符。 | | groupSize | number | 3 | 数字分组的大小。 | | dropDown | boolean | false | 是否显示下拉控件。 | | dropDownWidth | string/number | null | 下拉控件的宽度。 | | dropDownHeight | string/number | null | 下拉控件的高度。 | | spinButtons | boolean | false | 是否显示微调按钮。 | | disabled | boolean | false | jqxFormattedInput是否为禁用状态。 | | rtl | boolean | false | 是否使用由右到左的布局。 | | readOnly | boolean | false | 是否是只读的输入框。 | | template | string | "" | 可以为自定义模板提供HTML。 |

方法

val(value)

获取或设置jqxFormattedInput的值。

$("#format").jqxFormattedInput('val', '12345');
var val = $("#format").jqxFormattedInput('val');

focus()

将输入焦点设置到jqxFormattedInput。

$("#format").jqxFormattedInput('focus');

blur()

从jqxFormattedInput中移除输入焦点。

$("#format").jqxFormattedInput('blur');

disable()

禁用jqxFormattedInput。

$("#format").jqxFormattedInput('disable');

enable()

启用jqxFormattedInput。

$("#format").jqxFormattedInput('enable');

destroy()

销毁jqxFormattedInput。

$("#format").jqxFormattedInput('destroy');

事件

valueChanged

当jqxFormattedInput的值更改时触发。

$("#format").on('valueChanged', function (event) {
    var args = event.args;
    var value = args.value;
    var oldValue = args.oldValue;
});

示例

以下是使用JQWidgets jqxFormattedInput的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQWidgets jqxFormattedInput 示例</title>
    <link href="https://jqwidgets.com/jquery-widgets-documentation/jqwidgets/styles/jqx.base.css" rel="stylesheet">
    <script src="https://jqwidgets.com/jquery-widgets-documentation/jqwidgets/jqxcore.js"></script>
    <script src="https://jqwidgets.com/jquery-widgets-documentation/jqwidgets/jqxformattedinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //创建JQWidgets jqxFormattedInput
            $("#format").jqxFormattedInput({
                width: '250px',
                height: '25px',
                radix: 'binary',
                value: '0010 1010 1111 1001',
                spinButtons: true,
                dropDown: true,
                dropDownWidth: '250px',
                dropDownHeight: '250px'
            });

            //获取jqxFormattedInput的值
            var val = $("#format").jqxFormattedInput('val');
            console.log(val);

            //设置jqxFormattedInput的值
            $("#format").jqxFormattedInput('val', '1001010110101101');

            //禁用jqxFormattedInput
            $("#format").jqxFormattedInput('disable');

            //启用jqxFormattedInput
            $("#format").jqxFormattedInput('enable');

            //销毁jqxFormattedInput
            $("#format").jqxFormattedInput('destroy');

            //valueChanged事件
            $("#format").on('valueChanged', function (event) {
                var args = event.args;
                var value = args.value;
                var oldValue = args.oldValue;
                console.log('jqxFormattedInput的值更改，新值为：' + value + '，旧值为：' + oldValue);
            });
        });
    </script>
</head>
<body>
    <div id="format"></div>
</body>
</html>