devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

jQuery文件夹 Treeview 简单实例，树型菜单插件，_jquery-treeview 菜单

作者：weixin_40725706 | 2024-07-16 15:33:53

赞

踩

jquery-treeview 菜单
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="http://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.css"/>
  7.     <link rel="stylesheet" href="http://static.runoob.com/assets/js/jquery-treeview/screen.css"/>
  8.  
  9.     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  10.     <script src="http://static.runoob.com/assets/js/jquery-treeview/jquery.cookie.js"></script>
  11.     <script src="http://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>
  12.     <script>
  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 branchs = $('        <li>\n' +
  21.                     '            <span class="folder">Folder 4</span>\n' +
  22.                     '            <ul>\n' +
  23.                     '                <li><span class="folder">File 4.1</span></li>\n' +
  24.                     '                <li><span class="folder">File 4.2</span></li>\n' +
  25.                     '            </ul>\n' +
  26.                     '        </li>').appendTo("#browser")
  27.                 $('#browser').treeview({
  28.                     add: branchs
  29.                 })
  30.             })
  31.             $('#delete').click(function () {
  32.                 $('#browser li').first().remove()
  33.             })
  34.         })
  35.     </script>
  36.  
  37. </head>
  38. <body>
  39. <h1 id="banner">jQuery Treeview 简单实例</h1>
  40. <div id="main">
  41.     <ul id="browser" class="filetree treeview-famfamfam">
  42.         <li>
  43.             <span class="folder">Folder 1</span>
  44.             <ul>
  45.                 <li><span class="folder">Item 1.1</span>
  46.                     <ul>
  47.                         <li><span class="file">Item 1.1.1</span></li>
  48.                     </ul>
  49.                 </li>
  50.             </ul>
  51.         </li>
  52.  
  53.         <li>
  54.             <span class="folder">Folder 2</span>
  55.             <ul>
  56.                 <li><span class="folder">Item 2.1</span>
  57.                     <ul>
  58.                         <li><span class="file">Item 2.1.1</span></li>
  59.                     </ul>
  60.                 </li>
  61.  
  62.                 <li><span class="folder">Item 2.2</span>
  63.                     <ul>
  64.                         <li><span class="file">Item 2.2.1</span></li>
  65.                         <li><span class="file">Item 2.2.2</span></li>
  66.                     </ul>
  67.                 </li>
  68.             </ul>
  69.         </li>
  70.         <li class="closed">
  71.             <span class="folder">Folder 3</span>
  72.             <ul>
  73.                 <li><span class="file">File 3.1</span></li>
  74.             </ul>
  75.         </li>
  76.  
  77.         <li>
  78.             <span class="folder">Folder 4</span>
  79.             <ul>
  80.                 <li><span class="folder">File 4.1</span></li>
  81.                 <li><span class="folder">File 4.2</span></li>
  82.             </ul>
  83.         </li>
  84.  
  85.     </ul>
  86.     <button id="add">Add!</button>
  87.     <button id="delete">delete!</button>
  88.  
  89. </div>
  90.  
  91. </body>
  92. </html>

 

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号