scrollable.js插件带您一起体验可以滚动的分步注册向导,用户体验十分友好。
创建注册菜单,和菜单对应的内容.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;
}
}
}
});
});
教程
演示
下载:idea:
分享到:
相关推荐
jQuery实现分步注册向导是一款基于jQuery实现的账户注册分步向导。
jQuery实现一个滚动的分步注册向导
漂亮的Jquery Wizard Steps 向导 适合注册及向导等
很棒的jQuery步骤向导插件。 jQuery Smart Wizard是jQuery的可访问步骤向导插件。 为您的表单,结帐屏幕,注册步骤等提供简洁时尚的界面。易于实现,Bootstrap兼容性,可自定义的工具栏,主题,事件和Ajax支持是...
内容索引:脚本资源,jQuery,jQuery插件 增强社交、论坛、商城用户友好性,js/jQuery向导实例,一个使用jquery写的网站功能向导的例子,点击开始向导,会看到这个向导如何工作,以及你可以嵌入到你自己的网站中去。...
jQuery实现分步注册向导是一款基于jQuery实现的账户注册分步向导。
html5 jquery技术实现的用户注册登录模板,非常好用,简单而且界面美观漂亮简洁,是一个向导页面,你可以仿照这个实现多个注册流程
使用jQuery实现很多很有意思的应用效果。我们在很多网站注册会员时,需要填写注册表单,包括登录信息、个人联系信息等,本文将带您一起体验jQuery实现的一个可以滚动的十分友好的分步注册向导,需要的朋友可以参考下
系统有4种皮肤主题,主要功能包括登录、注册、报表、找回密码、修改密码、用户管理、部门管理、菜单管理、字典管理、个人资料管理、信息发布管理、角色权限管理、邮件收发管理等等。 框架的数据持久层将添加、修改、...
一个完全响应式的 Bootstrap 5 管理仪表板模板。它使用 bootstrap 5 框架、HTML5、...表单向导 发票页面 用户资料页面 不同类型的通知和甜蜜警报 登录/注册页面 动画模型 兼容小、中、大屏幕 动态和静态小部件 井文档
集合与最新jQuery UI组件和bootstrap插件。它可以创意任何类型的web应用程序,项目管理、CRM、cms等。 主要特色 60 +响应的HTML页面 容易定制 Bootstrap5框架 200 + UI图标 多个图表选项 W3C验证代码 多个表布局的...
Bootstrap 注册向导使用 ASP.NET MVC、EntityFramework 和 Jquery 构建响应式注册向导的参考应用程序技术服务器端ASP.NET MVC EF 6 代码优先客户端查询引导程序构建应用程序视觉工作室构建解决方案以安装 Nuget 包。...
注册域名 访问服务器控制面板(例如cPanel) 安装 标准安装 。 将压缩文件解压缩/解压缩到所需的Web根目录。 通常是一个名为public_html的文件夹。 将浏览器指向install.php脚本(例如...
在几秒钟内创建注册表单,调查表,订单,事件注册等! 没有编码! Modern Flat,Metro,Bootstrap表单主题,纯CSS样式,完全响应,视网膜就绪,按需输入HTML5或jQuery Bootstrap表单验证,反垃圾邮件验证码-创建...
●用户注册和登录功能(向导格式) ●产品上市功能 ●产品购买功能 ●信用卡注册功能(PayJP) 使用的技术 :black_medium_square:︎语言 后端 Ruby 2.5.1 前端 jQuery 1.12.4 :black_medium_square:︎框架 Ruby on ...
系统采用向导式安装程序,无经验的站长用户也可以轻松完成安装部署。 系统设计了大量自定义功能,所有前台表现要素都可以自行定义。 系统支持淘宝客采集功能,只要设置好宝贝分类和要采集的关键词,即可方便获取...
1.优化注册流程,用户注册成功后,可在向导模式下完善个人资料 2.升级tinymce,解决IE下编辑器会自动跳至顶部问题 3.解决在总站中,发帖回帖、创建活动、创建群组后,到空间中点击相应导航,提示“应用未安装” 4. ...
1.[改进]去掉旧版AJAXRequest换成jQuery中的AJAX 2.[改进]为了系统安全和稳定去掉宇初验证码和印象码,加入4种数字验证码、1种中文验证码、1种计算题验证码供用户选择 3.[改进]为了后台系统安全,后台登录页不用判断...