All Components

PanelBar / Loading content with AJAX

  • BODY
  • ENGINE
  • TRANSMISSION
  • PERFORMANCE

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <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> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <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> 
     <li> TRANSMISSION 
      <div></div> </li> 
     <li> PERFORMANCE 
      <div></div> </li> 
    </ul> 
   </div> 
  </div> 
  <script>
            $(document).ready(function() {
                $("#panelbar").kendoPanelBar({
                    expandMode: "single",
                    contentUrls: [
                        '../content/web/panelbar/ajax/ajaxContent1.html',
                        '../content/web/panelbar/ajax/ajaxContent2.html',
                        '../content/web/panelbar/ajax/ajaxContent3.html',
                        '../content/web/panelbar/ajax/ajaxContent4.html'
                    ]
                });
            });
        </script> 
  <style>
            .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;
            }
        </style> 
  <div class="demo-section"> 
   <h3>Note:</h3> 
   <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> 
  </div>   
 </body>
</html>