Tutorial :jquery wizard for user registration [closed]



Question:

I Want some samples for step by step registrations like a wizard. i want to use these samples and asp.net page. Thanks.


Solution:1

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


Solution:2

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

having problems with chrome though...


Solution:3

Do you mean, something like this? jQuery Form Builder


Solution:4

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

https://github.com/techlab/SmartWizard


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »