Quellcode vom Beispiel

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>DirectoryTree - JQuery plugin to create tree menu from ul list
    
    
        DirectoryTree - JQuery plugin to create tree menu from ul list
    Expand all | Collapse all

    ApplicationResourceJquery.php
    ConsoleProcessException.php
Unix.php
    Exception.php
JQueryControllerAction
    HelperAutoComplete.php
View
    HelperJQueryContainer.php
UiWidgetPane.php
    UiWidget.php
TabPane.php
TabContainer.php
Spinner.php
    Slider.php
JQuery.php
AutoComplete.php
DialogContainer.php
    DatePicker.php
ColorPicker.php
AccordionPane.php
AjaxLink.php
    AccordionContainer.php
Exception.php
FormDecorator
    AccordionContainer.php
UiWidgetPane.php
UiWidgetElementMarker.php
    UiWidgetElement.php
UiWidgetContainer.php
TabPane.php
TabContainer.php
    DialogContainer.php
AccordionPane.php
ElementAutoComplete.php
    UiWidget.php
Spinner.php
Slider.php
DatePicker.php
ColorPicker.php
    Exception.php
Form.php
Exception.php
DbAdapter
    FirebirdException.php
Firebird.php
StatementFirebirdException.php
Firebird.php
Exception.php
JQuery.php
    <script src="https://code.jquery.com/jquery-1.11.0.min.js">
    <script>
    (function(e,t,n,r){function o(t,n){this.element=t;this.$element=e(t);this.options=e.extend({},s,n);this._defaults=s;this._name=i,this.$topLevelBranches,this.$allBranches,this.init()}var i="abixTreeList",s={collapsedIconClass:"glyphicon glyphicon-plus",expandedIconClass:"glyphicon glyphicon-minus"};o.prototype.init=function(){var t=this;t.$topLevelBranches=t.$element.children("li");t.$allBranches=t.$element.find("li");t.$element.addClass("abix-tree-list");t.$allBranches.not(t.$topLevelBranches).hide();t.$allBranches.each(function(){var n=e(this).children("ul,ol");if(n.size()>0){e(this).addClass("collapsed");e('').prependTo(e(this))}});t.$allBranches.children("span.icon").on("click",function(n){if(e(this).parent().hasClass("collapsed")){t.expand(e(this).parent());n.stopPropagation()}if(e(this).parent().hasClass("expanded")){t.collapse(e(this).parent());n.stopPropagation()}});e("#tree-expand-all").on("click",function(e){e.preventDefault();t.expandAll();e.stopPropagation()});e("#tree-collapse-all").on("click",function(e){e.preventDefault();t.collapseAll();e.stopPropagation()})};o.prototype.expand=function(e){var t=this;e.children("ul,ol").children("li").show(500,function(){e.removeClass("collapsed").addClass("expanded");e.children("span.icon").removeClass(t.options.collapsedIconClass).addClass(t.options.expandedIconClass)})};o.prototype.collapse=function(e){var t=this;e.children("ul,ol").children("li").hide(500,function(){e.removeClass("expanded").addClass("collapsed");e.children("span.icon").removeClass(t.options.expandedIconClass).addClass(t.options.collapsedIconClass)})};o.prototype.collapseAll=function(){var e=this;e.$allBranches.not(e.$topLevelBranches).hide(1e3,function(){e.$allBranches.removeClass("expanded").addClass("collapsed");e.$allBranches.children("span.icon").removeClass(e.options.expandedIconClass).addClass(e.options.collapsedIconClass)})};o.prototype.expandAll=function(){var e=this;e.$allBranches.show(1e3,function(){e.$allBranches.removeClass("collapsed").addClass("expanded");e.$allBranches.children("span.icon").removeClass(e.options.collapsedIconClass).addClass(e.options.expandedIconClass)})};e.fn[i]=function(t){return this.each(function(){if(!e.data(this,"plugin_"+i)){e.data(this,"plugin_"+i,new o(this,t))}})}})(jQuery,window,document)
        $(document).ready(function() {
            $('#tree').abixTreeList();
        });
    </script>
    </body>
</html>