jQuery怎么實(shí)現(xiàn)一個滾動的分步注冊向?qū)?/h1>

發(fā)布時間：2021-08-10 14:34:25 來源：億速云 閱讀：171 作者：chen 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“jQuery怎么實(shí)現(xiàn)一個滾動的分步注冊向?qū)А?，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“jQuery怎么實(shí)現(xiàn)一個滾動的分步注冊向?qū)А卑?

使用jQuery實(shí)現(xiàn)很多很有意思的應(yīng)用效果。我們在很多網(wǎng)站注冊會員時，需要填寫注冊表單，包括登錄信息、個人聯(lián)系信息等，本文將帶您一起體驗(yàn)jQuery實(shí)現(xiàn)的一個可以滾動的十分友好的分步注冊向?qū)А?/p>

HTML

首先要載入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}

您可以根據(jù)實(shí)際應(yīng)用環(huán)境修改css，來體現(xiàn)不同的外觀。

jQuery

毋庸置疑，和其他插件一樣，直接調(diào)用方法。

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

就是這么簡單，現(xiàn)在可以通過單擊下一步切換步驟了，但有問題是導(dǎo)航的步驟標(biāo)題tab樣式?jīng)]有同時切換，點(diǎn)擊下一步時應(yīng)該驗(yàn)證當(dāng)前表單輸入的合法性。值得慶幸的是，兩個方法使得問題變得很簡單了。

onSeek：function();當(dāng)滾動當(dāng)前page后發(fā)生的事情，本例中我們要切換tab樣式。

onBeforeSeek：function();滾動之前發(fā)生的事情，本例中我們要驗(yàn)證表單。

請看代碼：

$(function(){ $("#wizard").scrollable({        onSeek: function(event,i){ //切換tab樣式 $("#status li").removeClass("active").eq(i).addClass("active"); }, onBeforeSeek:function(event,i){ //驗(yàn)證表單 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提交表單。本文為了演示，采用以下方法獲取輸入的內(nèi)容：

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

到此，相信大家對“jQuery怎么實(shí)現(xiàn)一個滾動的分步注冊向?qū)А庇辛烁畹牧私?，不妨來?shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！