5 Replies Latest reply on Jan 24, 2017 5:26 PM by eboda_snaf

    listbox selection color

    eboda_snaf Level 1

      hi..

      How to change the listbox selection to red using JS? ( meaning the selected item's background in the list to be displayed in red to be more prominent.)

       

      Thanks much..

      cheers@

        • 1. Re: listbox selection color
          Peter Kahrel Adobe Community Professional & MVP

          If you mean a ScriptUI listbox the answer is no, you can't change the background colour.

           

          P.

          1 person found this helpful
          • 2. Re: listbox selection color
            eboda_snaf Level 1

            noted. Thank you.

            • 3. Re: listbox selection color
              Loic.Aigon Adobe Community Professional

              Unless

               

              Capture d’écran 2017-01-24 à 10.59.27.png

               

              var main = function() {
                UI().show();
              }
              
              
              var data = [];
              var i = 0, n = 200;
              while ( i<n ) {
                data.push({text:i+1});
                i++;
              }
              
              
              var UI = function() {
                var w = new Window('dialog' ),
                list;
              
                w.preferredSize = [200,250];
                w.alignChildren = ["fill","fill"]
                list = new List();
              
              
                w.onShow = function() {
                list.add(w, 200);
                list.fill ( listItemRenderer, data );
                w.layout.layout(true)
                }
                return w;
              }
              
              
              
              
              
              
              var listItemRenderer = function (parent, data ) {
                var g = parent.add('group'),
                red = g.add('group'),
                inGp = g.add('group'),
                t = inGp.add('edittext', undefined, data.text ),
                b = inGp.add('button',undefined,"?" );
                g.orientation = 'stack';
                red.alignment = ["fill","fill"];
                inGp.alignment = ["fill","top"];
                t.preferredSize.width = 100;
                b.maximumSize.width = 25;
                t.alignment = ["fill","top"];
                red.visible = false;
                var paintItem = function(o,c){
              
                var r = (c && typeof(c.r)=='number' )? c.r :  Math.round ( Math.random()*10 )/10;
                var g  = (c && typeof(c.g)=='number')? c.g:  Math.round ( Math.random()*10 )/10;
                var b = (c && typeof(c.b)=='number')? c.b : Math.round ( Math.random()*10 )/10;
              
                o.graphics.backgroundColor = o.graphics.newBrush(
                o.graphics.BrushType.SOLID_COLOR,[r,g,b], 1
                );
                };
              
              
                paintItem ( red, {r:1,g:0,b:0} );
              
                b.onClick = function() {
                alert( t.text );
                };
              
              
                g.update = function( data ) {
                t.text = data.text;
                }
              
              
                g.addEventListener ( 'mouseover', onMouseOver );
                g.addEventListener ( 'mouseout', onMouseOut );
              
                function onMouseOver(evt) {
                red.visible = true;
                }
              
              
                function onMouseOut(evt) {
                red.visible = false;
                }
              
              
                return g;
              }
              
              
              var List = function() {
                var max = 12, pnl, lstGp, sb, ls = this, sbValue = 0, itemHeight, index = 0, mul = 1, 
                index  = 0;
                this.listItems = [];
                this.data;
              
                this.add = function(parent, maxSize) {
                pnl = parent.add('panel');
                pnl.alignment = ["fill","fill"];
                pnl.orientation = 'row';
                pnl.maximumSize.height = maxSize;
                lstGp =pnl.add ('group');
                lstGp.orientation = 'column';
                sb = pnl.add ('scrollbar');
                lstGp.spacing = 0;
                lstGp.margins = 0;
              
                lstGp.alignment = ["fill","fill"];
                sb.alignment = ["fill","fill"];
                sb.maximumSize.width = 25;
              
                sb.onChange = function() {
              
                itemHeight = ls.listItems[0].size.height;
              
                var sbHeight = sb.size.height, i = 0;
                sb.maxvalue=itemHeight*ls.data.length - sb.size.height ;
                var n = ls.listItems.length, movedBefore = [], movedAfter = [], notMoved = [];
              
                var delta = sbValue - sb.value;
              
                sbValue = sb.value;
                var itemsCount = index+Math.floor(sb.size.height/(itemHeight+lstGp.spacing))+1 ;
              
                while ( i<n ) {
              
                if (delta<0 && ls.listItems [ i ].location[1]  + delta +  itemHeight +2*lstGp.spacing < 0 ) {
                ls.listItems [ i ].location[1] = ls.listItems [ i ].location[1] + delta+ max*itemHeight;
                ls.listItems [ i ].index = ls.listItems [ i ].index || i;
                ls.listItems [ i ].index+=max;
                ls.listItems [ i ].update( {text:ls.listItems [ i ].index+1} );
                }
                else if (delta>0 && ls.listItems [ i ].location[1]+delta>ls.listItems [ i ].parent.location[1]+ls.listItems [ i ].parent.size.height )  {
                ls.listItems [ i ].location[1] = ls.listItems [ i ].location[1] + delta-max*itemHeight;
                ls.listItems [ i ].index && ls.listItems [ i ].index-=max;
                ls.listItems [ i ].update( {text:ls.listItems [ i ].index+1} );
                }
                else {
                ls.listItems [ i ].location[1]+=delta;
                }
                i++;
                }
                }
                };
              
              
                this.fill = function ( itemRenderer, data ) {
                var i = 0, n =0;
              
                this.data = data;
              
                if ( !itemRenderer
                || !(itemRenderer instanceof Function)
                || !data
                || !(data instanceof Array) 
                || !data.length ) {
                List.isReady = false;
                }
                n = data.length;
              
                while ( i<n ) {
                i< max && ls.listItems[i] = itemRenderer (lstGp,  data[i] );
                i++;
                }
                List.isReady = true;
                };
              }
              main();
              
              • 4. Re: listbox selection color
                Peter Kahrel Adobe Community Professional & MVP

                Ah, like that

                • 5. Re: listbox selection color
                  eboda_snaf Level 1

                  wow wow.. really cool.. 

                   

                  (Thumbs up)