jQuery嘰嘰喳喳樣式登錄

我試圖建立一個類似於Twitter的登錄表單，但我有一個問題。點擊「登錄」後，會出現表單。當再次單擊「登錄」時，表單將消失。這很好，但我希望表單在用戶在表單外單擊時也會消失。jQuery嘰嘰喳喳樣式登錄

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>jQuery Testing</title> 

<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
    $('.signIn').click(function() { 
    $(this).toggleClass('highlight'); 
    $('form').toggleClass('show'); 
    }); 
    }); 
</script> 

    <style type="text/css"> 

    #container { 
margin: 0 auto; 
width: 920px; 
border: #ccc solid 1px; 
padding: 20px; 
overflow: auto; 
background: #ebebeb; 
    } 

    .signIn { 
float: right; 
padding: 5px 5px 0; 
    } 
    form { 
background: #0000ff; 
padding: 10px; 
width: 200px; 
float: right; 
clear: both; 
position: absolute; 
margin-left: 700px; 
margin-top: 25px; 
display: none; 
    } 
    label, input { 
display: block; 
    } 
    .highlight { 
background: #0000ff; 
color: #fff; 
    } 
    .show { 
display: block; 
    } 

    </style> 

    </head> 

    <body> 

    <div id="container"> 

<div class="right"> 
    <a href="#" class="signIn">Sign In</a> 
    <form> 
    <label>Username</label> 
    <input type="text" /> 
    <label>Password</label> 
    <input type="text" /> 
    </form> 
</div> 

    </div> 

    </body> 
    </html>

來源

2010-10-15 Robert Pessagno

您可以在頁面上的所有內容上添加一個完全（或部分）透明的div，然後在上面顯示登錄表單。添加處理程序到疊加層。點擊時，將其全部推開。

來源

2010-10-15 20:46:11

當點擊jQuery('.signIn')時，您應該將您的「顯示此類」代碼發送到focus事件。要隱藏div，請在blur事件中單獨激活代碼以「隱藏此類」。

樣品：

$('.signIn').focus(function() { 
    //Your "show this class" code here 
}); 

$('.signIn').blur(function() { 
    //Your "hide this class" code here 
});

此外，這是題外話，但創建元素，如div■當，你應該嘗試給他們的ID，如果他們將是唯一的，並且需要被唯一選擇，應該將一個類應用於兩個或更多可以共享它們之間共性的元素（例如樣式或某些事件的行爲）。您的登錄表單很可能需要它自己的ID，因爲我不認爲您會有多個登錄框。它可能還需要一個類，如果您至少有一個其他鏈接將被設置爲樣式，但暫時（根據您的示例），這是不需要的。

所以，建議：

<div class="right"> 
    <a href="#" id="signIn">Sign In</a> 
    <form> 
    <label>Username</label> 
    <input type="text" /> 
    <label>Password</label> 
    <input type="text" /> 
    </form> 
</div>

這將允許你通過使用ID選擇器（＃）直接訪問錨元素：$('#signIn')。當你的頁面更加複雜時，使用ID而不是類來獲得一些很好的性能優勢，並且複雜度也更低。

來源

2010-10-15 21:04:56 Mattygabe

這個想法很接近，但現在如果點擊任何東西，包括表單本身，表單就會關閉。此外，如果單擊登錄按鈕，表單將不會關閉，因爲該按鈕保留其焦點。儘管如此，我會進一步研究它。我有一種感覺會有用處。 – 2010-10-15 21:46:41

jQuery嘰嘰喳喳樣式登錄

回答

相關問題