|
|
The normal button item is not capable of ScriptActions. But in case you want to have something looking similar but only react with JavaScript you could achieve this with the following setup.
|
|
|
First of all we need the button text:
|
|
|
|
As normally the text on a button is centered on both axis we will need to group the text two times - in our example there is a global CSS style which defines a "text-align:left" which causes our text not to be centered. But placed in a second group which is aligned centered all works fine:
|
|
|
|
Then we define the buttons size - in our example take 150x30
|
|
|
|
Now let's define a nice background color - in case you want rounded corners simply use a gradient for background. This will be compatible to all browsers even without CSS3-support.
|
|
|
|
Finally let's assign some nice ScriptActions... For a nice example let's take the ShowItem action to show a second button. Of course we need some mouseover effects too so take the CursorHover action.
|
|
|
|
Now create a second button with Copy&Paste, switch the color and asign an identifiying CSS class to each button
|
|
|
|
Now set the second button to be rendered hidden - you will find this option on the group settings tab "Rules".
|
|
|
|
The final step is to configure the ShowItem action correctly so it will switch the visibility of each button
|
|
|
|
One optional parameter of the ShowItem actions is pretty useful: The "Hide Class Prefix" which will simply hide all items in your page whose CSS class starts with the defined value. In our example all items which own a classname which starts with "button" will be hidden prior to the "show"-call of the ScriptAction. So when clicking on the button first both will be hidden and then the button with the class "button2" will be shown.
|
|
|
In the tree you will see the value of the primary parameter - in our example it's the selected CSS class to be shown:
|
|
|
|
Now see and test the final result live in this page:
|
|
|