Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] TreeView problem: leaf with folder icons / more than one lableStyle?

Expand Messages
  • Satyam
    The difference in between an intermediate node and an end node is in a single letter on the className of the table cell that holds the icon and, possibly, the
    Message 1 of 2 , May 27, 2009
    • 0 Attachment
      The difference in between an intermediate node and an end node is in a
      single letter on the className of the table cell that holds the icon
      and, possibly, the folder icon.

      For an end node, the className is ygtvln (the 'n' meaning no-child)
      while for an intermediate node it might be ygtvlm or ygtvlp where the
      'm' or 'p' correspond to a minus or plus sign.

      If you look for the styles assigned to these two nodes in the stylesheet
      you will see they use as background two different GIF files. You are
      free to change the background image that corresponds to the ygtvln style
      to another icon or you can change the ln.gif icon to include the folder
      icon in it. You will need to update the stylesheet anyway because you
      will have to widen the size of the cell so the bigger icon still fits in.

      Satyam




      sfinkenzeller escribió:
      > Hi,
      >
      > I've a problem with TreeView (in YUI 2.7.0b). I'd like to build a directory tree with the component TreeView. But I've two challenges:
      > 1. The leaf nodes are directories too. (so the default behaviour of folder.css is not the solution)
      > 2. I've to set different styles to the nodes but if I set more than one style with lableStyle only the last one works
      >
      > Here are my code:
      >
      > <html>
      > <head>
      > <link rel="stylesheet" type="text/css" href="./build/fonts/fonts-min.css" />
      > <link rel="stylesheet" type="text/css" href="./build/treeview/assets/skins/sam/treeview.css" />
      > <link rel="stylesheet" type="text/css" href="./assets/css/folders/tree.css">
      >
      > <style type="text/css">
      > <!--
      > .dirfarbe0 { color:#f88ce5 } // Defaultfarbe
      > .currdirx { background-color:#E0E0E0 } // Ausgewähltes Verzeichnis
      > .icon-dir { display:block; height:22px; padding-left:20px; background:transparent url(diricon.gif) 0 0px no-repeat; }
      >
      > -->
      > </style>
      >
      > <script type="text/javascript" src="./build/yahoo-dom-event/yahoo-dom-event.js"></script>
      > <script type="text/javascript" src="./build/treeview/treeview-min.js"></script>
      >
      > <script type="text/javascript">
      > //global variable to allow console inspection of tree:
      > var tree;
      >
      > //anonymous function wraps the remainder of the logic:
      > (function() {
      >
      > //function to initialize the tree:
      > function treeInit() {
      >
      > //instantiate the tree:
      > tree = new YAHOO.widget.TreeView("treeDivExplorer");
      >
      > // Baum erzeugen
      > var tmpNode = new YAHOO.widget.TextNode({label: "mylabel2", myNodeId: "121", expanded: false}, tree.getRoot());
      > tmpNode.labelStyle='icon-dir';
      > tmpNode = new YAHOO.widget.TextNode({label: "mylabel3", myNodeId: "131", expanded: true}, tree.getRoot());
      > new YAHOO.widget.TextNode({label: tmpNode.label + "-y2", myNodeId: "133", expanded: false} , tmpNode);
      > var curnode = new YAHOO.widget.TextNode({label: tmpNode.label + "-y3x", myNodeId: "134", expanded: false} , tmpNode);
      > curnode.labelStyle='currdirx dirfarbe0';
      >
      > //The tree is not created in the DOM until this method is called:
      > tree.render();
      > }
      >
      > //Add an onDOMReady handler to build the tree when the document is ready
      > YAHOO.util.Event.onDOMReady(treeInit);
      >
      > })();
      >
      > </script>
      >
      > </head>
      > <body>
      > <div id="treeDivExplorer"></div>
      > </body>
      > </html>
      >
      >
      > Could anyone help me? Thanks.
      >
      > Regards,
      > Stefan
      >
      >
      >
      >
      > ------------------------------------
      >
      > Yahoo! Groups Links
      >
      >
      >
      > ------------------------------------------------------------------------
      >
      >
      > No virus found in this incoming message.
      > Checked by AVG - www.avg.com
      > Version: 8.5.339 / Virus Database: 270.12.42/2137 - Release Date: 05/27/09 07:50:00
      >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.