Wizard Form-技术圈

Wizard Form

联合创作 · 2023-10-02 15:19

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>

编辑