Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

YUI3-Treeview (gallery-yui3treeview) on cdn

Last Updated: 01/11/11

+ 0 -

Gonzalo Cordero

YUI Developer

See 1 more by this user.

Created: 11/13/10
Last CDN Push: 01/3/11
Build Tag: gallery-2011.01.03-18-30
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0 PR3
Free for use.

Take a look at the first iteration of the new YUI3 Treeview.

Release notes:

=============

You must use the latest YUI3 branch in order to use Treeview.
Supports three different ways of creating a tree: From existing markup, from an object literal, or loading on demand(Requires the gallery-yui3treeviewdatasource plugin).
Supports two different views: Classic and Menu. sprite and css files can be found in the assets folder.
Supports keyboard navigation for accessibility support.

Check out the following presentation for more info:

http://www.slideshare.net/gonzalocordero/preview-of-yui3-treeview

Tags:
gonzalocordero

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

Properties

These are the current properties that

srcNode: The source node where the tree will be built from. (Required)
contentBox: Due to a known bug, when providing your markup, the contentBox and boundingBox should point to the srcNode. (Required when providing markup)
boundingBox: The bouding box, refer to to [http://developer.yahoo.com/yui/3/widget/ YUI Widget] documentation to learn about this property. (Required when providing markup)
type: Necessary when specifying a new TreeView. For treeleafs, there is no need to specify a value. (Required for TreeView objects)
children: Array containing the Tree nodes. A Tree child can be a TreeLeaf or another Treeview.(Optional)
label: Label attribute (Required)

Events

Both treeview and treeleafs widgets can listen for events. You can attach any YUI3 supported event to your treeviews and trealeafs objects, in addition, since TreeView inherits from Widget, Widget-parent and Widget-child, TreeView can also subscribe to those events.

Here is a quick example on how you'd alert the label of a treeleaf:

 

myTreeview.on("treeleaf:click", function (e){

  alert(e.target.get("label"));

});

In addition, TreeView publishes the following custom event:

toggleTreeState: Issues a expand/collapse toggle event

More custom events will be added in the upcoming releases.

References:

[http://developer.yahoo.com/yui/3/widget/ YUI Widget]
[http://developer.yahoo.com/yui/3/api/module_widget-parent.html Widget-Parent]
[http://developer.yahoo.com/yui/3/api/module_widget-child.html Widget-Child]

Skins

There are two default views supported right now: Menu view and Classic view.

For menu view: treeview-menu.css
For the classic view: treeview-classic.css

How to create a TreeView

By providing your own markup:



<ul id="mytree">

    <li>

        <a href="progressive.html">Label</a>

        <ul>

           <li>

               <span>I'm a tree leaf</span>

           </li>

        </ul>

    </li>

    <li>

        <a href="progressive.html">label2</a>

        <ul>

            <li>

                <span>I'm too</span>

            </li>

        </ul>

    </li>

</ul>YUI().use('gallery-yui3treeview', function(Y) {

    

var treeview = new Y.TreeView({  

     srcNode: '#mytree',

     contentBox: '#mytree',

      boundingBox: '#mytree',

      type : "TreeView"

});

treeview.render();

});

By providing a constructor object:

 

var treeview = new Y.TreeView({  

     srcNode: '#mytree',

     contentBox: null,

     type: "TreeView",

     children: [

                   {

                      label: "level1-1",

                      type: "TreeView",

                      children: [

                          {label: "level2-1"},

                          {label: "level2-2"}

                      ]

                   },

                   {

                       type: "TreeView",

                      label : "level1-2"

                  }

               ]

});

Code Sample

<script src="http://yui.yahooapis.com/3.3.0 PR3/build/yui/yui-min.js"></script>

<ul id="mytree"></ul>
 
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.01.03-18-30'
}).use('gallery-yui3treeview', function(Y) {
 
var treeview = new Y.TreeView({  
     srcNode: '#mytree',
     contentBox: null,
     type: "TreeView",
     children: [
                   {
                      label: "level1-1",
                      type: "TreeView",
                      children: [
                          {label: "level2-1"},
                          {label: "level2-2"}
                      ]
                   },
                   {
                       type: "TreeView",
                      label : "level1-2"
                  }
               ]
});
 
treeview.render();
});

Forum Posts

Subject	Author	Date
Treeview notes	Gonzalo Cordero	11/30/10
Re: Treeview notes	Satyam	12/1/10
Re: Treeview notes	Gonzalo Cordero	12/2/10
Re: Treeview notes	Satyam	12/2/10
Re: Treeview notes	John Coady	12/4/10
Re: Treeview notes	Gonzalo Cordero	12/8/10
Re: Treeview notes	Stjepan Rajko	12/23/10
Re: Treeview notes	Gonzalo Cordero	12/23/10
TreeView type property	Donald Fincher	12/27/10
Re: Treeview notes	Stjepan Rajko	12/27/10