jQuery Menu Tree是一個基于jQuery庫的菜單樹插件。它可以幫助您輕松地創建帶有樹形菜單的網站。它是一個非常簡單易用的插件,支持多種主題和自定義選項。
使用jquery menu tree,您可以很容易地創建多層級的樹形菜單,并且每個菜單項可以包含子菜單。您還可以為每個菜單項設置不同的樣式,例如字體、顏色、圖標等等。
//引入jquery庫和jquery menu tree插件 <script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.menu-tree.js"></script>//創建樹形菜單 $(document).ready(function(){ $('#menu-tree').menuTree({ 'theme': 'default', //設置主題 'expandIcon': 'plus', //設置展開圖標 'collapseIcon': 'minus', //設置折疊圖標 'expandAll': false, //設置是否默認展開所有菜單項 'selected': '1', //設置默認選中的第一個菜單項 'callback': function(item){ //設置回調函數 alert("You clicked " + item.text()); }, 'data': [ //設置樹形菜單數據 { 'id': '1', 'text': 'Menu Item 1', 'icon': 'icon.png', 'url': 'http://www.example.com', 'children': [ { 'id': '2', 'text': 'Submenu Item 1', 'url': 'http://www.submenuitem1.com' }, { 'id': '3', 'text': 'Submenu Item 2', 'url': 'http://www.submenuitem2.com' } ] }, { 'id': '4', 'text': 'Menu Item 2', 'icon': 'icon.png', 'url': 'http://www.menuitem2.com' } ] }); });
上面的代碼示例演示了如何使用jquery menu tree插件創建一個樹形菜單。它包含兩個菜單項,每個菜單項都有一個圖標和一個鏈接。菜單項1包含兩個子菜單項。
jquery menu tree是一個非常靈活的插件,您可以根據自己的需求對其進行自定義設置。它為網站設計者和開發者提供了一個快速、簡單、易用的菜單樹解決方案。