jquery 初步實現樹形菜單

先上圖:


貼代碼:

ul2tree.html

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>ul2tree</title> 
<style type="text/css"> 
    body{font-family:"微軟雅黑" verdana} 
    #p_tree{display:block; float:left; width:50%; } 
</style> 
<script type="text/javascript" src="../jquery-1.8.0.min.js" ></script> 
<script type="text/javascript" src="ul2tree.0.1.0.js" ></script> 
 
 
</head> 
<body> 
<p id="p_tree"> 
    <ul> 
        <li>第一條</li> 
            <ul> 
                <li>二級一條</li> 
                <li>二級二條</li> 
                <li>二級三條</li> 
            </ul> 
        <li>第二條</li> 
            <ul> 
                <li>第二條二級一</li> 
                    <ul> 
                        <li>三級一條</li> 
                        <li>三級二條</li> 
                            <ul> 
                                <li>三級一條</li> 
                                <li>三級二條</li> 
                                     
                                <li>三級三條</li> 
                            </ul> 
                        <li>三級三條</li> 
                    </ul> 
            </ul> 
        <li>第三條</li> 
        <li>第四條</li> 
            <ul> 
                <li>二級一條</li> 
                <li>二級二條</li> 
                <li>二級三條</li> 
            </ul> 
    </ul> 
</p> 
<script type="text/javascript" > 
 
    $(document).ready(function(){ 
         
        $.ul2tree({ 
            obj:$("#p_tree ul") 
        }); 
    }); 
</script> 
</body> 
</html> 

ul2tree.0.1.0.js

[javascript] 
/**
* 將ul結構轉化為樹形菜單函數
* 待解決問題:
* 1 列表最後一個線形圖改為 L 形
* 2 可以選擇帶連接線或者不帶連接線
* 3 增加文字點擊函數
* 4 
*/ 
$.extend({ 
    ul2tree:function(opt,callback){ 
    // 默認參數 
    this.defaults = { 
        obj           :"", 
        forderOpen    :"images/folderOpen.gif", // 打開的文件夾圖片 
        forderClosed  :"images/folderClosed.gif", // 關閉的文件夾圖片 
        fileImg       :"images/leaf.gif", // 文件圖片 
        img_width     :"18px", 
        line_height   :"18px", // 行高 
        font_size     :"12px" 
    }; 
     
    //參數初始化 
    var opts = $.extend(this.defaults,opt); 
     
    // ul樣式初始化 
    $(opts.obj).css({ 
        "list-style-type":"none", 
        "padding-left":"0px" 
    }); 
     
    // 添加文件夾及文件圖片 
    $(opts.obj).find("li").each(function(){ 
        $(this).css({ 
            "height":opts.line_height, 
            "line-height":opts.line_height, 
            "font-size":opts.font_size 
        }); 
        if($(this).next().children().size() > 0){ 
            $(this).prepend("<img src=\"" + opts.forderOpen + "\" />"); 
             
            // 展開關閉 
            $(this).find("img[src='" + opts.forderOpen + "']:last").click(function(){ 
                if($(this).attr("src")==opts.forderClosed){ 
                    $(this).attr("src",opts.forderOpen); 
                    $(this).parent().next().css({ 
                        "display":"block", 
                        "visibility":"visible" 
                    }); 
                }else{ 
                    $(this).parent().next().css({ 
                        "display":"none", 
                        "visibility":"hidden" 
                    }); 
                    $(this).attr("src",opts.forderClosed); 
                } 
            }); 
        }else{ 
            $(this).prepend("<img src=\"" + opts.fileImg + "\" />"); 
        } 
    }); 
     
    // 增加線條 
    $(opts.obj).find("ul").each(function(){ 
        $(this).find("li").each(function(){ 
            $(this).prepend("<img src=\"images/line3.gif\" />"); 
            if($(this).next().size == 0){ 
                alert(""); 
                $(this).prepend("<img src=\"images/line2.gif\" />"); 
            } 
        }); 
    }); 
     
    // 處理線條 
    $(opts.obj).find("li").each(function(){ 
        var img_size = $(this).find("img").size(); 
        //alert(img_size); 
        if(img_size >= 0){ 
            for(var i = 0; i < img_size – 2; i++){ 
                $(this).find("img:eq(" + i + ")").attr("src","images/line1.gif"); 
            } 
        } 
    }); 
}}); 

發佈留言