سورس لاگین باکس تویتر
#1
Note 
[تصویر:  tlogin.1376550955.png]
سلام
در این تاپیک سورس باکس لاگین تویتر رو برای شما گذاشتم.

کدهای HTML:

[HTML]<divid="container">
<divid="topnav"class="topnav"> Have an account? <ahref="login"class="signin"><span>Sign in</span></a> </div>
<fieldsetid="signin_menu">
<formmethod="post"id="signin"action="https://twitter.com/sessions">
<labelfor="username">Username or email</label>
<inputid="username"name="username"value=""title="username"tabindex="4"type="text">
</p>
<p>
<labelfor="password">Password</label>
<inputid="password"name="password"value=""title="password"tabindex="5"type="password">
</p>
<pclass="remember">
<inputid="signin_submit"value="Sign in"tabindex="6"type="submit">
<inputid="remember"name="remember_me"value="1"tabindex="7"type="checkbox">
<labelfor="remember">Remember me</label>
</p>
<pclass="forgot"> <ahref="#"id="resend_password_link">Forgot your password?</a> </p>
<pclass="forgot-username"> <Aid=forgot_username_link
title="If you remember your password, try logging in with your email"
href="#">Forgot your username?</A> </p>
</form>
</fieldset>
</div>[/HTML]

کدهای CSS:
[CSS]#container {
width:780px;
margin:0 auto;
position: relative;
}

#content {
width:520px;
min-height:500px;
}
a:link, a:visited {
color:#27b;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a img {
border-width:0;
}
#topnav {
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
}
#topnav a.signin {
background:#88bbd4;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.signin:hover {
background:#59B;
*background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover {
*background-position:0 3px!important;
}

a.signin {
position:relative;
margin-left:3px;
}
a.signin span {
background-image:url("images/toggle_down_light.png");
background-repeat:no-repeat;
background-position:100% 50%;
padding:4px 16px 6px 0;
}
#topnav a.menu-open {
background:#ddeef6!important;
color:#666!important;
outline:none;
}
#small_signup {
display:inline;
float:none;
line-height:23px;
margin:25px 0 0;
width:170px;
}
a.signin.menu-open span {
background-image:url("images/toggle_up_dark.png");
color:#789;
}[/CSS]

[CSS]#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
display:none;
background-color:#ddeef6;
position:absolute;
width:210px;
z-index:100;
border:1px transparent;
text-align:left;
padding:12px;
top: 24.5px;
right: 0px;
margin-top:5px;
margin-right: 0px;
*margin-right: -1px;
color:#789;
font-size:11px;
}

#signin_menu input[type=text], #signin_menu input[type=password] {
display:block;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #ACE;
font-size:13px;
margin:0 0 5px;
padding:5px;
width:203px;
}
#signin_menu p {
margin:0;
}
#signin_menu a {
color:#6AC;
}
#signin_menu label {
font-weight:normal;
}
#signin_menu p.remember {
padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
clear:both;
margin:5px 0;
}
#signin_menu p a {
color:#27B!important;
}
#signin_submit {
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0;
border:1px solid #39D;
color:#fff;
text-shadow:0 -1px 0 #39d;
padding:4px 10px 5px;
font-size:11px;
margin:0 5px 0 0;
font-weight:bold;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
background-position:0 -5px;
cursor:pointer;
}[/CSS]

کدهای جاوا اسکریپت:

[JS]<script src="javascripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});

$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});

});
</script>[/JS]


پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
Note سورس AJAX RSS reader SOFTAFZAR 0 457 25-01-2013 ساعت 12:10
آخرین ارسال: SOFTAFZAR

کاربرانِ درحال بازدید از این موضوع:   1 مهمان