📌  相关文章
📜  jQWidgets jqxCalendar enableFastNavigation 属性(1)

📅  最后修改于: 2023-12-03 14:43:20.428000             🧑  作者: Mango

jQWidgets jqxCalendar enableFastNavigation 属性介绍

jqxCalendar是一个日期选择控件，可以轻松地在Web应用程序中使用。其中，enableFastNavigation属性是该控件中的一个重要属性。下面将对此进行详细介绍。

属性说明

enableFastNavigation属性用于启用或禁用快速导航功能。在启用快速导航功能的情况下，用户可以通过使用箭头键来快速导航到下一个或上一个月、年或十年。

属性语法
$('#jqxcalendar').jqxCalendar({
    enableFastNavigation: false // or true
});
属性值
  • true：启用快速导航功能
  • false：禁用快速导航功能（默认）
示例代码
<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxCalendar enableFastNavigation 属性介绍</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="jqwidgets/globalization/globalize.culture.de-DE.js"></script>
    <script type="text/javascript" src="jqwidgets/globalization/globalize.culture.fr-FR.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // enableFastNavigation 属性设置为 true
            $('#jqxcalendar1').jqxCalendar({
                width: 220, height: 220, enableFastNavigation: true
            });
            // enableFastNavigation 属性设置为 false
            $('#jqxcalendar2').jqxCalendar({
                width: 220, height: 220, enableFastNavigation: false
            });
        });
    </script>
</head>
<body>
    <div id='jqxcalendar1'></div>
    <div id='jqxcalendar2'></div>
</body>
</html>
属性效果

当enableFastNavigation属性设置为true时，您将看到箭头键以及一个快速导航工具栏。

jqxCalendar enableFastNavigation属性设置为true的效果

当enableFastNavigation属性设置为false时，没有箭头键或快速导航工具栏。

jqxCalendar enableFastNavigation属性设置为false的效果

以上就是enableFastNavigation属性的介绍，此属性能够帮助用户更快速、便捷地选择日期。