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

Re: Regarding custom icon tree view

Expand Messages
  • mohan kumar
    ... question in more detail. ... want to multiple icons for each node.
    Message 1 of 5 , Feb 2 2:14 AM
    • 0 Attachment
      --- In ydn-javascript@yahoogroups.com, mohan kumar <tmk_mohankumar@...>
      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
      > > >
      > > >
      >
    • 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 2 of 5 , Feb 2 5:35 AM
      • 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.