All Components

Window / Keyboard navigation

Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.

Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.

Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.

Focus

  • Alt w focuses window

Supported keys and user actions

  • esc closes window
  • left arrow moves window to the left
  • right arrow moves window to the right
  • up arrow moves window up
  • down arrow moves window down

 

  • ctrl left arrow narrows window in horizontal direction
  • ctrl right arrow expands window in horizontal direction
  • ctrl down arrow expands window in vertical direction
  • ctrl up arrow narrows window in vertical direction
  • 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 id="window"> 
        <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p> 
        <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p> 
        <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p> 
       </div> 
       <span id="undo" style="display:none" class="k-button">Click here to open the window.</span> 
       <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 window </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">esc</span> </span> <span class="button-descr"> closes window </span> </li> 
          <li> <span class="button-preview"> <span class="key-button wider leftAlign">left arrow</span> </span> <span class="button-descr"> moves window to the left </span> </li> 
          <li> <span class="button-preview"> <span class="key-button wider leftAlign">right arrow</span> </span> <span class="button-descr"> moves window to the right </span> </li> 
          <li> <span class="button-preview"> <span class="key-button wider leftAlign">up arrow</span> </span> <span class="button-descr"> moves window up </span> </li> 
          <li> <span class="button-preview"> <span class="key-button wider leftAlign">down arrow</span> </span> <span class="button-descr"> moves window down </span> </li> 
         </ul>
        </div> 
        <div class="box-col"> 
         <h4> </h4> 
         <li> <span class="button-preview"> <span class="key-button">ctrl</span> <span class="key-button wider leftAlign">left arrow</span> </span> <span class="button-descr"> narrows window in horizontal direction </span> </li> 
         <li> <span class="button-preview"> <span class="key-button">ctrl</span> <span class="key-button wider leftAlign">right arrow</span> </span> <span class="button-descr"> expands window in horizontal direction </span> </li> 
         <li> <span class="button-preview"> <span class="key-button">ctrl</span> <span class="key-button wider leftAlign">down arrow</span> </span> <span class="button-descr"> expands window in vertical direction </span> </li> 
         <li> <span class="button-preview"> <span class="key-button">ctrl</span> <span class="key-button wider leftAlign">up arrow</span> </span> <span class="button-descr"> narrows window in vertical direction </span> </li>  
        </div> 
       </div> 
       <script>
                    function onClose() {
                        $("#undo").show();
                    }
    
                    $("#undo")
                        .bind("click", function() {
                            $("#window").data("kendoWindow").open();
                            $("#undo").hide();
                        });
    
                    // focus the widget
                    $(document).on("keydown.examples", function(e) {
                        if (e.altKey && e.keyCode === 87 /* w */) {
                            $("#window").focus();
                        }
                    });
    
                    if (!$("#window").data("kendoWindow")) {
                        $("#window").kendoWindow({
                            width: "600px",
                            title: "About Alvar Aalto",
                            close: onClose
                        });
                    }
    
                </script> 
       <style>
                    #example .box {
                        margin-top: 350px;
                    }
                    .button-container {
                        position: absolute;
                    }
                </style> 
      </div>   
     </body>
    </html>