elements.treeview.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. /**
  2. <b>Treeview</b>. A wrapper for FuelUX treeview element.
  3. It's just a wrapper so you still need to include FuelUX treeview script first.
  4. */
  5. (function($ , undefined) {
  6. $.fn.aceTree = $.fn.ace_tree = function(options) {
  7. var $options = {
  8. 'open-icon' : ace.vars['icon'] + 'fa fa-folder-open',
  9. 'close-icon' : ace.vars['icon'] + 'fa fa-folder',
  10. 'selectable' : true,
  11. 'selected-icon' : ace.vars['icon'] + 'fa fa-check',
  12. 'unselected-icon' : ace.vars['icon'] + 'fa fa-times',
  13. 'loadingHTML': 'Loading...'
  14. }
  15. $options = $.extend({}, $options, options)
  16. this.each(function() {
  17. var $this = $(this);
  18. $this.addClass('tree').attr('role', 'tree');
  19. $this.html(
  20. '<li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">\
  21. <div class="tree-branch-header">\
  22. <span class="tree-branch-name">\
  23. <i class="icon-folder '+$options['close-icon']+'"></i>\
  24. <span class="tree-label"></span>\
  25. </span>\
  26. </div>\
  27. <ul class="tree-branch-children" role="group"></ul>\
  28. <div class="tree-loader" role="alert">'+$options['loadingHTML']+'</div>\
  29. </div>\
  30. <li class="tree-item hide" data-template="treeitem" role="treeitem">\
  31. <span class="tree-item-name">\
  32. '+($options['unselected-icon'] == null ? '' : '<i class="icon-item '+$options['unselected-icon']+'"></i>')+'\
  33. <span class="tree-label"></span>\
  34. </span>\
  35. </li>');
  36. $this.addClass($options['selectable'] == true ? 'tree-selectable' : 'tree-unselectable');
  37. $this.tree($options);
  38. });
  39. return this;
  40. }
  41. })(window.jQuery);