All Components

PanelBar / Keyboard navigation

  • Projects
    • New Business Plan
    • Sales Forecasts
      • Q1 Forecast
      • Q2 Forecast
      • Q3 Forecast
      • Q4 Forecast
    • Sales Reports
  • Programs
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
  • Communication

Focus

  • Alt + w focuses the widget

Supported keys and user actions

  • up arrow highlights previous item
  • left arrow highlights previous item
  • down arrow highlights next item
  • right arrow highlights next item

 

  • home selects first item in the list
  • end selects last item in the list
  • enter selects highlighted item / toggles item's group
  • space selects highlighted item / toggles item's group

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Keyboard navigation</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="demo-section k-content"> 
    <ul id="panelbar"> 
     <li> Projects 
      <ul> 
       <li>New Business Plan</li> 
       <li> Sales Forecasts 
        <ul> 
         <li>Q1 Forecast</li> 
         <li>Q2 Forecast</li> 
         <li>Q3 Forecast</li> 
         <li>Q4 Forecast</li> 
        </ul> </li> 
       <li>Sales Reports</li> 
      </ul> </li> 
     <li> Programs 
      <ul> 
       <li>Monday</li> 
       <li>Tuesday</li> 
       <li>Wednesday</li> 
       <li>Thursday</li> 
       <li>Friday</li> 
      </ul> </li> 
     <li disabled> Communication </li> 
    </ul> 
   </div> 
   <div class="box"> 
    <div class="box-col"> 
     <h4>Focus</h4> 
     <ul class="keyboard-legend"> 
      <li> <span class="button-preview"> <span class="key-button leftAlign wider">Alt</span> + <span class="key-button">w</span> </span> <span class="button-descr"> focuses the widget </span> </li> 
     </ul> 
    </div> 
    <div class="box-col"> 
     <h4>Supported keys and user actions</h4> 
     <ul class="keyboard-legend"> 
      <li> <span class="button-preview"> <span class="key-button wider leftAlign">up arrow</span> </span> <span class="button-descr"> highlights previous item </span> </li> 
      <li> <span class="button-preview"> <span class="key-button wider leftAlign">left arrow</span> </span> <span class="button-descr"> highlights previous item </span> </li> 
      <li> <span class="button-preview"> <span class="key-button wider leftAlign">down arrow</span> </span> <span class="button-descr"> highlights next item </span> </li> 
      <li> <span class="button-preview"> <span class="key-button wider leftAlign">right arrow</span> </span> <span class="button-descr"> highlights next item </span> </li> 
     </ul> 
    </div> 
    <div class="box-col"> 
     <h4> </h4> 
     <ul class="keyboard-legend"> 
      <li> <span class="button-preview"> <span class="key-button">home</span> </span> <span class="button-descr"> selects first item in the list </span> </li> 
      <li> <span class="button-preview"> <span class="key-button">end</span> </span> <span class="button-descr"> selects last item in the list </span> </li> 
      <li> <span class="button-preview"> <span class="key-button wider rightAlign">enter</span> </span> <span class="button-descr"> selects highlighted item / toggles item's group </span> </li> 
      <li> <span class="button-preview"> <span class="key-button widest">space</span> </span> <span class="button-descr"> selects highlighted item / toggles item's group </span> </li> 
     </ul> 
    </div> 
   </div> 
   <script>
                $(document).ready(function() {
                    $("#panelbar").kendoPanelBar({
                        expandMode: "multiple"
                    });

                    $(document.body).keydown(function (e) {
                        if (e.altKey && e.keyCode == 87) {
                            $("#panelbar").focus();
                        }
                    });
                });
            </script> 
  </div>   
 </body>
</html>