# Yahoo! UI Library

### TreeView Widget

Yahoo! UI Library > treeview > HTMLNode.js (source view)

    /**
     * This implementation takes either a string or object for the
     * oData argument.  If is it a string, we will use it for the display
     * of this node (and it can contain any html code).  If the parameter
     * is an object, we look for a parameter called "html" that will be
     * used for this node's display.
     * @namespace YAHOO.widget
     * @class HTMLNode
     * @extends YAHOO.widget.Node
     * @constructor
     * @param oData {object} a string or object containing the data that will
     * be used to render this node
     * @param oParent {YAHOO.widget.Node} this node's parent node
     * @param expanded {boolean} the initial expanded/collapsed state
     * @param hasIcon {boolean} specifies whether or not leaf nodes should
     * have an icon
     */
    YAHOO.widget.HTMLNode = function(oData, oParent, expanded, hasIcon) {
        if (oData) {
            this.init(oData, oParent, expanded);
            this.initContent(oData, hasIcon);
        }
    };

    YAHOO.extend(YAHOO.widget.HTMLNode, YAHOO.widget.Node, {

        /**
         * The CSS class for the html content container.  Defaults to ygtvhtml, but
         * can be overridden to provide a custom presentation for a specific node.
         * @property contentStyle
         * @type string
         */
        contentStyle: "ygtvhtml",

        /**
         * The generated id that will contain the data passed in by the implementer.
         * @property contentElId
         * @type string
         */
        contentElId: null,

        /**
         * The HTML content to use for this node's display
         * @property content
         * @type string
         */
        content: null,

        /**
         * Sets up the node label
         * @property initContent
         * @param {object} An html string or object containing an html property
         * @param {boolean} hasIcon determines if the node will be rendered with an
         * icon or not
         */
        initContent: function(oData, hasIcon) {
            if (typeof oData == "string") {
                oData = { html: oData };
            }

            this.html = oData.html;
            this.contentElId = "ygtvcontentel" + this.index;
            this.hasIcon = hasIcon;

            this.logger = new YAHOO.widget.LogWriter(this.toString());
        },

        /**
         * Returns the outer html element for this node's content
         * @method getContentEl
         * @return {HTMLElement} the element
         */
        getContentEl: function() {
            return document.getElementById(this.contentElId);
        },

        // overrides YAHOO.widget.Node
        getNodeHtml: function() {
            this.logger.log("Generating html");
            var sb = [];

            sb[sb.length] = '<table border="0" cellpadding="0" cellspacing="0">';
            sb[sb.length] = '<tr>';

            for (var i=0;i<this.depth;++i) {
                sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '">&#160;</td>';
            }

            if (this.hasIcon) {
                sb[sb.length] = '<td';
                sb[sb.length] = ' id="' + this.getToggleElId() + '"';
                sb[sb.length] = ' class="' + this.getStyle() + '"';
                sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '"';
                if (this.hasChildren(true)) {
                    sb[sb.length] = ' onmouseover="this.className=';
                    sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
                    sb[sb.length] = this.tree.id + '\',' + this.index +  ').getHoverStyle()"';
                    sb[sb.length] = ' onmouseout="this.className=';
                    sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
                    sb[sb.length] = this.tree.id + '\',' + this.index +  ').getStyle()"';
                }
                sb[sb.length] = '>&#160;</td>';
            }

            sb[sb.length] = '<td';
            sb[sb.length] = ' id="' + this.contentElId + '"';
            sb[sb.length] = ' class="' + this.contentStyle + '"';
            sb[sb.length] = ' >';
            sb[sb.length] = this.html;
            sb[sb.length] = '</td>';
            sb[sb.length] = '</tr>';
            sb[sb.length] = '</table>';

            return sb.join("");
        },

        toString: function() {
            return "HTMLNode (" + this.index + ")";
        }

    });

Copyright © 2006 Yahoo! Inc. All rights reserved.