All Components

PanelBar / Loading content with AJAX

  • BODY

HTML5/JavaScript 源码

<!DOCTYPE html>
  <title>Loading content with AJAX</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> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="wrapper"> 
    <ul id="panelbar"> 
     <li> BODY 
      <div></div> </li> 
     <li> ENGINE 
      <div></div> </li> 
      <div></div> </li> 
     <li> PERFORMANCE 
      <div></div> </li> 
            $(document).ready(function() {
                    expandMode: "single",
                    contentUrls: [
            .wrapper {
                height: 320px;
                margin: 20px auto;
                padding: 20px 0 0;
                background: url('../content/web/panelbar/astonmartin.png') no-repeat center 50px transparent;
            #panelbar {
                width: 250px;
                float: right;
                margin-bottom: 20px;
            #panelbar p {
                padding: 1em;
  <div class="demo-section"> 
   <p> Security restrictions prevent this example from working in all browsers when the page is loaded from the file system (via file:// protocol). If the demo is not working as expected, please host the Kendo folder on a web server. </p>