仿的是花瓣登录效果,他默认HTML是这样的
<code class="lang-html"><a onclick="app.showSheet('login', {modal: true});return false;" href="#" class="login btn wbtn"><span class="text"> 登录</span></a> </code>
点击登录,会在#page里面加上登录框,
<code class="lang-html"><div class="sheet-overlay" style="opacity: 1;"></div> <div id="sheet" class="destroy" style="display: block; top: 72px;"> <div id="sheet_login" class="sheet"> <div class="head"> <h2>登录花瓣</h2> </div> <div class="body"> <div class="login-connect"> <h5>使用合作网站帐号登录</h5> <div class="connections clearfix"> <a href="/oauth/weibo/instant_login/" onclick="return false;" class="weibo login-button">新浪微博</a><a href="/oauth/douban/instant_login/" onclick="return false;" class="douban login-button">豆瓣</a><a href="/oauth/renren/instant_login/" onclick="return false;" class="renren login-button">人人网</a><a href="/oauth/qzone/instant_login/" onclick="return false;" class="qzone login-button">QQ</a> </div> <p class="less">未注册过花瓣也可以直接登录哦</p> </div> <div class="login-form"> <h5>使用注册邮箱登录</h5> <form id="auth_form" action="https://huaban.com/auth/" method="post" class="Form FancyForm AuthForm"> <ul> <li> <div class="input email"> <input id="login_email" name="email" type="text" value=""> <label>花瓣注册邮箱</label> <span class="fff"></span> </div> </li> <li> <div class="input password"> <input id="login_password" name="password" type="password"> <label>密码</label> <span class="fff"></span> </div> </li> </ul> <div class="non_inputs"> <a id="login_btn" href="#" onclick="return false;" class="btn btn18 rbtn"><strong> 登录</strong><span></span></a><a id="reset_password" href="#" onclick="return false;" class="less fr">忘记了密码?</a><a id="back_to_login" href="#" style="display: none;" onclick="return false;" class="less fr">哦,又想起来了!</a> </div> </form> <div id="reset_msg" style="display: none;" class="success"></div> </div> <div class="clear"></div> </div> <a href="#" title="关闭" onclick="app.hideSheet();return false;" class="close"></a> </div> </div> </code>
点击关闭后,会删除这个登录框。而且出来的时候是向下拉,关闭的时候是向上收,我把上面代码放在/include/pop-login.php里面
<code class="lang-javascript"> onclick="app.showSheet('login', {modal: true});return false;" </code>
他这样的方式怎么写
<code>$('.login').on('click',function(){ $.ajax({ async: false, url: "/include/pop-login.php", cache: false, success: function(html){ $("#page").append(html); } }); }); $('#sheet_login .close').live('click',function(){ $('.sheet-overlay').remove(); $('#sheet').remove(); }); </code>
仿的是花瓣登录效果,他默认HTML是这样的
<code class="lang-html"><a onclick="app.showSheet('login', {modal: true});return false;" href="#" class="login btn wbtn"><span class="text"> 登录</span></a> </code>
点击登录,会在#page里面加上登录框,
<code class="lang-html"><div class="sheet-overlay" style="opacity: 1;"></div> <div id="sheet" class="destroy" style="display: block; top: 72px;"> <div id="sheet_login" class="sheet"> <div class="head"> <h2>登录花瓣</h2> </div> <div class="body"> <div class="login-connect"> <h5>使用合作网站帐号登录</h5> <div class="connections clearfix"> <a href="/oauth/weibo/instant_login/" onclick="return false;" class="weibo login-button">新浪微博</a><a href="/oauth/douban/instant_login/" onclick="return false;" class="douban login-button">豆瓣</a><a href="/oauth/renren/instant_login/" onclick="return false;" class="renren login-button">人人网</a><a href="/oauth/qzone/instant_login/" onclick="return false;" class="qzone login-button">QQ</a> </div> <p class="less">未注册过花瓣也可以直接登录哦</p> </div> <div class="login-form"> <h5>使用注册邮箱登录</h5> <form id="auth_form" action="https://huaban.com/auth/" method="post" class="Form FancyForm AuthForm"> <ul> <li> <div class="input email"> <input id="login_email" name="email" type="text" value=""> <label>花瓣注册邮箱</label> <span class="fff"></span> </div> </li> <li> <div class="input password"> <input id="login_password" name="password" type="password"> <label>密码</label> <span class="fff"></span> </div> </li> </ul> <div class="non_inputs"> <a id="login_btn" href="#" onclick="return false;" class="btn btn18 rbtn"><strong> 登录</strong><span></span></a><a id="reset_password" href="#" onclick="return false;" class="less fr">忘记了密码?</a><a id="back_to_login" href="#" style="display: none;" onclick="return false;" class="less fr">哦,又想起来了!</a> </div> </form> <div id="reset_msg" style="display: none;" class="success"></div> </div> <div class="clear"></div> </div> <a href="#" title="关闭" onclick="app.hideSheet();return false;" class="close"></a> </div> </div> </code>
点击关闭后,会删除这个登录框。而且出来的时候是向下拉,关闭的时候是向上收,我把上面代码放在/include/pop-login.php里面
<code class="lang-javascript"> onclick="app.showSheet('login', {modal: true});return false;" </code>
他这样的方式怎么写
<code>$('.login').on('click',function(){ $.ajax({ async: false, url: "/include/pop-login.php", cache: false, success: function(html){ $("#page").append(html); } }); }); $('#sheet_login .close').live('click',function(){ $('.sheet-overlay').remove(); $('#sheet').remove(); }); </code>
大概这种感觉?
<code>function on_click_login(){ $.ajax({ async: false, url: "/include/pop-login.php", cache: false, success: function(html){ $("#page").append(html); }, error: function(){ $('.login').one('click',on_click_login); } }); } $('.login').one('click',on_click_login); $('#page').on('click','#sheet_login .close',function(){ $('.sheet-overlay').remove(); $('#sheet').remove(); $('.login').one('click',on_click_login); }); </code>
PS,因为不喜欢live所以随手改掉了……
也碰到过楼主的这样的问题,那个时候也没有什么好方法解决。当时用了一个很丑陋的方法解决掉的。
当时在页面上写了一个隐藏变量,每次ajax触发之前,都清零,ajax执行成功之后,延迟100ms,才给他赋值,然后每次按键的时候,都预先判断这个隐藏变量是否有值。
<code class="lang-javascript">var popLogin = { isLock: false, init: function() { if (popLogin.isLock) { //TODO... return false; } $.ajax({ url: "/include/pop-login.php", cache: false, success: function(html){ $("#page").append(html); }, complete: function() { popLogin.isLock = false; } }); } }; $('.login').on('click', popLogin.init()); </code>
难道不是在click时disable掉按钮,然后在ajax结束的时候enable吗……