Wizard Form

码农软件 · 软件分类 · 其他jQuery插件 · 2020-01-11 09:42:39

软件介绍

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 target="_blank" rel="nofollow" href="#FirstPage">Do some stuff</a> >>
    <a target="_blank" rel="nofollow" href="#SecondPage">Then some more</a> >>
    <a target="_blank" rel="nofollow" href="#ThirdPage">Almost there...</a> >>
    <a target="_blank" rel="nofollow" href="#LastPage">Finish!</a>
  </div>
</form>

本文地址:https://codercto.com/soft/d/23131.html

How to Design Programs, 2nd Edition

How to Design Programs, 2nd Edition

Matthias Felleisen、Robert Bruce Findler、Matthew Flatt、Shriram Krishnamurthi / MIT Press / 2018-5-4 / USD 57.00

A completely revised edition, offering new design recipes for interactive programs and support for images as plain values, testing, event-driven programming, and even distributed programming. This ......一起来看看 《How to Design Programs, 2nd Edition》 这本书的介绍吧!

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具