jQuery Responsive Horizontal and Vertical Step Wizard Plugin setStep.js
Add-ons
Plugin description: Compatible with IE8. The plugin's appearance and behavior can be customized by passing parameters.
Usage
Include the jQuery library, setstep.js, and the stylesheet.
1 2 3 | <link rel="stylesheet" href="css/ystep.css"><script src="js/jquery.min.js"></script><script type="text/javascript" src=js/setStep.js></script> |
DOM structure:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!-- Menu and pagination container --><div class="stepCont stepCont1"> <!-- Menu navigation display --> <div class='ystep-container ystep-lg ystep-blue'></div> <!-- Pagination container --> <div class="pageCont"> <div id="page1" class="stepPage"> <h1> page1 </h1> </div> <div id="page2" class="stepPage"> <h1> page2 </h1> </div> <div id="page3" class="stepPage"> <h1> page3 </h1> </div> <div id="page4" class="stepPage"> <h1> page4 </h1> </div> <div id="page5" class="stepPage"> <h1> page5 </h1> </div> </div></div> |
Initialization example:
You can change the button display and whether the progress bar can be clicked directly to control the step by setting clickAble:false and showBtn:false.
1 2 3 4 5 6 7 8 9 | var step1 = new SetStep({ content: '.stepCont1', showBtn: false,}) var step2 = new SetStep({ content: '.stepCont2', clickAble: false}) var step3 = new SetStep({ content: '.stepCont3'}) |
评论