Dynamic Step Process Panels for WordPress
Dynamic Step Process Panels is a lightweight jQuery plugin. It allows that any content can be represented in any number of tabs / steps. Can be used to:
- presentating bulleted content,
- multisteps forms,
- provide a description of products,
- viewing photos,
- anything that comes to your mind :).
- Step 1 - go to Settings submenu in WordPress administration panel, open position Dynamic Step Process Panels and configure your own panel.
-
Step 2 - after saving settings you'll get the information with shortcode, which you have to put into your page. The shortcode will look like this:
[dspp id='you_process_panel_id']
<a href="#processPanel-popup">open popup</a> [dspp id='you_process_panel_id']There is some parameters that can defined behaviour or look of the steps panel. It can be configured from administration panel.
Parameter | Default value | Possible values | Description |
---|---|---|---|
id | processPanel | - | Specifies the identifier of the steps panel. Should be unique for each panel, if they are displayed on one page. |
kind | stepByStep | stepByStep freeChoice |
Specifies the behaviour of the steps panel. Parameter stepByStep forces the user to open steps one after another. Parameter freeChoice allow free choice. |
style | green-blue |
green-blue blue-gray blue-green blue-maroon blue-orange green-gray green-maroon green-orange maroon-blue maroon-gray maroon-green maroon-orange orange-blue orange-gray orange-green orange-maroon |
Specifies the coloristic version of the step panel. 16 predefined base / hover color styles available. |
firstSelected | true | true false |
Specifies that the first step is open on start or not. |
icons | true | true false |
Specifies that the icons under the step labels shows or not. |
imgFolder | img | - | Specifies the path to folder which contains the sprite_with_icons.png, sprite_without_icons.png and sprite_buttons.png images. |
chooseAgain | true | true false |
Specifies that the step can be chosen again. |
nextPrevButtons | true | true false |
Specifies that the next and previous buttons will show. |
nextPrevButtonsPosition | bottom | bottom top |
Specifies the next and previous buttons position. |
nextButtonTitle | Next step | - | Specifies the next button caption. |
prevButtonTitle | Previous step | - | Specifies the previous button caption. |
fadeSpeed | 1000 | - | Specifies the fade effect speed (in miliseconds) when the step is changed. Set to 0 if you want to disable effect. |
event | click | click mouseover |
Specifies the type of event to be used for open step content. |
packed | true | true false |
If set to true, the packed version of javascript will be loaded (jquery.processPanel.packed.js). If set to false, scripts will be loaded separately and won't be packed (jquery-1.4.2.min.js, jquery.processPanel.js). |
jquery | true | true false |
It works only when parameter packed is set to false. If set to true jquery-1.4.2.min.js will be loaded. If set to false jquery-1.4.2.min.js won't be loaded. |
Notice: If you want to prevent default event functionality, use return false; instruction inside your custom event function.
Event | Aviable arguments | Description |
---|---|---|
beforeLoad | - | This event is triggered before step panel will be initialized. |
onLoad | - | This event is triggered after step panel has been initialized. |
onOpen | event step content stepNumber |
This event is triggered before opening step content. |
afterOpen | event step content stepNumber |
This event is triggered after opening step content. |
onHoverIn | event step stepNumber |
This event is triggered when step is hovered. |
onHoverOut | event step stepNumber |
This event is triggered when step hover is out. |
onOpenPopup | event button panel |
This event is triggered before opening process panel displayed as a popup. |
onClosePopup | event button panel |
This event is triggered after opening process panel displayed as a popup. |
The Dynamic Step Process Panels plugin has several important css classes.
The classes dspp_step, dspp_step-green-blue (depends on color version), dspp_step1 (depends on step number), dspp_step1-green-blue (only for first step, depends on color version) are added automaticaly on load to every step element.
So you can define the width of each step using .dspp_step1, .dspp_step2, .dspp_step3 etc. classes. For example:
.dspp_step1 { width: 100px; } .dspp_step2 { width: 110px; } .dspp_step3 { width: 150px; }When you use many step panels on one site you should use custom classes to specify style of each step. For example:
.myStep1, .myStep2, .myStep3 { width: 100px; }Remember to put their names into Class parameter in step config.
Here are some classes that define style of step panel, steps and contents. You can find them in wp-content/plugins/dynamic_step_process_panels/style.css file.
- Panel that is the container for the steps and their content
.dspp_panel { background-color: #ffffff; border: 1px solid #dbe6ee; padding: 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.dspp_step { float: left; position: relative; margin-left: -20px; width: 351px; height: 43px; font-size: 16px; padding-left: 20px; padding-top: 18px; background-image: url("img/sprite_with_icons.png"); background-repeat: no-repeat; outline: none; }
.dspp_stepLabel { position: absolute; top: 19px; right: 30px; }
.dspp_stepLabelLast { position: absolute; top: 19px; right: 25px; }
.dspp_content { clear: both; padding: 10px; line-height: 150%; }
.dspp_nextPrevButtons { clear: both; width: 310px; margin-left: auto; margin-right: auto; padding-top: 10px; padding-bottom: 10px; } .dspp_nextPrevButtons .dspp_button:first-child { margin-right: 10px; } .dspp_nextPrevButtons .dspp_button { float: left; display: block; width: 150px; height: 34px; padding-top: 12px; text-align: center; background-image: url("img/sprite_buttons.png"); background-repeat: no-repeat; cursor: pointer; } .dspp_nextPrevButtons .dspp_inactiveButton { background-position: -10px -310px; color: #ffffff; }You can load the content for some steps from files via AJAX technology. In this case you should put a path to file in Content from file parameter. To see javascript codes used in live preview check (please open this file in text editor): If you want to implement Dynamic Step Process Panels without using admin panel check old documentation. If you've used Dynamic Step Process Panels before update, when admin panel wasn't available and you don't want to change your old implementation, just replace [dspp] shortcodes with [dspp_old] shortcodes. If you have any questions, please contact me: QuanticaLabs@gmail.com