library/js/jquery.treeview-1.4.1/demo/async.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4
   5         <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
   6         <title>jQuery async treeview</title>
   7
   8         <link rel="stylesheet" href="../jquery.treeview.css" />
   9     <link rel="stylesheet" href="../red-treeview.css" />
  10         <link rel="stylesheet" href="screen.css" />
  11
  12         <script src="../lib/jquery.js" type="text/javascript"></script>
  13         <script src="../lib/jquery.cookie.js" type="text/javascript"></script>
  14         <script src="../jquery.treeview.js" type="text/javascript"></script>
  15         <script src="../jquery.treeview.edit.js" type="text/javascript"></script>
  16         <script src="../jquery.treeview.async.js" type="text/javascript"></script>
  17
  18         <script type="text/javascript">
  19         function initTrees() {
  20                 $("#black").treeview({
  21                         url: "source.php"
  22                 })
  23
  24                 $("#mixed").treeview({
  25                         url: "source.php",
  26                         // add some additional, dynamic data and request with POST
  27                         ajax: {
  28                                 data: {
  29                                         "additional": function() {
  30                                                 return "yeah: " + new Date;
  31                                         }
  32                                 },
  33                                 type: "post"
  34                         }
  35                 });
  36         }
  37         $(document).ready(function(){
  38                 initTrees();
  39                 $("#refresh").click(function() {
  40                         $("#black").empty();
  41                         $("#mixed").empty();
  42                         initTrees();
  43                 });
  44         });
  45         </script>
  46
  47         </head>
  48         <body>
  49
  50         <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/">jQuery Treeview Plugin</a> Demo</h1>
  51         <div id="main">
  52
  53         <ul>
  54                 <li><a href=".">Main Demo</a></li>
  55                 <li><a href="source.phps">Server component used</a></li>
  56         </ul>
  57
  58         <h4>Lazy-loading tree</h4>
  59
  60         <ul id="black">
  61         </ul>
  62
  63         <h4>Mixed pre and lazy-loading</h4>
  64
  65         <ul id="mixed">
  66                 <li><span>Item 1</span>
  67                         <ul>
  68                                 <li><span>Item 1.0</span>
  69                                         <ul>
  70                                                 <li><span>Item 1.0.0</span></li>
  71                                         </ul>
  72                                 </li>
  73                                 <li><span>Item 1.1</span></li>
  74                         </ul>
  75                 </li>
  76                 <li id="36" class="hasChildren">
  77                         <span>Item 2</span>
  78                         <ul>
  79                                 <li><span class="placeholder">&nbsp;</span></li>
  80                         </ul>
  81                 </li>
  82                 <li>
  83                         <span>Item 3</span>
  84                 </li>
  85         </ul>
  86
  87         <button id="refresh">Refresh both Trees</button>
  88
  89 </div>
  90
  91 </body></html>