change background and knob background slider?

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

change background and knob background slider?

Skar-3
Hi,

How do I set a background image/color to the slider and also color/image
to the slider's knob?

see http://vps.net/ for an example slider I like to emulate. It has the
custom knox, thinner slider bg and also markings for the possible step
values.

For me, the step values aren't important. But I'd like to customize the
knob and the rest of the slider to have different bg color and also an
image for the knob and another image repeated inside the slider bg.

cheers,
skar.

--
--
The life so short, the craft so long to learn.


------------------------------------------------------------------------------
Join us December 9, 2009 for the Red Hat Virtual Experience,
a free event focused on virtualization and cloud computing.
Attend in-depth sessions from your desk. Your couch. Anywhere.
http://p.sf.net/sfu/redhat-sfdev2dev
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: change background and knob background slider?

Fabian Jakobs
Administrator
Hi skar,

there are two ways to style a widget, which apply to the Slider as well:

1. Set the properties directly

You can style the background by setting properties on the slider. You
can access the knob using
slider.getChildcontrol("knob"). The background of a widget is usually
defined using the "decorator" property.

2. Use themes

You can define the look of a slider using the appearance theme. This is
how the slider is styled in the framework:

    "slider" :
    {
      style : function(states)
      {
        var decorator;

        var focused = !!states.focused;
        var invalid = !!states.invalid;
        var disabled = !!states.disabled;

        if (focused && invalid && !disabled) {
          decorator = "input-focused-invalid";
        } else if (focused && !invalid && !disabled) {
          decorator = "input-focused";
        } else if (disabled) {
          decorator = "input-disabled";
        } else if (!focused && invalid && !disabled) {
          decorator = "border-invalid";
        } else {
          decorator = "input";
        }

        return {
          decorator : decorator
        }
      }
    },

    "slider/knob" :
    {
      include : "button-frame",

      style : function(states)
      {
        return {
          decorator : states.disabled ?
"scrollbar-slider-horizontal-disabled" :
                                        "scrollbar-slider-horizontal",
          shadow: undefined,
          height : 14,
          width : 14
        };
      }
    },

> Hi,
>
> How do I set a background image/color to the slider and also color/image
> to the slider's knob?
>
> see http://vps.net/ for an example slider I like to emulate. It has the
> custom knox, thinner slider bg and also markings for the possible step
> values.
>
> For me, the step values aren't important. But I'd like to customize the
> knob and the rest of the slider to have different bg color and also an
> image for the knob and another image repeated inside the slider bg.
>
> cheers,
> skar.
>
>  


--
Fabian Jakobs
JavaScript Framework Developer

1&1 Internet AG - Web Technologies
Ernst-Frey-Straße 9 · DE-76135 Karlsruhe
Telefon: +49 721 91374-6784
[hidden email]

Amtsgericht Montabaur / HRB 6484
Vorstände: Henning Ahlert, Ralph Dommermuth, Matthias Ehrlich, Thomas Gottschlich, Robert Hoffmann, Markus Huhn, Hans-Henning Kettler, Dr. Oliver Mauss, Jan Oetjen
Aufsichtsratsvorsitzender: Michael Scheeren


------------------------------------------------------------------------------
Join us December 9, 2009 for the Red Hat Virtual Experience,
a free event focused on virtualization and cloud computing.
Attend in-depth sessions from your desk. Your couch. Anywhere.
http://p.sf.net/sfu/redhat-sfdev2dev
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: change background and knob background slider?

Skar-3
Hi Fabian,

> Hi skar,
>
> there are two ways to style a widget, which apply to the Slider as well:
>
> 1. Set the properties directly
>
> You can style the background by setting properties on the slider. You
> can access the knob using
> slider.getChildcontrol("knob"). The background of a widget is usually
> defined using the "decorator" property.
>
> 2. Use themes
>
> You can define the look of a slider using the appearance theme. This is
> how the slider is styled in the framework:
>  
Thanks for the tips and the code.

I changed the theme for just the knob with my own decoration which uses
a different bg image and it works now :)

cheers,
skar.

--
--
The life so short, the craft so long to learn.


------------------------------------------------------------------------------
Join us December 9, 2009 for the Red Hat Virtual Experience,
a free event focused on virtualization and cloud computing.
Attend in-depth sessions from your desk. Your couch. Anywhere.
http://p.sf.net/sfu/redhat-sfdev2dev
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel