All Components

TreeView / Basic usage

  • My Web Site
    • images
      • logo.png
      • body-back.png
      • my-photo.jpg
    • resources
      • pdf
        • brochure.pdf
        • prices.pdf
      • zip
    • about.html
    • contacts.html
    • index.html
    • portfolio.html

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"> 
   <div class="demo-section k-content"> 
    <ul id="treeview"> 
     <li data-expanded="true"> <span class="k-sprite folder"></span> My Web Site 
      <ul> 
       <li data-expanded="true"> <span class="k-sprite folder"></span>images 
        <ul> 
         <li><span class="k-sprite image"></span>logo.png</li> 
         <li><span class="k-sprite image"></span>body-back.png</li> 
         <li><span class="k-sprite image"></span>my-photo.jpg</li> 
        </ul> </li> 
       <li data-expanded="true"> <span class="k-sprite folder"></span>resources 
        <ul> 
         <li data-expanded="true"> <span class="k-sprite folder"></span>pdf 
          <ul> 
           <li><span class="k-sprite pdf"></span>brochure.pdf</li> 
           <li><span class="k-sprite pdf"></span>prices.pdf</li> 
          </ul> </li> 
         <li><span class="k-sprite folder"></span>zip</li> 
        </ul> </li> 
       <li><span class="k-sprite html"></span>about.html</li> 
       <li><span class="k-sprite html"></span>contacts.html</li> 
       <li><span class="k-sprite html"></span>index.html</li> 
       <li><span class="k-sprite html"></span>portfolio.html</li> 
      </ul> </li> 
    </ul> 
   </div> 
   <script>
                $(document).ready(function() {
                    $("#treeview").kendoTreeView();
                });
            </script> 
   <style>
                #treeview .k-sprite {
                    background-image: url("../content/web/treeview/coloricons-sprite.png");
                }

                .rootfolder { background-position: 0 0; }
                .folder { background-position: 0 -16px; }
                .pdf { background-position: 0 -32px; }
                .html { background-position: 0 -48px; }
                .image { background-position: 0 -64px; }

            </style> 
  </div>   
 </body>
</html>