JSignage:InteractiveTutorial2

From SpinetiX Support Wiki

Jump to: navigation, search

Description

Advanced click handler

  • We can make this demo a little fancier by changing the making the text color dependent on the value.

Source code

$.uiStyle = 'round';
 
var counter = 0, more, less, counterArea;
 
function getTextColor( value ) {
  if ( value > 0 )
    return 'green';
  else if ( value < 0 )
    return 'red';
  else
    return 'grey';
}
 
$('svg').add([
  more = $.pushButton( { left: 100, top: 100, width: 200, height: 60, fontWeight: 'bold', begin: 0 }, 'More' ),
  less = $.pushButton( { left: 400, top: 100, width: 200, height: 60, fontWeight: 'bold' }, 'Less' ),
  counterArea = $.textArea( {
    left: 700, top: 100, width: 100, height: 60,
    fontSize: 'max',
    textAlign: 'end',
    frame: { frameColor: 'black', padding: 5, frameSize: 2 }
  } ).text( $.tspan(0, { fill: getTextColor(0) } ) )
]);
 
more.click( function() {
  ++counter;
  counterArea.text( $.tspan( counter, { fill: getTextColor(counter) } ) );
});
 
less.click( function() {
  --counter;
  counterArea.text( $.tspan( counter, { fill: getTextColor(counter) } ) );
});

Preview

This page was last modified on 20 August 2014, at 12:04. This page has been accessed 1,833 times.