用戶註冊的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