jquery wizard for user registration [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 7 years ago.

Improve this question

I Want some samples for st开发者_C百科ep by step registrations like a wizard. i want to use these samples and asp.net page. Thanks.

---

You can easily create your own using jQuery - check out this demo http://jsfiddle.net/nwJFs/

And here's the code

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;
});

---

check out this one : http://thecodemine.org

having problems with chrome though...

---

Do you mean, something like this? jQuery Form Builder

---

checkout these links for better wizard creation: techlab-smart wizard: http://techlaboratory.net/smartwizard

https://github.com/techlab/SmartWizard