UIZE JavaScript Framework

2009 NEWS 2009-04-15 - Uize.Node.setStyle and setNodeStyle Improved

The Uize.Node.setStyle static method of the Uize.Node module and the setNodeStyle instance method of the Uize.Widget module have been improved in a number of ways.

1. Special Handling for Opacity

The Uize.Node.setStyle method now abstracts the differences between Internet Explorer and browsers that support the standard CSS opacity property.

This means that you can use the Uize.Node.setStyle method to set opacity as you would any other CSS style property, and the method will set the value of IE's proprietary filter style property as necessary.

NOW

Uize.Node.setStyle ('myNodeId',{opacity:.5,width:200,height:100});

Previously, you would have had to split the above statement into one call to the Uize.Node.setOpacity method and one call to the Uize.Node.setStyle method, as follows...

PREVIOUSLY

Uize.Node.setOpacity ('myNodeId',.5);
Uize.Node.setStyle ('myNodeId',{width:200,height:100});

2. Specifying Number Values

Now, when number type values are specified for CSS style properties (other than the opacity and zIndex properties), the values are converted to strings by appending the "px" unit.

So, for example, the following statement...

Uize.Node.setStyle ('myNodeId',{width:'200px',height:'100px'});

...can now also be written as...

Uize.Node.setStyle ('myNodeId',{width:200,height:100});

This feature of the Uize.Node.setStyle method is provided as a convenience, so that the values of number type variables can be supplied - as is - when setting style properties such as left, top, width, height, fontSize, etc.

3. Specifying Instance Values

Now, when an instance of a Uize subclass is specified for a CSS style property, the instance's valueOf Intrinsic Method is invoked in order to obtain the value of the instance's value state property.

So, for example, the following statement...

Uize.Node.setStyle ('myNodeId',{width:myWidthSlider.get ('value') + 'px'});

...can now also be written as just...

Uize.Node.setStyle ('myNodeId',{width:myWidthSlider});

This feature of the Uize.Node.setStyle method is provided as a convenience, so that instances of Uize subclasses that are value selectors and that implement the value state property can be supplied - as is - when setting any style properties. If the value for an instance is a number type, then it will be further handled according to the rules for specifying number values.