Question

我想要一些逐步注册的示例，例如向导。我想使用这些示例和asp.net页面。感谢。

Answer 1

您可以使用jQuery轻松创建自己的 - 请查看此演示 http://jsfiddle.net/nwJFs/

这是代码

<强> HTML

<div class="step step-1">
    <div class="wrap">
        <label for="name">Name</label>
        <input id="name" type="text" />
    </div>
    <div class="wrap">
        <label for="email">Email</label>
        <input id="email" type="text" />
    </div>
    <div class="wrap">
        <label for="phone">Phone</label>
        <input id="phone" type="text" />
    </div>
    <br class="clear-last" />

    <a class="button prev" href="#">Previous</a>
    <a class="button next" href="#">Next</a>
</div>
<div class="step step-2">
    <div class="wrap">
        <label for="name">Mobile</label>
        <input id="name" type="text" />
    </div>
    <div class="wrap">
        <label for="email">Address</label>
        <textarea id="email"></textarea>
    </div>
    <div class="wrap">
        <label for="phone">Phone</label>
        <input id="phone" type="text" />
    </div>
    <br class="clear-last" />

    <a class="button prev" href="#">Previous</a>
    <a class="button next" href="#">Next</a>
</div>
<div class="step step-3">
    <div class="wrap">
        <label for="name">Some</label>
        <input id="name" type="text" />
    </div>
    <div class="wrap">
        <label for="email">Other</label>
        <textarea id="email"></textarea>
    </div>
    <div class="wrap">
        <label for="phone">Fields</label>
        <input id="phone" type="text" />
    </div>
    <br class="clear-last" />

    <a class="button prev" href="#">Previous</a>
    <a class="button next" href="#">Submit</a>
</div>

<强> CSS

body {
    font-family: Trebuchet MS;
    font-size: 12px;
}

.wrap {
    clear: both;
    padding: 8px 0;
}
.wrap label {
    display: block;
    float: left;
    width: 150px;
    padding: 4px;
    line-height: 12px;
}
.wrap input,
.wrap textarea {
    display: block;
    font-size: 12px;
    line-height: 12px;
    float: left;
    width: 200px;
    border: 1px solid #888;
    padding: 4px 8px;
}

.button {
    background: #333;
    color: #f2f2f2;
    display: inline-block;
    padding: 4px 8px;
    text-decoration: none;
    border: 1px solid #ccc;
}
.button:hover {
    background: #888;
    color: #000;
}

br.clear-last {
    clear: both;
    margin: 15px 0;
}

.step {
    display: none;
}
.step-1 {
    display: block;
}

<强>的jQuery

$(".next").click(function() {
   //store parent
   var parent = $(this).parent();
    if(parent.next().length) {
       parent.hide("slow").next().show("slow");
    }
    return false;
});
$(".prev").click(function() {
   var parent = $(this).parent();
    if(parent.prev().length) {
       parent.hide("slow").prev().show("slow");
    }
    return false;
});

Answer 2

看看这个：http://thecodemine.org

虽然有铬问题...

Answer 3

你是说，这是什么意思？ jQuery Form Builder

Answer 4

检查这些链接以获得更好的向导创建： techlab-smart wizard：http://techlaboratory.net/smartwizard

https://github.com/techlab/SmartWizard

用于用户注册的jquery向导

4 个答案: