我正在製作一個與jQuery ajax.form插件一起提交的下拉式登錄表單。效果起作用,提交工作。但是,當你把它們放在一起,他們不工作...jQuery表單提交/效果改進?
這是爲表達式引擎,所以{if}標籤只是EE條件。看到用戶登錄後內容發生了變化 - 我只是需要重新加載,以便內容發生變化 - 我認爲做一堆.html()重寫會更容易... 表單已提交,正確的內容將重新加載並且可點擊,但「#panel」不會重新生成動畫。
<div id="client-login">
<div class="wrap">
<p class="work-message">We're doing some work under the hood! If things get/are funky, please excuse us!</p>
{if logged_out}
<div id="client" class="login">Client Login</div>
{/if}
{if logged_in}
<div id="client" class="login">Hey, {username}!</div>
{/if}
</div>
</div>
<div id="panel">
<div id="panel-content" class="wrap">
{if logged_out}
{exp:member:login_form id="login-form"}
<ul>
<li>
<label><span>Username</span></label>
<input type="text" name="username" value="" maxlength="32" class="input" size="25" />
</li>
<li>
<label><span>Password</span></label>
<input type="password" name="password" value="" maxlength="32" class="input" size="25" />
</li>
<li class="login-forgot">
<a href="{path='member/forgot_password'}">Forgot your password?</a>
</li>
{if auto_login}
<li class="checkbox">
<input class='checkbox' type='checkbox' name='auto_login' value='1' /> Auto-login on future visits
</li>
{/if}
</ul>
<p>
<input type="submit" id="panelsubmit" name="submit" value="Submit" />
</p>
{/exp:member:login_form}
{/if}
<div id="messages">
<p></p>
</div>
{if logged_in}
<div id="logout">
<h2>What do ya wanna' do?!</h2>
<form id="login-form" >
<input type="hidden" name="ACT" value="10" />
<input type="submit" value="Log Out" />
</form>
</div>
{/if}
$(document).ready(function()
{
$('.login').toggle(
function()
{
$('#panel').stop().animate({
height: "150",
padding:"20px 0",
backgroundColor:'rgba(0,0,0,0.8)',
}, 500);
$('#client-login').stop().animate({
backgroundColor:'rgba(0,0,0,0.8)',
}, 500);
},
function()
{
$('#panel').stop().animate({
backgroundColor:'rgba(0,0,0,0.2)',
height: "0",
padding:"0px 0",
}, 500);
$('#client-login').stop().animate({
backgroundColor:'rgba(0,0,0,0.2)',
}, 500);
});
$('#login-form').ajaxForm({
// success identifies the function to invoke when the server response
// has been received; here we apply a fade-in effect to the new content
success: function() {
$("#client").remove().fadeOut("fast");
$("#client-login").load("/ #client-login").fadeIn("fast");
$("#panel-content").remove().fadeOut("fast");
$("#panel").load("/ #panel-content").fadeIn("fast");
}
});
});
功能基本上是存在的,但是表單需要與之前一樣提交後才能工作!另外,.remove的動畫不起作用。我是JavaScript新手,我不知道如何改進。
我不確定我的語法是否正確。這很有用,但我必須點擊它兩次才能初始化......我不知道該怎麼做!請原諒我的無知! – 2009-06-01 01:17:59
你能發表你的語法嗎? – 2009-06-01 01:40:56