All Components

Window / Animation effects

Animation Settings

ARNE JACOBSEN EGG CHAIR

ARNE JACOBSEN EGG CHAIR
Image by: http://www.conranshop.co.uk/

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Animation effects</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="box"> 
    <h4>Animation Settings</h4> 
    <ul class="options"> 
     <li> <input id="default" name="animation" type="radio" checked> <label for="default">default/zoom animation</label> </li> 
     <li> <input id="toggle" name="animation" type="radio"> <label for="toggle">toggle animation</label> </li> 
     <li> <input id="expand" name="animation" type="radio" checked> <label for="expand">expand animation</label> </li> 
     <li> <input id="opacity" type="checkbox" checked> <label for="opacity">animate opacity</label> </li> 
    </ul> 
   </div> 
   <div id="window"> 
    <div style="text-align: center;"> 
     <img src="../content/web/window/egg-chair.png" alt="ARNE JACOBSEN EGG CHAIR"> 
     <p>ARNE JACOBSEN EGG CHAIR<br> Image by: <a href="http://www.conranshop.co.uk/" title="http://www.conranshop.co.uk/">http://www.conranshop.co.uk/</a></p> 
    </div> 
   </div> 
   <span id="undo" style="display:none" class="k-button">Click here to open the window.</span> 
   <script>
                function onClose() {
                    $("#undo").fadeIn(300);
                }

                $(document).ready(function () {
                    var original = $("#window").clone(true);

                    $(".configuration input").change(function () {
                        var clone = original.clone(true);

                        $("#undo").hide();
                        $("#window").data("kendoWindow").destroy();

                        setTimeout(function () {
                            $("#example").append(clone);
                            initWindow();
                        }, 200);
                    });

                    var getEffects = function () {
                        return (($("#expand")[0].checked ? "expand:vertical " : "") +
                                ($("#opacity")[0].checked ? "fadeIn" : "")) || false;
                    };

                    function initWindow() {
                        var windowOptions = {
                            width: "500px",
                            title: "EGG CHAIR",
                            visible: false,
                            close: onClose
                        };

                        if (!$("#default")[0].checked)
                            windowOptions.animation = { open: { effects: getEffects() }, close: { effects: getEffects(), reverse: true} };

                        $("#window").kendoWindow(windowOptions);

                        $("#undo")
                            .bind("click", function () {
                                $("#window").data("kendoWindow").open();
                                $("#undo").fadeOut(300);
                            });

                        $("#window").data("kendoWindow").open();
                    }

                    initWindow();
                });
            </script> 
   <style>
                #example {
                    min-height:600px;
                }

                #undo {
                    text-align: center;
                    position: absolute;
                    white-space: nowrap;
                    border-width: 1px;
                    border-style: solid;
                    padding: 2em;
                    cursor: pointer;
                }
            </style> 
  </div>   
 </body>
</html>