js無限級樹選單
以前做網站，樹形選單一般都很簡單，自己定義風格樣式，簡單的js控制，後來原來網上很多文章都在討論Js樹型選單，看了幾個例項，發現這個樹比較簡單好用。
http://hovertree.com/texiao/js/9.htm
這個無限級可重新整理Js樹型選單 menuTree
1、可設定無限級選單
2、不必使用框架
3、可重新整理，多頁面內跳轉不會影響選單
4、可限級創造子樹
5、支援目前主流瀏覽器：IE5，6，7，8，9，10，11，酷睿，火狐等
6、節點圖片可設定切換圖片效果
點選這裡下載 http://hovertree.com/down/h/treemenu.htm
解壓縮treemenu.rar 包。
dtree目錄下包括這些檔案：example01.html 、 hovertreedtree.js 、 api.html 、 hovertreedtree.css 和img目錄
注意：除了api.html之外，其它的檔案都是必須拷貝的。api.html是dtree的函式介紹。
開啟example01.html檔案
<div class="dtree"> <p><a href="javascript: hovertreemenu.openAll();">全部展開</a> | <a href="javascript: hovertreemenu.closeAll();">全部收起</a></p> <script type="text/javascript"> <!-- var hovertreemenu = new dTree('hovertreemenu'); hovertreemenu.add(0, -1, '何問起樹形選單'); hovertreemenu.add(1,0,'節點 1','http://hovertree.com'); hovertreemenu.add(2, 0, '節點 2', 'http://tool.hovertree.com/'); hovertreemenu.add(3, 1, '節點 1.1', 'http://hovertree.com/hvtart/bjae/pmdo4lfd.htm'); hovertreemenu.add(4, 0, '節點 3', 'http://hovertree.com/hvtart/bjae/q3etb2qv.htm'); hovertreemenu.add(5, 3, '節點 1.1.1', 'http://hovertree.com/hvtart/bjae/l59bo21o.htm'); hovertreemenu.add(6, 5, '節點 1.1.1.1', 'http://hovertree.com/hvtart/bjae/lhnydfey.htm'); hovertreemenu.add(7, 0, '節點 4', 'http://hovertree.com/hvtart/bjae/k4085k8v.htm'); hovertreemenu.add(8, 1, '節點 1.2', 'http://hovertree.com/hvtart/bjae/m8wrrmrw.htm'); hovertreemenu.add(9, 0, '圖片', 'http://hovertree.com/hvtimg/', 'Pictures I\'ve taken over the years', '', '', 'http://hovertree.com/texiao/js/9/img/imgfolder.gif'); hovertreemenu.add(10, 9, '歡迎您！', 'http://hovertree.com/hvtart/bjae/onxw4ahp.htm', 'Pictures of Gullfoss and Geysir'); hovertreemenu.add(11, 9, '雪花飛舞', 'http://hovertree.com/hvtart/bjae/79mtsd1t.htm'); hovertreemenu.add(12, 0, '回收站', 'http://hovertree.com/texiao/', '', '', 'http://hovertree.com/texiao/js/9/img/trash.gif'); document.write(hovertreemenu); //--> </script> </div>
API：
http://hovertree.com/texiao/js/9/api.htm
d.add(0,-1,’My example tree’);
這一句為樹添加了一個根節點，顯示名稱為’My example tree’ d.add(1,0,’Node 1’,’example01.html’);
這一句在樹的根節點下面添加了一個子節點。（d.add（）方法的引數具體含義可參見api.html檔案）
常用的：
第一個引數，表示當前節點的ID
第二個引數，表示當前節點的父節點的ID,根節點的值為 -1
第三個引數，節點要顯示的文字
第四個引數，節點的Url
第五個引數，滑鼠移至該節點時節點的Title
第六個引數，節點的target
第七個引數，用做節點的圖示,節點沒有指定圖示時使用預設值
第八個引數，用做節點開啟的圖示,節點沒有指定圖示時使用預設值
第九個引數，判斷節點是否開啟
屬性選單使用說明
函式
add()
向樹裡新增一個節點
只能在樹被建立之前呼叫.
必須 id, pid, name
引數
名字 型別 描述
id Number 唯一的ID號
pid Number 判定父節點的數字,根節點的值為 -1
name String 節點的文字標籤
url String 節點的Url
title String 節點的Title
target String 節點的target
icon String 用做節點的圖示,節點沒有指定圖示時使用預設值
iconOpen String 用做節點開啟的圖示,節點沒有指定圖示時使用預設值
open Boolean 判斷節點是否開啟
例子
mytree.add(1, 0, ’My node’, ’node.html’, ’node title’, ’mainframe’, ’img/musicfolder.gif’);
openAll()
開啟所有節點
可在樹被建立以前或以後呼叫.
例子
mytree.openAll();
closeAll()
關閉所有節點
可在樹被建立以前或以後呼叫.
例子
mytree.closeAll();
openTo()
Opens the tree to a certain node and can also select the node.
只能在樹被建立以後呼叫..
引數
名字 型別 描述
id Number 節點唯一的ID號
select Boolean 判斷節點是否被選擇
例子
mytree.openTo(4, true);
配置
變數 型別 預設值 描述
target String true 所有節點的target
folderLinks Boolean true 資料夾可連結
useSelection Boolean true 節點可被選擇(高亮)
useCookies Boolean true 樹可以使用cookies記住狀態
useLines Boolean true 建立帶線的樹
useIcons Boolean true 建立帶有圖示的樹
useStatusText Boolean false 用節點名替代顯示在狀態列的節點url
closeSameLevel Boolean false 只有一個有父級的節點可以被展開,當這個函式可用時openAll() 和 closeAll() 函式將不可用
inOrder Boolean false 如果父級節點總是新增在子級節點之前,使用這個引數可以加速選單顯示.
例子
mytree.config.target = "mytarget";
完整程式碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>JS樹形選單Tree - 何問起</title> 5 <link rel="StyleSheet" href="http://hovertree.com/texiao/js/9/hovertreedtree.css" type="text/css" /> 6 <script type="text/javascript" src="http://hovertree.com/texiao/js/9/hovertreedtree.js"></script> 7 <style>body{font-family:'Times New Roman', Times, serif}a{color:black}</style> 8 </head> 9 10 <body> 11 12 <h1><a href="http://hovertree.com/">hovertreemenu</a> » <a href="http://hovertree.com/menu/javascript/">JavaScripts</a> » <a href="http://hovertree.com/hvtart/bjae/pmdo4lfd.htm">Tree</a></h1> 13 14 <h2>何問起樹形選單</h2> 15 16 <div class="dtree"> 17 18 <p><a href="javascript: hovertreemenu.openAll();">全部展開</a> | <a href="javascript: hovertreemenu.closeAll();">全部收起</a></p> 19 20 <script type="text/javascript"> 21 <!-- 22 23 var hovertreemenu = new dTree('hovertreemenu'); 24 25 hovertreemenu.add(0, -1, '何問起樹形選單'); 26 hovertreemenu.add(1,0,'節點 1','http://hovertree.com'); 27 hovertreemenu.add(2, 0, '節點 2', 'http://tool.hovertree.com/'); 28 hovertreemenu.add(3, 1, '節點 1.1', 'http://hovertree.com/hvtart/bjae/pmdo4lfd.htm'); 29 hovertreemenu.add(4, 0, '節點 3', 'http://hovertree.com/hvtart/bjae/q3etb2qv.htm'); 30 hovertreemenu.add(5, 3, '節點 1.1.1', 'http://hovertree.com/hvtart/bjae/l59bo21o.htm'); 31 hovertreemenu.add(6, 5, '節點 1.1.1.1', 'http://hovertree.com/hvtart/bjae/lhnydfey.htm'); 32 hovertreemenu.add(7, 0, '節點 4', 'http://hovertree.com/hvtart/bjae/k4085k8v.htm'); 33 hovertreemenu.add(8, 1, '節點 1.2', 'http://hovertree.com/hvtart/bjae/m8wrrmrw.htm'); 34 hovertreemenu.add(9, 0, '圖片', 'http://hovertree.com/hvtimg/', 'Pictures I\'ve taken over the years', '', '', 'http://hovertree.com/texiao/js/9/img/imgfolder.gif'); 35 hovertreemenu.add(10, 9, '歡迎您！', 'http://hovertree.com/hvtart/bjae/onxw4ahp.htm', 'Pictures of Gullfoss and Geysir'); 36 hovertreemenu.add(11, 9, '雪花飛舞', 'http://hovertree.com/hvtart/bjae/79mtsd1t.htm'); 37 hovertreemenu.add(12, 0, '回收站', 'http://hovertree.com/texiao/', '', '', 'http://hovertree.com/texiao/js/9/img/trash.gif'); 38 39 document.write(hovertreemenu); 40 41 //--> 42 </script> 43 44 </div> 45 46 <p><a href="http://hovertree.com/">©何问起</a></p> 47 48 </body> 49 50 </html>
相關推薦
js無限級樹選單
以前做網站，樹形選單一般都很簡單，自己定義風格樣式，簡單的js控制，後來原來網上很多文章都在討論Js樹型選單，看了幾個例項，發現這個樹比較簡單好用。http://hovertree.com/texiao/js/9.htm這個無限級可重新整理Js樹型選單 menuTree 1、可設定無限級選單 2、不必使用框架
JS無限級導航/選單
這裡使用layui渲染的導航 實體類 dept.java private int id; //id private String dept_name; //部門名稱 private int pid; //上級部門id pr
php實現無限級樹型選單（函式遞迴演算法）
大概步驟如下： 首先到資料庫取資料，放到一個數組， 然後把資料轉化為一個樹型狀的陣列， 最後把這個樹型狀的陣列轉為html程式碼。 也可以將第二步和第三步合為一步。 詳細如下： 1。資料庫設計： 指令碼如下： CREATE TABLE `bg_cate`(`cate_I
PHP+JS無限級可伸縮選單詳解（遞迴方法）
-- -- 表的結構 `cr_columninfo` -- CREATE TABLE `cr_columninfo` ( `columnid` int(4) NOT NULL auto_increment, `columnfatherid` int(4) NOT NULL defa
php無限級樹狀分類
<?php //準備陣列，代替從資料庫中檢索出的資料(共有三個必須欄位id,name,pid) header("content-type:text/html;charset=utf-8"); $categories = array( array('id'=&g
無限級ddsmoothmenu選單例項
1 <base target="_blank" /><link rel="stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/menu/6/ddsmoothmenu.css" /> 2 <sc
Asp.net 2.0 Treeview 動態填充,並實現無限級樹
{ //hooyesDataLink 為配置中資料連線字串鍵名 SqlConnection con =new SqlConnection(ConfigurationManager.AppSettings["hooyesDataLink"]); SqlDa
純ajax＋sqlserver無限級樹形選單．
ajax這個當今流行的技術名詞,幾年前ajax開始流行時,也花過點時間研究了一下ajax.net控制元件．只是工作原因，一直沒有用到專案中去．一晃幾年ajax依舊如火如荼．最近閒來無事，重溫ajax．就好象AJAX當初被遺棄，現在又被熱捧一樣．這次我沒有去下載ajax.net
Java MySQL無限級樹（遞迴）超實用
@Override public String getEmployeeBysup(String employeeID) { String str="";
PHP生成無限級選單樹
俗話說：程式猿會一門語言，再學其他的也會很快， 一個學Java的，讓做PHP，這裡就記錄一下PHP生成選單樹，實現分層， 原理：遞迴， 語音：PHP 資料格式：沒有樹結構化的陣列，例如： Ar
無限級分類之查找子孫樹
return inux ati code arr == merge ade find 1 <?php 2 header("Content-Type:text/html;charset=utf-8"); 3 $cate=array( 4 array(
Vue組件之無限級目錄樹構建
循環引用 eth nts 操作 template [0 -i image spa 漸漸，了解Vue也有一個月了，最近遇上個無限級目錄樹的小功能，為了能多學習避免自己操作dom或是網上下插件，下決心用Vue來解決當下問題，畢竟毛爺爺講過，實踐出真知，本次主要運用了組件之間的相
layui擴充套件之 authtree 無限級許可權控制樹 authtree
感謝layui社群，及無限極權限控制樹的作者。 首先下載authtree.js，為了你能正確使用該模組，建議放在extends資料夾下（沒有就建立一個），該資料夾與layui同級，為了方便你的使用，第三方元件都可放在裡面 配置該元件 layui.config({
php遞迴實現無限級分類樹(最新版)（轉發自php中文網的大家講道理）
php遞迴實現無限級分類樹(最新版) 程式碼如下： /** * 將資料格式化成樹形結構 * @author Xuefen.Tong * @param array $items * @return array */ function gen
無限級分類實現思路 無限級分類實現思路 (組織樹的分級管理)
無限級分類實現思路 (組織樹的分級管理) 關於該問題，暫時自己還沒有深入研究，在網上找到幾種解決方案，各有優缺點。 第一種方案： 使用遞迴演算法，也是使用頻率最多的，大部分開源程式也是這麼處理，不過一般都只用到四級分類。這種演算法的資料庫結構設計最為簡單。catego
無限級分類之遞迴查詢子孫樹
利用遞迴查詢子欄目以及子孫欄目，該程式碼僅供參看。 <?php /* 關係，分析出： 北京 海淀 昌平 山西 長治 縣市1 小康村 縣市2
三級選單拖拽排序，各級互不影響，理論上可以無限級選單
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 門戶元件（Por
php無限分類 樹狀選單經典程式碼
<?php header("content-type:text/html;charset=utf-8"); $conn = mysql_connect('127.0.0.1', 'root', ''); $s = mysql_select
easyUI-樹形選單(ComboTree) 無限層級樹實現方式
對於easyUI實現一個樹，是一件很簡單的事情，實現形式很多。 這裡作者將實現，通過資料庫獲取資料，再將資料通過遞迴形式裝成無限層級json資料，到達無限成級的樹結構。 需要用到的json外掛建附件，希望能對大家有所幫助 效果如圖
php遞迴實現無限級分類樹
一.資料庫設計123456789101112131415161718192021222324252627282930313233343536373839CREATE TABLE `bg_cate` (`cate_Id` int(30) unsigned NOT NULL AU