jQuery ve Css3 kullanılarak hazırlanmış fazla yer kaplamayan bir form örneği. Form örneğimiz giriş formu, üyelik formu ve şifremi unuttum bölümlerinden oluşuyor. Biraz basit olarak hazırlanmış olabilir ve tam kullanıma hazırbir form örneğide değildir. Sizin yapmanız gereken websitenizdeki form alanlarını bu form örneği ile birleştirmek.
Tab dediğimiz sekmelerden oluştuğu için her üç form alanıda aynı çerçevede bulunuyor ve bu sayede websitenizde fazla yer kaplamıyor. Ayrıca sekmeler arası geçiş esnasında websayfanız tekrar tekrar yenilenmiyor. Aynı tarayıcı penceresinden bütün işlemleri yapmanızı sağlıyor.
Demonun üst kısmında bulunan kırmızı alan içinde bulunan linklere tıkladığınızda sekmeler arasında gezinti yapabiliyorsunuz. Sekmelere arası geçiş esnasında jQuery fadein efekti devreye girerek bir önceki sekmenin solup kaybolmasını sağlıyor ve aynı şekilde tıklamış olduğunuz sekmede netleşip ekrandaki yerini alıyor.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölüm.
Css :
@import url(https://fonts.googleapis.com/css?family=Roboto:100);
@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #34495e; /*tablebg e74c3c #34495e #88565b ed7271*/
margin: 100px auto;
width: 390px;
height: 340px;
position: relative;
font-family: 'Roboto';
}
.tabs {
background: #ed7271; /*topbar #c0392b #88565b*/
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #ed7271; /*topbar c0392b #88565b */
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
font-weight:900;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid @tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #ed7271; /*topbar e74c3c */
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
font-weight: 16px;
font-size: 16px;
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #ffffff; /* #44454a */
border: none;
color: #e74c3c; /* e74c3c e9e9e9 */
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
}
:-ms-input-placeholder {
color: #e74c3c;
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div class="flat-form">
<ul class="tabs">
<li>
<a href="#login" class="active">Login</a>
</li>
<li>
<a href="#register">Register</a>
</li>
<li>
<a href="#reset">Reset Password</a>
</li>
</ul>
<div id="login" class="form-action show">
<h1>Login on webapp</h1>
<p>
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Maecenas sed diam eget risus varius bladit sit amet non
</p>
<form>
<ul>
<li>
<input type="text" placeholder="Username" />
</li>
<li>
<input type="password" placeholder="Password" />
</li>
<li>
<input type="submit" value="Login" class="button" />
</li>
</ul>
</form>
</div>
<!--/#login.form-action-->
<div id="register" class="form-action hide">
<h1>Register</h1>
<p>
You should totally sign up for our super awesome service.
It's what all the cool kids are doing nowadays.
</p>
<form>
<ul>
<li>
<input type="text" placeholder="Username" />
</li>
<li>
<input type="password" placeholder="Password" />
</li>
<li>
<input type="submit" value="Sign Up" class="button" />
</li>
</ul>
</form>
</div>
<!--/#register.form-action-->
<div id="reset" class="form-action hide">
<h1>Reset Password</h1>
<p>
To reset your password enter your email and your birthday
and we'll send you a link to reset your password.
</p>
<form>
<ul>
<li>
<input type="text" placeholder="Email" />
</li>
<li>
<input type="text" placeholder="Birthday" />
</li>
<li>
<input type="submit" value="Send" class="button" />
</li>
</ul>
</form>
</div>
<!--/#register.form-action-->
</div>
Js dosya adresi :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
JavaScript :
<script type="text/javascript">
(function( $ ) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
$( '.tabs' ).on( 'click', 'li a', function(e){
e.preventDefault();
var $tab = $( this ),
href = $tab.attr( 'href' );
$( '.active' ).removeClass( ACTIVE_CLASS );
$tab.addClass( ACTIVE_CLASS );
$( '.show' )
.removeClass( SHOW_CLASS )
.addClass( HIDE_CLASS )
.hide();
$(href)
.removeClass( HIDE_CLASS )
.addClass( SHOW_CLASS )
.hide()
.fadeIn( 550 );
});
})( jQuery );
</script>