• سورس لاگین باکس تویتر
    #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 542 25-01-2013 ساعت 12:10
    آخرین ارسال: SOFTAFZAR

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