мастер jquery для регистрации пользователя

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

Вы имеете в виду, что-то вроде этого? jQuery Form Builder

Answer 3

проверить этот один: http://thecodemine.org

проблемы с хромом, хотя ...

Answer 4

контроль эти ссылки для лучшего создания мастера: TechLab-умный мастер : http://techlaboratory.net/smartwizard

https://github.com/techlab/SmartWizard