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

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

Expand Messages
  • mohan kumar
    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
    Message 1 of 5 , Feb 2, 2009
    • 0 Attachment
      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
      > >
      > >
    • mohan kumar
      ... question in more detail. ... want to multiple icons for each node.
      Message 2 of 5 , Feb 2, 2009
      • 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 3 of 5 , Feb 2, 2009
        • 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.