All Components

PanelBar / Basic usage

  • My Teammates
    Andrew Fuller

    Andrew Fuller

    Team Lead

    Nancy Leverling

    Nancy Leverling

    Sales Associate

    Robert King

    Robert King

    Business System Analyst

  • Projects
    • New Business Plan
    • Sales Forecasts
      • Q1 Forecast
      • Q2 Forecast
      • Q3 Forecast
      • Q4 Forecast
    • Sales Reports
  • Programs
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
  • Communication

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Basic usage</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"> 
   <ul id="panelbar"> 
    <li class="k-state-active"> <span class="k-link k-state-selected">My Teammates</span> 
     <div style="padding: 10px;"> 
      <div class="teamMate"> 
       <img src="../content/web/panelbar/andrew.jpg" alt="Andrew Fuller"> 
       <h2>Andrew Fuller</h2> 
       <p>Team Lead</p> 
      </div> 
      <div class="teamMate"> 
       <img src="../content/web/panelbar/nancy.jpg" alt="Nancy Leverling"> 
       <h2>Nancy Leverling</h2> 
       <p>Sales Associate</p> 
      </div> 
      <div class="teamMate"> 
       <img src="../content/web/panelbar/robert.jpg" alt="Robert King"> 
       <h2>Robert King</h2> 
       <p>Business System Analyst</p> 
      </div> 
     </div> </li> 
    <li> Projects 
     <ul> 
      <li>New Business Plan</li> 
      <li> Sales Forecasts 
       <ul> 
        <li>Q1 Forecast</li> 
        <li>Q2 Forecast</li> 
        <li>Q3 Forecast</li> 
        <li>Q4 Forecast</li> 
       </ul> </li> 
      <li>Sales Reports</li> 
     </ul> </li> 
    <li> Programs 
     <ul> 
      <li>Monday</li> 
      <li>Tuesday</li> 
      <li>Wednesday</li> 
      <li>Thursday</li> 
      <li>Friday</li> 
     </ul> </li> 
    <li disabled> Communication </li> 
   </ul> 
   <style>
                #panelbar {
                    max-width: 400px;
                    margin: 0 auto;
                }
                .teamMate:after {
                    content: ".";
                    display: block;
                    height: 0;
                    line-height: 0;
                    clear: both;
                    visibility: hidden;
                }
                .teamMate h2 {
                    font-size: 1.4em;
                    font-weight: normal;
                    padding-top: 20px;
                }
                .teamMate p {
                    margin: 0;
                }
                .teamMate img {
                    float: left;
                    margin: 5px 15px 5px 5px;
                    border: 1px solid #ccc;
                    border-radius: 50%;
                }
            </style> 
   <script>
                $(document).ready(function() {
                    $("#panelbar").kendoPanelBar({
                        expandMode: "single"
                    });
                });
            </script> 
  </div>   
 </body>
</html>