/demos/Angular1.x/angular-calendar/angularjs-calendar-keyboard-support.htm

https://github.com/jqwidgets/jQWidgets · HTML · 43 lines · 43 code · 0 blank · 0 comment · 0 complexity · cfdfead2aaa436f5eee12991bdd6d7be MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html ng-app="demoApp" lang="en">
    3. 

  3. <head>
    4. 

  4.     <title id='Description'>The sample demonstrates how to navigate through the AngularJS Calendar using the Keyboard</title>
    5. 

  5.  <meta name="description" content="AngularJS Calendar example. This example demonstrates a Calendar's keyboard navigation." /> 
    6. 

  6.     <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    7. 

  7.          <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script><script type="text/javascript" src="../../../scripts/angular.min.js"></script>
    8. 

  8.     <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    9. 

  9.     <script type="text/javascript" src="../../../scripts/demos.js"></script>
    10. 

  10.     <script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script>
    11. 

  11.     <script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script>
    12. 

  12.     <script type="text/javascript" src="../../../jqwidgets/jqxtooltip.js"></script>
    13. 

  13.     <script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script><script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
    14. 

  14. </head>
    15. 

  15. <body ng-controller="demoController">
    16. 

  16.     <div id='content'>
    17. 

  17.         <script type="text/javascript">
    18. 

  18.             var demoApp = angular.module("demoApp", ["jqwidgets"]);
    19. 

  19.             demoApp.controller("demoController", function ($scope) {
    20. 

  20.                 $scope.calendarSettings = {
    21. 

  21.                     width: 220, height: 220,
    22. 

  22.                     created: function (args) {
    23. 

  23.                         args.instance.focus();
    24. 

  24.                     }
    25. 

  25.                 };
    26. 

  26.             });
    27. 

  27.         </script>
    28. 

  28.         <jqx-calendar jqx-settings="calendarSettings" style="float: left;"></jqx-calendar>
    29. 

  29.         <div style="font-family: 'segoe ui', arial, sans-serif; width: 400px; margin-left: 20px; float: left;">
    30. 

  30.             <ul>
    31. 

  31.                 <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>
    32. 

  32.                 <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>
    33. 

  33.                 <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>
    34. 

  34.                 <li><b>Left Arrow</b> and <b>Right Arrow</b> - advances one day to the next.</li>
    35. 

  35.                 <li><b>Home</b> - Moves to the first day of the current month.</li>
    36. 

  36.                 <li><b>End</b> - Moves to the last day of the current month.</li>
    37. 

  37.                 <li><b>Page Up</b> - Moves to the same date in the previous month.</li>
    38. 

  38.                 <li><b>Page Down</b> - Moves to the same date in the next month.</li>
    39. 

  39.             </ul>
    40. 

  40.         </div>
    41. 

  41.     </div>
    42. 

  42. </body>
    43. 

  43. </html>
    44.