Üye Kayıt Üye Giriş

Tab Stili Kayıt ve Giriş Bölümü Yapma


Tab Stili Kayıt ve Giriş Bölümü Yapma



CSS, HTML ve jQuery ile sekme tarz ıgiriş ve kayıt panel tasarımı nasıl yapacağımızı bu örnekle açıklamaya çalışacağım. Sekme sistemini kullanmak ve web projeleri zenginleştirmek için bu dört adıma hızlı bir göz atın:

1. Adım :

tab stili kayıt ve giriş bölümü yapma 1


Üç yatay bölüme ayrılmıştır. Container, Tabbox ve Panel. Burada Container üst div olduğunu unutmayın.

HTML Kod

<div id=”container“>
<div id=”tabbox“></div>
<div id=”panel“></div>
</div>

tab stili kayıt ve giriş bölümü yapma 2



CSS Kod

#container
{
width:350px
}
#tabbox
{
height:40px
}
#panel
{
background-color:#FFF;
height:300px;
}

2. Adım :

Tabbox sekmesi iki dikey bölüme ayrılır. Login ve Signup.

HTML Kod

<div id=”tabbox“>
<a href=”#” id=”signup”Apple-style-span” style=”color: blue; “>tab signup”>Signup</a>
<a href=”#” id=”login”Apple-style-span” style=”color: blue; “>tab select”>Login</a&gt;
</div>


tab stili kayıt ve giriş bölümü yapma 3

CSS Kod

.tab
{
background: #dedede;display: block;height: 40px;
line-height: 40px;text-align: center;
width: 80px;float: right;font-weight: bold;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius: 4px 4px 0px 0px;
}
a
{
color: #000;
margin: 0;
padding: 0;
text-decoration: none;
}
.signup
{
margin-left:8px;
}
.select
{
background-color:#FFF;
}

3. Adım :

Şimdi panel Loginbox ve Signupbox isimli iki bölüme ayrılmıştır.

HTML Kod

<div id=”panel“>
<div id=”loginbox“>Login Form</div>
<div id=”signupbox“&gt;Signup Form</div>
</div>


tab stili kayıt ve giriş bölümü yapma 4



CSS Kod

#loginbox
{
min-height:200px;
padding:10px;
}
#signupbox
{
min-height:200px;
padding:10px;
display:none;
}

4. Adım :

Bu adım DOM ve Javascript nesneleri içindir.

tab stili kayıt ve giriş bölümü yapma 5
 

Javascript Kod

<script type=”text/javascript” src=”http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function()
{

$(“.tab”).click(function()
{
var X=$(this).attr(‘id’);

if(X==’signup’)
{
$(“#login”).removeClass(‘select’);
$(“#signup”).addClass(‘select’);
$(“#loginbox”).slideUp();
$(“#signupbox”).slideDown();
}
else
{
$(“#signup”).removeClass(‘select’);
$(“#login”).addClass(‘select’);
$(“#signupbox”).slideUp();
$(“#loginbox”).slideDown();
}

});

});
</script>

Ders Sahibi;

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER