simple.html 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
  5. <title>jQuery treeview</title>
  6. <link rel="stylesheet" href="../jquery.treeview.css" />
  7. <link rel="stylesheet" href="../red-treeview.css" />
  8. <link rel="stylesheet" href="screen.css" />
  9. <script src="../lib/jquery.js" type="text/javascript"></script>
  10. <script src="../lib/jquery.cookie.js" type="text/javascript"></script>
  11. <script src="../jquery.treeview.js" type="text/javascript"></script>
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14. $("#browser").treeview({
  15. toggle: function() {
  16. console.log("%s was toggled.", $(this).find(">span").text());
  17. }
  18. });
  19. $("#add").click(function() {
  20. var branches = $("<li><span class='folder'>New Sublist</span><ul>" +
  21. "<li><span class='file'>Item1</span></li>" +
  22. "<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
  23. $("#browser").treeview({
  24. add: branches
  25. });
  26. });
  27. });
  28. </script>
  29. </head>
  30. <body>
  31. <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/">jQuery Treeview Plugin</a> Demo</h1>
  32. <div id="main">
  33. <a href=".">Main Demo</a>
  34. <ul id="browser" class="filetree treeview-famfamfam">
  35. <li><span class="folder">Folder 1</span>
  36. <ul>
  37. <li><span class="folder">Item 1.1</span>
  38. <ul>
  39. <li><span class="file">Item 1.1.1</span></li>
  40. </ul>
  41. </li>
  42. <li><span class="folder">Folder 2</span>
  43. <ul>
  44. <li><span class="folder">Subfolder 2.1</span>
  45. <ul id="folder21">
  46. <li><span class="file">File 2.1.1</span></li>
  47. <li><span class="file">File 2.1.2</span></li>
  48. </ul>
  49. </li>
  50. <li><span class="folder">Subfolder 2.2</span>
  51. <ul>
  52. <li><span class="file">File 2.2.1</span></li>
  53. <li><span class="file">File 2.2.2</span></li>
  54. </ul>
  55. </li>
  56. </ul>
  57. </li>
  58. <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
  59. <ul>
  60. <li><span class="file">File 3.1</span></li>
  61. </ul>
  62. </li>
  63. <li><span class="file">File 4</span></li>
  64. </ul>
  65. </li>
  66. </ul>
  67. <button id="add">Add!</button>
  68. <p>+/- Icons from <a href="http://www.famfamfam.com/lab/icons/">famfamfam</a></p>
  69. </div>
  70. </body></html>