0

我想要一些样本，以便像向导一样逐步注册。我想使用这些示例和 asp.net 页面。谢谢。

4

4 回答 4

5

您可以使用 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;
});
于 2010-07-05T06:19:34.983 回答
1

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

虽然有铬问题......

于 2011-10-05T13:42:53.723 回答
0

你的意思是，像这样的东西？ jQuery 表单生成器

于 2010-07-05T05:06:47.440 回答
0

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

https://github.com/techlab/SmartWizard

于 2012-11-21T14:21:38.917 回答