scrollable.js插件带您一起体验可以滚动的分步注册向导,用户体验十分友好。
[img]http://www.sucaihuo.com/jquery/demo/57/images/demo.jpg[/img]
创建注册菜单,和菜单对应的内容.page:
插件调用:
[url=http://www.sucaihuo.com/js/57.html]教程[/url]
[url=http://www.sucaihuo.com/jquery/demo/57]演示[/url]
[url=http://www.sucaihuo.com/download/zip/id/57/mtype/2.html]下载[/url]:idea: :idea: :idea:
[img]http://www.sucaihuo.com/jquery/demo/57/images/demo.jpg[/img]
创建注册菜单,和菜单对应的内容.page:
<form action="#" method="post">
<div id="wizard">
<ul id="status">
<li class="active"><strong>1.</strong>创建账户</li>
<li><strong>2.</strong>填写联系信息</li>
<li><strong>3.</strong>完成</li>
</ul>
<div class="items">
<div class="page">
-----任意html内容-----
<div class="btn_nav">
<input type="button" class="next right" value="下一步»" />
</div>
</div>
<div class="page">
-----任意html内容-----
<div class="btn_nav">
<input type="button" class="prev" style="float:left" value="«上一步" />
<input type="button" class="next right" value="下一步»" />
</div>
</div>
<div class="page">
-----任意html内容-----
<div class="btn_nav">
<input type="button" class="prev" style="float:left" value="«上一步" />
<input type="button" class="next right" id="sub" value="确定" />
</div>
</div>
</div>
</div>
</form>
插件调用:
$(function(){
$("#wizard").scrollable({
onSeek: function(event,i){ //切换tab样式
$("#status li").removeClass("active").eq(i).addClass("active");
},
onBeforeSeek:function(event,i){ //验证表单
if(i==1){
var user = $("#user").val();
if(user==""){
alert("请输入用户名!");
return false;
}
var pass = $("#pass").val();
var pass1 = $("#pass1").val();
if(pass==""){
alert("请输入密码!");
return false;
}
if(pass1 != pass){
alert("两次密码不一致!");
return false;
}
}
}
});
});
[url=http://www.sucaihuo.com/js/57.html]教程[/url]
[url=http://www.sucaihuo.com/jquery/demo/57]演示[/url]
[url=http://www.sucaihuo.com/download/zip/id/57/mtype/2.html]下载[/url]:idea: :idea: :idea: