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

Re: [ydn-javascript] Regarding custom icon tree view

Expand Messages
  • Satyam
    My apolocies, I didn t understand the question, I thought you wanted different sets of icons for each node and what you had asked for was multiples
    Message 1 of 5 , Feb 2, 2009
    View Source
    • 0 Attachment
      My apolocies, I didn't understand the question, I thought you wanted
      different sets of icons for each node and what you had asked for was
      multiples simultaneous icons for each node.

      For the expand/collapse icons, you can take the style sheet and images
      from the Menu-style example. Ignore the code, you don't need that for
      your code.

      For the multiple icons, then, you would have to use HTMLNodes, each
      loaded with the required <img> tags for the icons required.

      Actually, there are two ways to do this. You can use <img> tags in each
      node or you can use CSS to set different background images for each
      icon, which is what YUI often does with images such as the toggle icons
      for the default TreeView.

      You could set up a node like this:

      var newNode = YAHOO.widget.HTMLNode({html:'<div class="icon1"></div><div
      class="icon2"></div>Event Incidents - 5',parentNode);
      YAHOO.util.Dom.addClass(newNode.getContentEl(),'bullseyefolder');
      YAHOO.util.Dom.addClass(newNode.getContentEl(),'ok');

      Then, you can define the corresponding styles as:

      .bullseyefolder .icon1 {
      background: transparent url( .... );
      width: 20px;
      height:18px;
      float:left;
      }

      .ok .icon2 {
      background: transparent url( .... );
      width: 20px;
      height:18px;
      float:left;
      }

      By simply changing the style (Dom.replaceClass('ok','alert')) on the
      node's content, the images change according to the stylesheet declaration.

      Satyam





      mohan kumar wrote:
      > Hi,
      >
      > I did not understand reply for my question.I want to expalin my question in more detail.
      >
      > We are using yui custom icon treeview in our product.
      >
      > we want to show multiple icons for each node.
      >
      > I attached screen shots of our current tree view and required tree.
      >
      > In our current tree we are showing only one icon for each node.we want to multiple icons for each node.
      >
      > Thanks,
      > Mohan
      >
      >
      >
      >
      > --- On Fri, 1/30/09, Satyam <satyam@...> wrote:
      >
      >
      >> From: Satyam <satyam@...>
      >> Subject: Re: [ydn-javascript] Regarding custom icon tree view
      >> To: ydn-javascript@yahoogroups.com
      >> Date: Friday, January 30, 2009, 8:11 AM
      >> If you look at treeview-skin.css you can see that the
      >> definition for one
      >> of the toggle icons is as follows:
      >>
      >> .ygtvlp {
      >> width:18px; height:22px;
      >> cursor:pointer ;
      >> background: url(treeview-sprite.gif) 0 -2400px
      >> no-repeat;
      >> }*
      >> *
      >> That is the one for the last node in a branch with a plus
      >> sign ('lp').
      >>
      >> You could add your own className to those already used by
      >> the TreeView
      >> for each node as it is being created or at any time later:
      >>
      >> YAHOO.util.Dom.addClass(newNode.getToggleEl(),'iconSet1');
      >>
      >> Then you could add style definitions like the one above for
      >> each icon set:
      >>
      >> .ygtvlp.iconSet1 {
      >> width:18px; height:22px;
      >> cursor:pointer ;
      >> background: url(iconset1-lp.gif) no-repeat;
      >> }
      >>
      >> There is no space in between .ygtvlp and .iconSet1. You
      >> can either
      >> make a sprite with your various icon sets, which is what
      >> TreeView does,
      >> thus the offsets in the background position, or you can use
      >> different
      >> individual icons as in the example.
      >>
      >> Satyam
      >>
      >> **
      >>
      >> mohan kumar wrote:
      >>
      >>> Hi,
      >>>
      >>> we are using custom icon tree view.I want to know is
      >>>
      >> it possible to have two or more custom icons for each node
      >> in the tree.If it is possible what is the solution for it.
      >>
      >>> Thanks,
      >>> Mohan
      >>>
      >>>
      >>>
      >>>
      >>> ------------------------------------
      >>>
      >>> Yahoo! Groups Links
      >>>
      >>>
      >>>
      >>>
      >>>
      >> ------------------------------------------------------------------------
      >>
      >>> No virus found in this incoming message.
      >>> Checked by AVG - www.avg.com
      >>> Version: 8.0.233 / Virus Database: 270.10.15/1924 -
      >>>
      >> Release Date: 01/29/09 07:13:00
      >>
      >>>
      >
      >
      >
      > ------------------------------------
      >
      > Yahoo! Groups Links
      >
      >
      >
      >
      > ------------------------------------------------------------------------
      >
      >
      > No virus found in this incoming message.
      > Checked by AVG - www.avg.com
      > Version: 8.0.233 / Virus Database: 270.10.16/1929 - Release Date: 01/31/09 20:03:00
      >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.