webdev-gadgets-multisteps
html code
<![CDATA[
<div style="width: 100px; height: 300px;"></div>
]]>
1. simple example
<![CDATA[
$('.multisteps1').multisteps({
steps: ['Step1', 'Step2', 'Step3', 'Step4', 'Step5'],
currentStep: 3
});
]]>
2. add more config params
<![CDATA[
$('.multisteps2').multisteps({
steps: ['Step1', 'Step2', 'Step3', 'Step4', 'Step5'],
currentStep: 4, // current step index
wordSide: 'right', // words' position relative to points, left、 right、top or bottom
margin: {
left: 10,
right: 10,
top: 15,
bottom: 15
}, // margin of viewbox to container
radius: 15, // point radius
activeRadius: 20, // acitve point radius
pointsInteval: 10, // interval between adjacent points, default will be euqal split in data process
barWidth: 10, // width of bar which connects points;
wordPointInterval: 5, // interval between step word and point
showIndex: true, // show index number in point circle or not
});
]]>
3. set click event, step will change when you click
<![CDATA[
$('.multisteps3').multisteps({
steps: ['Step1', 'Step2', 'Step3', 'Step4', 'Step5'],
currentStep: 0
});
$('.multisteps3').on('click', '.point', function () {
$('.multisteps3').multisteps({
steps: ['Step1', 'Step2', 'Step3', 'Step4', 'Step5'],
currentStep: $(this).data('index')
});
});
]]>
4. wordSide is top
<![CDATA[
var config4 = {
steps: ['Step1', 'Step2', 'Step3', 'Step4', 'Step5'],
currentStep: 0,
wordSide: 'top',
pointsInteval: 30,
margin: {
left: 40,
right: 40,
top: 15,
bottom: 45
},
};
$('.multisteps4').multisteps(config4);
$('.multisteps4').on('click', '.point', function () {
config4.currentStep = $(this).data('index');
$('.multisteps4').multisteps(config4);
});
]]>
5. wordSide is bottom
<![CDATA[
var config5 = {
steps: ['Step1', 'Step2', 'Step3', 'Step4', 'Step5'],
currentStep: 0,
wordSide: 'bottom',
radius: 15,
activeRadius: 20,
margin: {
left: 40,
right: 40,
top: 45,
bottom: 15
},
showIndex: true
};
$('.multisteps5').multisteps(config5);
$('.multisteps5').on('click', '.point', function () {
config5.currentStep = $(this).data('index');
$('.multisteps5').multisteps(config5);
});
]]>