📌  相关文章
📜  jQWidgets jqxFormattedInput roundedCorners 属性(1)

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

jQWidgets jqxFormattedInput roundedCorners 属性介绍

简介

jQWidgets jqxFormattedInput控件是一个用于输入格式化数据的控件，可以设置文本框的输入格式如日期、货币等，同时可以支持验证输入数据的合法性，减少非法输入，提高程序的健壮性。其中roundedCorners属性是控件的圆角属性，可以选择是否显示圆角效果来进行美化。

用法

在HTML页面中引入jQWidgets和jqxFormattedInput的js和css文件，然后在script中进行初始化即可。同时设置roundedCorners属性为true或false，根据需求显示或隐藏圆角效果。

<head>
    <script src="scripts/jquery-3.4.1.min.js"></script>
    <script src="scripts/jqxcore.js"></script>
    <script src="scripts/jqxmaskedinput.js"></script>
    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
</head>
<body>
  <div id="formattedInput">
  </div>
  
  <script type="text/javascript">
    $("#formattedInput").jqxFormattedInput({roundedCorners: true});
  </script>
</body>
属性

| 属性名 | 类型 | 描述 | | --- | --- | --- | | roundedCorners | boolean | 设置是否显示圆角效果 |

示例
<head>
    <script src="scripts/jquery-3.4.1.min.js"></script>
    <script src="scripts/jqxcore.js"></script>
    <script src="scripts/jqxmaskedinput.js"></script>
    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
</head>
<body>
  <div id="formattedInput">
  </div>
  
  <script type="text/javascript">
    $("#formattedInput").jqxFormattedInput({roundedCorners: true});
  </script>
</body>

效果图如下所示，圆角效果已经显示：

jqxFormattedInput圆角效果示例图

总结

jQWidgets的jqxFormattedInput控件提供了强大的数据格式化功能，roundedCorners属性可以使输入框显示圆角效果，让页面更加美观。开发人员可以通过自定义样式调整控件的显示效果，展现更符合项目风格的界面。