Step one - description
This example show Dynamic Step Process Panels without label icons, and next previous buttons. You don't have to move step-by-step.
Features:
- 4 steps (width configurable in css),
- free choice mode,
- every step can be choosed again,
- first step selected,
- fade effect speed 1 second,
- style orange-gray,
- onOpen event implemented
Step two - implementation way 1
<script type='text/javascript'>
var timesOpened = 0;
</script>
[dspp id='example2']
Step three - implementation way 2
[inline]
<script type='text/javascript'>
var timesOpened = 0;
function customOnOpen(event, step, content, stepNumber)
{
$('.message').remove();
if(stepNumber==2)
{
timesOpened++;
content.prepend('<div class='message'>You've opened this step ' + timesOpened + ' time' + (timesOpened>1 ? 's':'') + '.</div>');
}
}
</script>
[/inline]
[dspp_old id='processPanel2' icons='false' kind='freeChoice' style='orange-gray'
nextPrevButtons='false' onOpen='customOnOpen']
[dspp_panel id='processPanel2' class='panel']
[dspp_step href='#p2content1' class='p2Step1']Description[/dspp_step]
[dspp_step href='#p2content2' class='p2Step2']Implementation - way 1[/dspp_step]
[dspp_step href='#p2content3' class='p2Step3']Implementation - way 2[/dspp_step]
[dspp_step href='#p2content4' class='p2Step4']Enjoy![/dspp_step]
[dspp_content id='p2content1']content for step 1[/dspp_content]
[dspp_content id='p2content2']content for step 2[/dspp_content]
[dspp_content id='p2content3']content for step 3[/dspp_content]
[dspp_content id='p2content4']content for step 4[/dspp_content]
[/dspp_panel]
