All Components

Window / MVVM

Move or resize the window

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.

Console

Configuration

Information

Kendo UI Window supports the events and visible bindings.

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>MVVM</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"> 
    <div class="box-col" style="width: 340px"> 
     <span class="configHead">Move or resize the window</span> 
     <div data-role="window" data-title="About Alvar Aalto" data-width="300" data-actions="{}" data-height="150" data-bind="visible: isVisible,
                            enabled: isEnabled,
                            events: { resize: onResize, dragstart: onDragStart, dragend: onDragEnd }"> 
      <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> 
     </div> 
    </div> 
    <div class="box-col console-section"> 
     <h4>Console</h4> 
     <div class="console"></div> 
    </div> 
   </div> 
   <div class="box"> 
    <div class="box-col" style="width: 340px"> 
     <h4>Configuration</h4> 
     <div> 
      <label><input type="checkbox" data-bind="checked: isVisible">Visible</label> 
     </div> 
    </div> 
    <div class="box-col"> 
     <h4>Information</h4> Kendo UI Window supports the 
     <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a> and 
     <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings. 
    </div> 
   </div> 
   <script>
    var viewModel = kendo.observable({
        isVisible: true,
        onResize: function(e) {
            kendoConsole.log("event :: resize");
        },
        onDragEnd: function(e) {
            kendoConsole.log("event :: dragend");
        },
        onDragStart: function(e) {
            kendoConsole.log("event :: dragstart");
        }
    });
    kendo.bind($("#example"), viewModel);
</script> 
  </div>   
 </body>
</html>