溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“jQuery怎么實現一個滾動的分步注冊向導”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“jQuery怎么實現一個滾動的分步注冊向導”吧!
使用jQuery實現很多很有意思的應用效果。我們在很多網站注冊會員時，需要填寫注冊表單，包括登錄信息、個人聯系信息等，本文將帶您一起體驗jQuery實現的一個可以滾動的十分友好的分步注冊向導。
首先要載入jquery庫和滾動插件scrollable.js
#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 h4{height:42px; font-size:16px; border-bottom:1px dotted #ccc; margin-bottom:20px;
padding-bottom:5px}
.page h4 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，來體現不同的外觀。
毋庸置疑，和其他插件一樣，直接調用方法。
$(function(){
$("#wizard").scrollable();
});
就是這么簡單，現在可以通過單擊下一步切換步驟了，但有問題是導航的步驟標題tab樣式沒有同時切換，點擊下一步時應該驗證當前表單輸入的合法性。值得慶幸的是，兩個方法使得問題變得很簡單了。
onSeek：function();當滾動當前page后發生的事情，本例中我們要切換tab樣式。
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()方法，通過action提交表單。本文為了演示，采用以下方法獲取輸入的內容：
$("#sub").click(function(){
var data = $("form").serialize();
alert(data);
});
到此，相信大家對“jQuery怎么實現一個滾動的分步注冊向導”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
