Themes

EasyTree comes with a number of themes that are easily interchangable which can be seen using the dropdown below. It is also possible to attach you own css class to the individual li and text elements for more specific styling

By default folders are given a folder icon and nodes given a blank file icon however it is very easy to change the default icons with either your own icon or an icon taken from jqueryui

Available themes:
  • First Node
  • Custom classes
  • Folder 1
  • Jquery icon 'ui-icon-lightbulb'
    • Custom image
    • Jquery icon 'ui-icon-scissors'
      • Sub Sub Node 1
      • Sub Sub Node 2
      • Sub Sub Node 3
      • Sub Sub Node 4
    • Sub Node 3
  • Blue css style
   <div id="demo1_menu">
       <ul>
           <li data-uiicon="ui-icon-lightbulb">First Node</li>
           <li class="grey_background"><a href="http://www.easyjstree.com" target="_blank"><span class="red green_background">Custom classes</span></a></li>
           <li class="isFolder isExpanded" title="Bookmarks">
               Folder 1
               <ul>
                   <li><img src="/content/images/google.ico" /><a href="http://www.google.com" target="_blank">Go to Google.com</a></li>
                   <li><img src="/content/images/yahoo.jpg" /><a href="http://www.yahoo.com" target="_blank">Go to Yahoo.com</a></li>
               </ul>
           </li>
           <li class="isExpanded" data-uiicon="ui-icon-folder-collapsed">
               Jquery icon 'ui-icon-lightbulb'
               <ul>
                   <li><img src="/content/images/news.png" />Custom image</li>
                   <li data-uiicon="ui-icon-scissors">
                       Jquery icon 'ui-icon-scissors'
                       <ul>
                           <li>Sub Sub Node 1</li>
                           <li>Sub Sub Node 2</li>
                           <li>Sub Sub Node 3</li>
                           <li>Sub Sub Node 4</li>
                       </ul>
                   </li>
                   <li>Sub Node 3</li>
               </ul>
           </li>
           <li><span class="blue">Blue css style</span></li>
       </ul>
   </div>
   <script>
       $('#demo1_menu').easytree();
       function changeTheme() {
           var theme = $('#themes').val();
           var stylesheet = $('.skins');
           var href = stylesheet.attr('href');
           stylesheet.attr('href', '/content/skin-' + theme + '/ui.easytree.css');
       }
   </script>
   <style>
       .grey_background {
           background-color: #cccccc;
       }
       .green_background {
           background-color: #909B19;
       }
       .red {
           color: #FF0000;
       }
       .blue {
           color: #0000FF;
       }
   </style>