All Components

Integration with JS libraries / Kendo UI + Handlebars

Picture Details ID

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Kendo UI + Handlebars</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"> 
    <select id="emplooyeesDropDown" class="employeesDropDownWrap" style="width: 100%;"></select> 
   </div> 
   <div> 
    <table id="employeesTable"> 
     <colgroup> 
      <col class="photo"> 
      <col class="details"> 
      <col> 
     </colgroup> 
     <thead> 
      <tr> 
       <th> Picture </th> 
       <th> Details </th> 
       <th> ID </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td colspan="3"></td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <script src="../content/shared/js/handlebars.min.js"></script> 
   <script id="dropdown-item-template" type="text/x-handlebars-template">
                <img src="../content/web/Employees/{{EmployeeID}}.jpg" alt="{{EmployeeID}}" />
                <h3>{{FirstName}} {{LastName}}</h3>
                <p>{{Title}}</p>
            </script> 
   <script id="grid-row-template" type="text/x-handlebars-template">
                <tr data-uid="{{uid}}">
                    <td class="photo">
                        <img src="../content/web/Employees/{{EmployeeID}}.jpg" alt="{{EmployeeID}}" />
                    </td>
                    <td class="details">
                        <span class="title">{{Title}}</span>
                        <span class="description">Name: {{ FirstName }} {{ LastName }}</span>
                        <span class="description">Country: {{ Country }} </span>
                    </td>
                    <td class="employeeID">
                        {{ EmployeeID }}
                    </td>
               </tr>
            </script> 
   <script>
                $(document).ready(function() {
                    var dataSource = new kendo.data.DataSource({
                          type: "odata",
                          transport: {
                              read: {
                                  url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
                              }
                          }
                        });

                    $("#employeesTable").kendoGrid({
                        dataSource: dataSource,
                        rowTemplate: Handlebars.compile($("#grid-row-template").html()),
                        height: 370
                    });

                    $("#emplooyeesDropDown").kendoDropDownList({
                        dataTextField: "FirstName",
                        dataValueField: "EmployeeID",
                        template: Handlebars.compile($("#dropdown-item-template").html()),
                        dataSource: dataSource,
                        height: 320
                    });
                });
            </script> 
   <style>
                .photo {
                    width: 140px;
                }
                .details {
                    width: 400px;
                }
                .title {
                    display: block;
                    font-size: 1.6em;
                }
                .description {
                    display: block;
                    padding-top: 1.6em;
                }
                .employeeID {
                    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
                    font-size: 50px;
                    font-weight: bold;
                    color: #898989;
                }
                td.photo, .employeeID {
                    text-align: center;
                }

                #employeesTable td {
                    background: -moz-linear-gradient(top,  rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
                    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    background: -o-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    background: -ms-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    background: linear-gradient(to bottom,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    padding: 20px;
                }

                .employeesDropDownWrap
                {
                    display:block;
                    margin:0 auto;
                }

                #emplooyeesDropDown-list .k-item {
                    overflow: hidden;
                }

                #emplooyeesDropDown-list img {
                    -moz-box-shadow: 0 0 2px rgba(0,0,0,.4);
                    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.4);
                    box-shadow: 0 0 2px rgba(0,0,0,.4);
                    float: left;
                    margin: 5px 20px 5px 0;
                }

                #emplooyeesDropDown-list h3 {
                    margin: 30px 0 10px 0;
                    font-size: 2em;
                }

                #emplooyeesDropDown-list p {
                    margin: 0;
                }
            </style> 
  </div>   
 </body>
</html>