jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
46 lines (43 loc) • 3.07 kB
HTML
<html lang="en">
<head>
<title id='Description'>The sample demonstrates how to navigate through the Calendar using the Keyboard</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
$("#calendar").jqxCalendar({ width: 220, height: 220});
// focus the calendar.
$("#calendar").jqxCalendar('focus');
});
</script>
<div id='calendar' style="float: left;"></div>
<div style="font-family: Verdana; font-size: 12px; width: 400px; margin-left: 20px; float: left;">
<ul>
<li><b>Tab</b> - Like other widgets, the jqxCalendar widget receives focus by tabbing into it. Once focus is received, users will be able to use the keyboard to change the Calendar's selection. A second tab will take the user out of the date picker widget.</li>
<li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.</li>
<li><b>Up Arrow</b> and <b>Down Arrow</b> - goes to the same day of the week in the previous or next week respectively. If the user advances past the end of the month they continue into the next or previous month as appropriate.</li>
<li><b>Left Arrow</b> and <b>Right Arrow</b> - advances one day to the next.</li>
<li><b>Home</b> - Moves to the first day of the current month.</li>
<li><b>End</b> - Moves to the last day of the current month.</li>
<li><b>Page Up</b> - Moves to the same date in the previous month.</li>
<li><b>Page Down</b> - Moves to the same date in the next month.</li>
</ul>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>