Wizard Form JavascriptStyle definitions:Markup: 介绍
Turns a properly marked up form into a wizard form with page navigation and
prev/next buttons. I really just made this for a project of my own without too
much thought about re-use. Take it and do whatever you like~
Example:
Javascript
$("form").wizard();
Style deFinitions:
`.wizard-nav
{
padding: 10px 0;
border: 1px solid #ddd;
width: 650px;
margin: 10px auto;
}
.wizard-nav a
{
background: #eee;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
text-decoration: none;
padding: 10px;
width: 162.5px;
display: inline;
margin: 0;
}
.wizard-nav a.active { background: #dfd; }
.wizardcontrols .wizardnext { margin-left: 76%; width: 12%; }
.wizardcontrols .wizardprev { width: 12%; }
FirstPage .wizardcontrols .wizardnext { margin-left: 88%; }`
Markup:
<form action="something.html" method="post"> <div id="FirstPage" class="wizardpage">This</div> <div id="SecondPage" class="wizardpage">is</div> <div id="ThirdPage" class="wizardpage">a</div> <div id="LastPage" class="wizardpage">wizard</div> <div class="wizard-nav"> <a href="#FirstPage">Do some stuff</a> >> <a href="#SecondPage">Then some more</a> >> <a href="#ThirdPage">Almost there...</a> >> <a href="#LastPage">Finish!</a> </div> </form>