Wizard Form

Wizard Form
 点击下载

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:

  1. $("form").wizard();  

Style definitions:

  1. .wizard-nav 
  2. padding10px 0
  3. border1px solid #ddd
  4. width650px
  5. margin10px auto
  6. .wizard-nav a 
  7. background#eee
  8. border-right1px solid #ddd
  9. border-left1px solid #ddd
  10. text-decorationnone
  11. padding10px;  
  12. width162.5px
  13. displayinline
  14. margin0
  15. .wizard-nav a.active { background#dfd; } 
  16.  
  17. .wizardcontrols .wizardnext { margin-left76%width12%; } 
  18. .wizardcontrols .wizardprev { width12%; } 
  19. #FirstPage .wizardcontrols .wizardnext { margin-left88%; }  

Markup:

  1. <form action="something.html" method="post"> 
  2.   <div id="FirstPage" class="wizardpage">This</div> 
  3.   <div id="SecondPage" class="wizardpage">is</div> 
  4.   <div id="ThirdPage" class="wizardpage">a</div> 
  5.   <div id="LastPage" class="wizardpage">wizard</div> 
  6.   <div class="wizard-nav"> 
  7.     <a href="#FirstPage">Do some stuff</a> >> 
  8.     <a href="#SecondPage">Then some more</a> >> 
  9.     <a href="#ThirdPage">Almost there...</a> >> 
  10.     <a href="#LastPage">Finish!</a> 
  11.   </div> 
  12. </form> 

 

转载请注明:代码家园 » Wizard Form

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)