jquery 目錄樹

1.看介面

2.介面html

View Code

        <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

View Code

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 擴展

View Code

    (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#語言實現。