All Components

Effects / Fade

      HTML5/JavaScript 源码

      <!DOCTYPE html>
      <html>
       <head> 
        <title>Fade</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 wide"> 
          <ul id="listView"></ul> 
          <ul id="list"></ul> 
         </div> 
         <script type="text/x-kendo-tmpl" id="images-template">
              <li#= typeof done != "undefined" && done ? " class='done'" : "" #>
                  <img src="../content/web/foods/${ProductID}.jpg" alt="${ProductName} image">
              </li>
          </script> 
         <script type="text/x-kendo-tmpl" id="list-template">
              <li#= typeof done != "undefined" && done ? " class='done'" : "" #>${ProductName}</li>
          </script> 
         <script>
              $(document).ready(function() {
                  var dataSource = new kendo.data.DataSource({
                          transport: {
                              read: {
                                  url: "//demos.telerik.com/kendo-ui/service/Products",
                                  dataType: "jsonp"
                              }
                          },
                          pageSize: 8
                      });
      
                  $("#listView").kendoListView({
                      autoBind: false,
                      dataSource: dataSource,
                      template: kendo.template($("#images-template").html())
                  });
      
                  $("#list").kendoListView({
                      dataSource: dataSource,
                      template: kendo.template($("#list-template").html())
                  });
      
                  $("#listView").on("click", "img", function(e) {
                      var el = $(e.currentTarget).closest("li"),
                          effect = kendo.fx(el).fadeOut().duration(700);
      
                      effect.play().then(function() {
                          dataSource.getByUid($(this).attr("data-uid")).set("done", true);
                      });
                  });
              });
          </script> 
         <style>
              .demo-section {
                  position: relative;
                  background: url(../content/web/fx/groceries.jpg) no-repeat 0 0;
                  height: 360px;
                  padding: 0;
              }
              
              #listView, #list {
                  position: absolute;
                  border: 0;
                  background: transparent;
                  top: 90px;
                  margin: 0;
                  padding: 0;
                  list-style-type: none;
              }
      
              #listView {
                  left: 50px;
                  width: 380px;
              }
      
              #listView .done {
                  display: none;
              }
      
              #listView li {
                  display: inline-block;
                  width: 80px;
                  height: 80px;
                  margin: 0 10px 10px 0;
              }
      
              #listView li,
              #listView img {
                  overflow: hidden;
                  width: 80px;
                  height: 80px;
                  cursor: pointer;
                  border-radius: 50%;
              }
      
              #listView li:hover {
                  -webkit-box-shadow: 0 0 0 3px rgba(255,255,255,1);
                  -moz-box-shadow: 0 0 0 3px rgba(255,255,255,1);
                  -o-box-shadow: 0 0 0 3px rgba(255,255,255,1);
                  box-shadow: 0 0 0 3px rgba(255,255,255,1);
              }
      
              #list {
                  left: 523px;
                  color: #666;
                  font-size: 12px;
              }
      
              #list .done {
                  text-decoration: line-through;
              }
          </style> 
        </div>   
       </body>
      </html>