jQuery注册向导 jQuery注册向导
程序员文章站
2024-01-28 14:33:34
...
scrollable.js插件带您一起体验可以滚动的分步注册向导,用户体验十分友好。
创建注册菜单,和菜单对应的内容.page:
插件调用:
教程
演示
下载:idea:
创建注册菜单,和菜单对应的内容.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网页向导插件 Joyride
-
JQuery validate插件验证用户注册信息_jquery
-
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
-
jQuery正则验证注册页面经典实例
-
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法_jquery
-
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1_php实例
-
使用jQuery validate 验证注册表单实例演示_jquery
-
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能_jquery
-
node.js+jQuery实现用户登录注册AJAX交互