jquery 目錄樹

1.看介面

2.介面html

        <div id='jqxExpander'>
            <div>
                Folders</div>
            <div id='jqxTree'>
                <ul>
                    <li item-expanded='true'>
                        <img style='float: left; margin-right: 5px;' src='/images/mailIcon.png' /><span
                            item-title="true">Mail<span style='color: Blue;'> (4)</span></span>
                        <ul>
                            <li >
                                <img style='float: left; margin-right: 5px;' src='/images/calendarIcon.png' /><a href="#"><span
                                    item-title="true">Calendar</span></a> </li>
                            <li>
                                <img style='float: left; margin-right: 5px;' src='/images/contactsIcon.png' /><a href="#"><span
                                    item-title="true">Contacts</span></a> </li>
                            <li item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='/images/folder.png' /><span
                                    item-title="true"> <span>Inbox</span><span style='color: Blue;'> (2)</span></span>
                                <ul>
                                    <li item-expanded='true'>
                                        <img style='float: left; margin-right: 5px;' src='/images/folder.png' /><span
                                            item-title="true">jQWidgets<span style='color: Blue;'> (4)</span></span>
                                        <ul>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='/images/folder.png' /><a href="#"><span
                                                    item-title="true">Admin</span></a> </li>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='/images/folder.png' /><span
                                                    item-title="true">Corporate</span> </li>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='/images/folder.png' /><span
                                                    item-title="true">Finance</span> </li>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='/images/folder.png' /><span
                                                    item-title="true">Other</span> </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='/images/folder.png' /><span
                                            item-title="true">Personal</span> </li>
                                </ul>
                            </li>
                            <li item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='/images/recycle.png' /><span
                                    item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (6)</span></span>
                                <ul>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='/images/folder.png' /><span
                                            item-title="true">Today</span> </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='/images/folder.png' /><span
                                            item-title="true">Last Week</span> </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='/images/folder.png' /><span
                                            item-title="true">Last Month</span> </li>
                              
                                <li>
                                    <img style='float: left; margin-right: 5px;' src='/images/notesIcon.png' /><span
                                        item-title="true">Notes</span> </li>
                                <li>
                                    <img style='float: left; margin-right: 5px;' src='/images/settings.png' /><span
                                        item-title="true">Settings</span> </li>
                                <li>
                                    <img style='float: left; margin-right: 5px;' src='/images/favorites.png' /><span
                                        item-title="true">Favorites</span> </li>
                                          </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

3.css

ul
{
  list-style:none;
}

#jqxExpander
{
    width:300px;
    float:left;
    position:relative;
    border: 2px solid  Black;
}

#jqxExpander div:first-child
{
    height:30px;
    line-height:30px;
    background-color:Black;
    color:White;
}

.imgPic
{
     cursor:pointer;
     float: left; margin-left: 5px;
}

.liPor
{
     padding-left:22px;
}

4.jquery 擴展

    (function ($) {
        $.extend({
            jqxTree: {
                info: {
                    imgPic: "<img  src='/images/icon-down.png' class='imgPic'/>",
                    iconright: "/images/icon-right.png",
                    icondown: "/images/icon-down.png",
                    jqxTreeobj: "#jqxTree"
                },
                ///这个函数是全部选择所有的元素
                iniTree: function () {

                    $(this.info.jqxTreeobj).find("ul li").addClass("liPor");
                    $(this.info.jqxTreeobj).find("ul li[item-expanded]").removeClass("liPor");
                    var jqxLi = $(this.info.jqxTreeobj).find("ul li[item-expanded]");
                    var imgPic = this.info.imgPic;
                    jqxLi.each(function () {
                        var preImg = $(this).find("img").first();
                        $(preImg).before(imgPic);
                    });
                    var iconright = this.info.iconright;
                    var icondown = this.info.icondown;
                    var jqxLi = $(this.info.jqxTreeobj).find(".imgPic");
                    jqxLi.live('click',
                                  function () {
                                      var itemexpanded = $(this).parent().parent().find("li[item-expanded]").attr("item-expanded");
                                     
                                      if (itemexpanded == "true") {
                                          $(this).attr("src", iconright);
                                          $(this).parent().parent().find("li[item-expanded]").attr("item-expanded", false);
                                          $(this).parent().find("ul").css("display", "none");
                                         
                                      }
                                      else if (itemexpanded == "false") {

                                          $(this).parent().parent().find("li[item-expanded]").attr("item-expanded", true);

                                          $(this).attr("src", icondown);
                                          $(this).parent().find("ul").css("display", "block");

                                      }

                                  }
            );
                },

                iniIfo: function (info) {
                    $.extend(this.info, info);
                    this.iniTree();
                }
            }
        });
    })(jQuery);


    $(document).ready(function () {
        $.jqxTree.iniIfo({ jqxTreeobj: "#jqxTree" });
    });

5.自己寫一下html，然後執行

    $(document).ready(function () {
        $.jqxTree.iniIfo({ jqxTreeobj: "#jqxTree" });
    });

6. 目錄樹全部採用ul li。下面有子項目的的全部用ul。同時li 加上

   <li item-expanded='true'>

html，可以由c#語言實現。