jquery를 기반으로 롤링 단계별 등록 마법사 구현 - 소스 코드 attachment_jquery

먼저 렌더링을 보여드리겠습니다. 필요하신 분들은 소스코드를 다운받으시면 됩니다~

데모 보기 소스 코드 다운로드

HTML

먼저 jquery 라이브러리와 스크롤 가능 플러그인 scrollable.js를 로드합니다

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="scrollable.js"></script> 

그런 다음 html 기본 구조를 구성합니다.

 <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="下一步&raquo;" /> 
  </div> 
 </div> 
 <div class="page"> 
  -----任意html内容----- 
  <div class="btn_nav"> 
  <input type="button" class="prev" style="float:left" value="&laquo;上一步" /> 
  <input type="button" class="next right" value="下一步&raquo;" /> 
  </div> 
 </div> 
 <div class="page"> 
  -----任意html内容----- 
  <div class="btn_nav"> 
  <input type="button" class="prev" style="float:left" value="&laquo;上一步" /> 
  <input type="button" class="next right" id="sub" value="确定" /> 
  </div> 
 </div> 
 </div> 
 </div> 
</form>

위는 등록 양식입니다. 세 개의 .pages에 원하는 HTML 양식 내용을 입력할 수 있습니다. 공간 제한으로 인해 이 문서에는 양식의 구체적인 내용이 나열되지 않습니다.

CSS

#wizard {border:5px solid #789;font-size:12px;height:450px;margin:20px auto; 
width:570px;overflow:hidden;position:relative;} 
#wizard .items{width:20000px; clear:both; position:absolute;} 
#wizard .right{float:right;} 
#wizard #status{height:35px;background:#123;padding-left:25px !important;} 
#status li{float:left;color:#fff;padding:10px 30px;} 
#status li.active{background-color:#369;font-weight:normal;} 
.input{width:240px; height:18px; margin:10px auto; line-height:20px; 
border:1px solid #d3d3d3; padding:2px} 
.page{padding:20px 30px;width:500px;float:left;} 
.page h3{height:42px; font-size:16px; border-bottom:1px dotted #ccc; margin-bottom:20px; 
 padding-bottom:5px} 
.page h3 em{font-size:12px; font-weight:500; font-style:normal} 
.page p{line-height:24px;} 
.page p label{font-size:14px; display:block;} 
.btn_nav{height:36px; line-height:36px; margin:20px auto;} 
.prev,.next{width:100px; height:32px; line-height:32px; background:url(btn_bg.gif) 
repeat-x bottom; border:1px solid #d3d3d3; cursor:pointer}

실제 애플리케이션 환경에 따라 CSS를 수정하여 다양한 모습을 반영할 수 있습니다.

jQuery

말할 필요도 없이 다른 플러그인과 마찬가지로 메소드가 직접 호출됩니다.

$(function(){ 
 $("#wizard").scrollable(); 
}); 

이제 다음을 클릭하면 단계를 전환할 수 있습니다. 하지만 문제는 다음을 클릭할 때 탐색 단계 제목 탭 스타일이 동시에 전환되지 않는다는 것입니다. . 다행히 두 가지 방법을 사용하면 문제가 매우 간단해집니다.

onSeek: function(); 현재 페이지를 스크롤하면 어떤 일이 발생할까요? 이 경우 탭 스타일을 전환하려고 합니다.
onBeforeSeek: function(); 스크롤하기 전에 일어나는 일, 이 경우 양식의 유효성을 검사하려고 합니다.

코드를 확인하세요:

$(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; 
  } 
  } 
 } 
 }); 
}); 

마지막으로 양식을 제출하고 양식 값을 얻으려면 마지막 단계에서 submit() 메서드를 "확인" 버튼에 바인딩하고 작업을 통해 양식을 제출하면 됩니다. 데모 목적으로 이 문서에서는 다음 방법을 사용하여 입력 콘텐츠를 가져옵니다.

$("#sub").click(function(){ 
 var data = $("form").serialize(); 
 alert(data); 
});